Streamlit - Implementing real world SEO

[chrissamharris]

Hello, I appreciate this topic has been touched on before, but I dont believe the answer has ever been given firmly nor has there been a thorough fix…
How do we implement real world SEO using Streamlit, without breaking the application?

I’ve followed numerous threads online alongside the guides in: SEO and search indexability - Streamlit Docs. However, this doesn’t seem to properly address the issue.

The meta-data doesn’t get picked up correctly with the page title defaulting to “Streamlit” in the preview with no further metadata included (despite following the above index-ability procedures - Examples below).

What is a solid fix for addressing meta-data within a Streamlit application? I feel this is a huge gap for Streamlit at the moment and is currently causing issues for startups wanting to use the tool in prod (which is otherwise awesome by the way).

For reference, my app is deployed through Heroku and can be seen: https://www.paperround.io

The code for the meta-data (as steered by Streamlit documentation) is as follows - situated at the top of Home.py:

import streamlit as st

st.set_page_config(page_title="PaperRound: AI News Curator & Smart News Digest", layout="wide", initial_sidebar_state="auto", page_icon="🗞️")
st.header(f"🗞️PaperRound", divider="rainbow")
st.text("""PaperRound.io: The Leading AI News Curator. \n\n\
Dive deep with us into the heart of global news.\n\
Leveraging advanced AI, we analyse and \n\
summarise the articles that define our world  \n\
each day. \n\n\
Concise. Comprehensive. Smart. \n\
Experience news redefined, with PaperRound.io. \n""")

Versions, as per request:
Streamlit==1.27.2
Python==Python 3.11.6

Metadata that shows to the world:

&&

Thanks in advance for any responses and help!
ChrisSamHarris

[Dusan_P]

Hi @chrissamharris,

Sorry for comment not related to the thread, but just wanted to say that your app looks really nice and love the idea behind it.

Line divider with diff colors looks nice. Did you used some kind of css style for it?

And one suggestion for Streamlit community:
It would be great for such kind of app to have Recycler Views. Where you don’t need to touch code in order to produce the list of items. This can be mitigated, dynamically adding them based on the number of items you have in the certain list. But the great thing about “RecyclerView” is that not all so called “items” in it (or data from your list) is showed at once, but as you scroll through it they are rendered.

Best regards,
DusanP

[marduk]

Hi there @chrissamharris !

Although this is not an official solution, a workaround is to modify the streamlit/static/index.html in the Streamlit installation folder, and manually add the metadata in there.

If you are using Docker to deploy your app, in a Dockerfile you can add instructions to download the Streamlit version (e.g., with pip), and then replace streamlit/static/index.html with an index.html file of your own.

This approach allows “deep” customization of Streamlit static files (also the default favicon, CSS, minified JS files, etc.), but it is not supported at all. In practice, this means that if you use custom Streamlit static files, there is no guarantee they will work for different Streamlit versions.

Hope this helps!

[chrissamharris]

Thank you for the response Marduk, can I ask if there’s any other solutions that don’t revolve around docker?

Only asking because I’ve deployed via Heroku for further context so I don’t necessarily deploys containerised application, I deploy it raw via (this is my preferred choice because of the cicd process alongside Heroku for the automatic data-update side of the application)

Trying my best to minimise a complete re-architecture of the application!

Thanks again!

[chrissamharris]

Thanks for the feedback Dusan! I hope you’re a regular visitor! The sites automatically updated 04.30GMT everyday - as users ramp up the frequency of updates will aswell

[dataprofessor]

HI @chrissamharris

There are additional instructions on structuring the app so that the App title can be picked up for the Metadata from this Docs page:

Share previews - Streamlit Docs

Additional methods that you can try instead of st.header is st.title

As for the Description text, you can try adding a descriptive text near the top of the README.md file of your app’s GitHub repo as well as near the in-app title (using st.write underneath the st.title line).

Hope this helps

[chrissamharris]

Hi DataProfessor,

First off I would like to say I love your videos, I’m going to give these methods a try over the coming weekend and get back to you on any improvements!

Managed to miss this share indexability feature page (I’ve just been focusing on the SEO docs),will also try to update the description at the top of the README in an attempt to get everything picked up!

Thanks again and I will let you know of any improvements once I implement the change…

All the best

[chrissamharris]

Hello again, I’ve implemented the changes as per your guidance and the “Share Preview” however, there’s been no improvement with either the share capability preview nor the google search function… I wonder if its to do with Heroku deployments but couldn’t be 100%…

I don’t suppose there are any other potential options, I was thinking of potentially injecting metadata into the through a python function if that is viable?

[chrissamharris]

Bumping this again in hopes that there is a solution available - Possibility of perhaps injecting the metadata? Similar to injecting google analytics as seen here:

Google Analytics and Streamlit

Hi @Renata_Cavalcanti, Thanks for posting! Have you checked out the following resources? How to add Google Analytics or JS code in a Streamlit app? How to add Google Analytics to a Streamlit Application I would also recommend checking out Streamlit Analytics. Caroline

[dataprofessor]

Hi,

I am afraid there is no other official way of approaching this other than deploy on Community Cloud or to file a feature request (Issues · streamlit/streamlit · GitHub) or the hacky approach that @marduk suggested via a Docker deployment.