Adding a Meta description to your streamlit app

šŸ§© Streamlit Components
1

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
2

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
3

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.

4

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
5

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
6

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

1 Like
7

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
8

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
9

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
10

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.

3 Likes
11

Why is this horrible if it works?

12

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

13

Ah, that makes sense. Thanks.

14

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
15

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

16

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

17

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

1 Like
18

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

2 Likes
19

hear, hear.