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!
Is replacing index.html at deploy time the best way to handle this. Is it possible through component feature of streamlit.
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.
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.
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?
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.
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.
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.
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!
a native implementation of this in streamlit would be extremely useful. +1
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!
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
Thanks for the suggestion, and yes the suggested solution is for apps hosted on Community Cloud. Could you make a formal feature request here.