Adding a Meta description to your streamlit app

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.

1 Like

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.

2 Likes

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.

4 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.

4 Likes

Iā€™m a bit confused on how this works. I created an HTML file with code above and it doesnā€™t works

Okay, I already made it clear. I copied the file from Docker shell, modify it, and this is what the index.html file should be. You can use the steps described in Dockerfile of @spartan8868

I also made an article on this! check this out!

1 Like

a native implementation of this in streamlit would be extremely useful. +1

3 Likes

hear, hear.

up

Hi All,

It seems that the title and description that appears in social preview and in Google search results require different implementation for tackling the issue.

Firstly, the meta title and description that is indexed in Google search results appears to be taken directly from the Streamlit app page. Particularly, the meta title is taken from the page title via st.title or st.header. As for the meta description, it is taken from the text appearing underneath the title text.

Secondly, the meta title shown in social preview is as specified by st.set_page_config(page_title="My App") while the description is taken from the GitHub repoā€™s README.md file (See Share previews - Streamlit Docs).

Hope this helps!

@dataprofessor

Itā€™s worth noting this solution ONLY works if your application is hosted on Streamlit Community Cloud. In my opinion thereā€™s no actual ā€œhack-lessā€ fix to deploy custom metadata to your own custom domain.

The only way Iā€™ve managed to deploy metadata is by a custom docker image, which is going to be risky to maintain!

I think this feature is one of very few holding Streamlit back from competing with the likes of Flask, Django and FastAPI

1 Like

Hi @chrissamharris

Thanks for the suggestion, and yes the suggested solution is for apps hosted on Community Cloud. Could you make a formal feature request here.

1 Like