Updating Title/Description of app in Google Search

[Gerard_Martinez_Cane]

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 can check the app : https://www.worldmarathonsplanner.com/
In google search type : site:www.worldmarathonsplanner.com

I did found almost no literature about this issue only this How to edit index.html?
but not sure if there are other solutions out there.

Does someone also experienced the same issue and actually managed to solve it? Thanks in advance.

Gerard

[dataprofessor]

Hi @Gerard_Martinez_Cane

Have you tried setting st.set_page_config(page_title="My App") for your app.

More info in the Docs:

Share previews - Streamlit Docs

[sahirmaharaj]

Hello @Gerard_Martinez_Cane,

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.

st.markdown("""
    <meta name="description" content="Your description here" />
""", unsafe_allow_html=True)

Kind Regards,
Sahir

P.S. Lets connect on LinkedIn!

[Gerard_Martinez_Cane]

Thanks for the quick reply professor, appreciate it !! I actually use a similar command but still not seeing the desired behaviour

[Gerard_Martinez_Cane]

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

[dataprofessor]

Great job in coming up with a working solution @Gerard_Martinez_Cane and great idea @sahirmaharaj

[POP]

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.