Hi team,
I created a web app and deploy it using Render.
I did also bought a domain and manage to link the domain with the streamlit app.
I even managed to add google analytics into it.
The problem that I’m facing is that in google search the app’s title is Streamlit
and the description it says You need to enable JavaScript to run this app.
Like shown in the image below
You could potentially use st.markdown to inject custom HTML into your app, including meta tags, although this is more of a hack and its effectiveness might be limited since these tags need to be in the head section to be most effective.
Ok ! Managed to find a solution that actually worked.
In essence I had to modify the index.html file in /venv/lib/python3.10/site-packages/streamlit/static/index.html using a function that actually modifies the title and the noscript text.
def modify_tag_content(tag_name, new_content):
index_path = pathlib.Path(st.__file__).parent / "static" / "index.html"
logging.info(f'editing {index_path}')
soup = BeautifulSoup(index_path.read_text(), features="html.parser")
target_tag = soup.find(tag_name) # find the target tag
if target_tag: # if target tag exists
target_tag.string = new_content # modify the tag content
else: # if target tag doesn't exist, create a new one
target_tag = soup.new_tag(tag_name)
target_tag.string = new_content
try:
if tag_name in ['title', 'script', 'noscript'] and soup.head:
soup.head.append(target_tag)
elif soup.body:
soup.body.append(target_tag)
except AttributeError as e:
print(f"Error when trying to append {tag_name} tag: {e}")
return
# Save the changes
bck_index = index_path.with_suffix('.bck')
if not bck_index.exists():
shutil.copy(index_path, bck_index) # keep a backup
index_path.write_text(str(soup))
modify_tag_content('title', 'World Marathons Planner')
modify_tag_content('noscript', 'Best Marathon Planner ! Browse through the event selection and discover your next Marathon challenge. Also get specific and personalized training plans.')
Final result.
Probably there is a better solution out there, but at least this one worked on my side
Thanks once again to those who answer before, appreciate it
Have you found a way to make this work for the favicon as well? I know the only other way to do this is to change the streamlit index.html file located within the site-packages but this is difficult to do especially for those who do not have complete control over their requirement.txt files i.e deployment through Heroku in my case.
def modify_tag_content(tag_name, new_content, favicon_filename='FaviconIconUpdated-ts1695318835.svg'):
index_path = pathlib.Path(st.__file__).parent / "static" / "index.html"
logging.info(f'editing {index_path}')
soup = BeautifulSoup(index_path.read_text(), features="html.parser")
if tag_name == 'link' and 'rel' in new_content.lower() and 'icon' in new_content.lower():
# Modify or add favicon link tag
favicon_tag = soup.find('link', {'rel': 'icon'})
if favicon_tag:
favicon_tag['href'] = favicon_filename
else:
favicon_tag = soup.new_tag('link', rel='icon', type='image/svg+xml', href=favicon_filename)
if soup.head:
soup.head.append(favicon_tag)
else:
target_tag = soup.find(tag_name) # find the target tag
if target_tag: # if target tag exists
target_tag.string = new_content # modify the tag content
else: # if target tag doesn't exist, create a new one
target_tag = soup.new_tag(tag_name)
target_tag.string = new_content
try:
if tag_name in ['title', 'script', 'noscript'] and soup.head:
soup.head.append(target_tag)
elif soup.body:
soup.body.append(target_tag)
except AttributeError as e:
print(f"Error when trying to append {tag_name} tag: {e}")
return
# Save the changes
bck_index = index_path.with_suffix('.bck')
if not bck_index.exists():
shutil.copy(index_path, bck_index) # keep a backup
index_path.write_text(str(soup))
# Example usage with modifying the title and favicon
modify_tag_content('title', 'POP • Live Stock Quotes')
modify_tag_content('noscript', 'Best Stock Quotes ! Browse Thousands of Stocks For Free.')
modify_tag_content('link', '', favicon_filename='FaviconIconUpdated-ts1695318835.svg')
This updates the contents correctly but this is only a temporary solution however, when the app session refreshes the favicon reverts back to the original streamlit favicon and then back to my favicon. This doesn’t look the greatest in Google search and I am unable to change the index.html file since I am deploying from Heroku. I wish Streamlit would make an easier & more universal solution for customizable favicons and app titles. Maybe this can be a .toml addition in the future.
Thanks . Was wondering where to place the code, since I was using docker. Figured out that I can add command for running this function ,before running the streamlit app.
