Adding a Meta description to your streamlit app

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

6 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

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

1 Like
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!

5 Likes
6

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

2 Likes
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.

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

3 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?

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

5 Likes
11

Why is this horrible if it works?

1 Like
12

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

1 Like
13

Ah, that makes sense. Thanks.

1 Like
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.

5 Likes
15

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

1 Like
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

5 Likes
19

hear, hear.

1 Like
20

up

1 Like