Adding a Meta description to your streamlit app

If you search for a streamlit app on google you get following result.

Javascript

Something like …

st.set_page_config(meta = 'A little description of the app for a better SEO on google')

… would be great.

I know that you can already change the title in the header section and the favicon with:

st.set_page_config(
        page_title='Title of my App',
        page_icon="😍"                  
        )

…but the people searching for your app would benefit from this.

4 Likes

Something similar to @MaxMnemo’s solution would be very much appreciated.

This discussion is scattered around various parts of this forum as well as GitHub, though the conversation seems to always peter out – is there any update on adding this functionality?

When my app is searched on google (the primary way people find it), it simply says “Streamlit”, which is basically meaningless to the biologist audience that is trying to find it

2 Likes

Bumping this again in hopes for a solution.

I do not know HTML/CSS/Javascript basically at all (hence why Streamlit is so amazing!), so Im not sure how get google and other search engines to scrape metadata for my Streamlit app.

If no “official” Streamlit API method is included, can I simply do this myself? Do I add an index.html or robots.txt in the base folder? What would I include? Any guidance on solving this would be very much appreciated.

Yes we really need this feature. Tried to insert custom html via markdown doesn’t work. Even setting the title via st.set_page_config doesn’t seem to be crawled by Google and other robots.

Think I got it figured out.

Demo: App Link | Facebook Sharing Debugger

The default index.html and favicon.png are stored in /site-packages/streamlit/static/

Replace <title>Streamlit</title> with:

<title>TITLE</title>
<meta name="title" content="TITLE">
<meta name="description" content="DESCRIPTION">
<meta property="og:type" content="website">
<meta property="og:url" content="URL">
<meta property="og:title" content="TITLE">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="IMAGEURL>
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="URL">
<meta property="twitter:title" content="TITLE">
<meta property="twitter:description" content="DESCRIPTION">
<meta property="twitter:image" content="IMAGEURL">

I am using docker to deploy it to GCP cloud run. If you are doing something similar, make sure your Dockerfile has the following lines to replace index.html while building the container:

FROM python:3.10
EXPOSE 8080

COPY requirements.txt requirements.txt
RUN pip install -U pip
RUN pip install --no-cache-dir -r requirements.txt

# Most Important Line 
COPY index.html /usr/local/lib/python3.10/site-packages/streamlit/static/index.html
# Most Important Line 

COPY app.py app.py
COPY Images Images
COPY Text Text
COPY .streamlit .streamlit

WORKDIR .

ENTRYPOINT [ "streamlit", "run", "app.py", "--server.port=8080", "--server.address=0.0.0.0"]

Hope this helps!

4 Likes

Is replacing index.html at deploy time the best way to handle this. Is it possible through component feature of streamlit.

1 Like

I can confirm that the method from @spartan8868 works to update the default /site-packages/streamlit/static/index.html file. I used it to implement Google Analytics tracking on my Streamlit app, as I found that this conversation didn’t give me a functional method.

2 Likes

Hi @Greg, everyone,

To test the method proposed by @spartan8868 , I went to /site-packages/streamlit/static/ and changed the <title> in the index.html file and also favicon.png, but even after rebooting the app it still shows the default Streamlit title and favicon.

Did you encounter a similar issue, or do you know what might be happening (for example, are index.html and favicon.png “cached” somewhere)?

Thanks in advance.

1 Like

Just to reinforce the obvious, modifying the index.html file in the package is, basically, a horrible idea, and we really need a safe way to inject trusted scripts into headers and footers. Where is this on the roadmap?

2 Likes

Agreed.

Not sure if this is even possible, but maybe an MVP solution could be: A small file we drop into the .streamlit folder of the app’s folder (as we already do with config.toml file), that is read and contents (, meta tags) appended to the of the index.html - instead of manually modifying the index.html in the package.

If that works, maybe something similar could be done with the default favicon.png.

2 Likes

Why is this horrible if it works?

If you ever update the package again you have to make sure you don’t overwrite the modifications you made.

Ah, that makes sense. Thanks.

Lack of this also prevents sharing the app with a preview in social media.
Surely this is a very needed feature for a long time.

3 Likes