How to add Meta Tags for your Streamlit project

Salman Chen
4 min readJan 23, 2023

--

Image by Angèle Kamp on Unsplash

Meta tags are an important aspect of SEO (Search Engine Optimization) for any website or web application. They provide information about the page to search engines and other crawlers, helping them understand the content of the page and how to index it.

In addition to helping search engines understand the content of a page, meta tags can also provide other benefits such as:

  • Improving click-through rates (CTR) from search engine results pages (SERPs) by providing a compelling and accurate page title and meta description.
  • Allowing social media platforms to properly display a page’s content when shared, by using meta tags such as og:title, og:description, and og:image.
  • Providing information to analytics tools, such as the Google Analytics tracking code, which can be added to the head of the document via a meta tag.

However, the popular Python web framework Streamlit doesn’t currently have built-in support for creating meta tags. When creating a personal project using Streamlit, it’s important to consider the potential audience for the project and how to make it easily discoverable and readable by a wide range of audiences. One way to do this is by using meta tags to optimize the project for search engines and other web crawlers.

Fortunately, I found a simple hack that allows you to add meta tags to your Streamlit app.

Docker to Containerize your Project

First, I will state that this solution came in containerized environment. Docker is a powerful tool that can provide a number of advantages when working with a Streamlit project. Some of the key benefits of using Docker with Streamlit include:

  • Consistency: Docker allows you to create a consistent environment for your project, which can help ensure that your code runs the same way on different machines. This can be especially useful for Streamlit projects, which may have complex dependencies that can be difficult to manage.
  • Portability: Docker containers can be easily moved between different environments, such as between a development and production environment. This allows you to quickly and easily deploy your Streamlit project to different environments without having to worry about managing dependencies or configuring different systems.
  • Scalability: Docker makes it easy to scale your Streamlit project horizontally by adding more containers to handle increased traffic. This can be done in a few simple commands, making it easy to handle high traffic and keep your app running smoothly.
  • Isolation: Docker containers provide isolation between different parts of your application, which can help prevent conflicts and improve security. This can be especially important for Streamlit projects, which may have multiple components that need to be isolated from each other.
  • Version Control: Docker images can be versioned and stored in a registry. This allows you to keep track of different versions of your project and roll back to a previous version if needed. This can be helpful when working with multiple collaborators on the same project, or when deploying the project to different environments.

Overall, Docker can make it easier to develop, test, and deploy Streamlit projects by providing a consistent, portable, and scalable environment, while also providing isolation and version control.

First Step

First, you can run your program without Meta Tags. Such as my project as an example, in which I utilized Streamlit in Docker container, and deployed in Render.com

https://github.com/salmanhiro/THR-Quantum-RNG

Have a look in the initial Dockerfile, it should be like

FROM python:3.8-slim-buster

RUN apt-get update -y
RUN apt install libgl1-mesa-glx wget libglib2.0-0 -y

COPY requirements.txt .
RUN pip install -r requirements.txt


COPY . .

WORKDIR .

EXPOSE 8501


ENTRYPOINT [ "streamlit", "run" ]
CMD [ "app.py", "--server.headless", "true", "--server.fileWatcherType", "none", "--browser.gatherUsageStats", "false"]

Run it and make sure it runs smoothly. Remember, you are still without meta tags in this step.

How to access the Streamlit’s index.html

From docker shell (you can Google how to use it), navigate to

 `/usr/local/lib/python3.8/site-packages/streamlit/static/

and you will find a index.html file. You can copy it and create a new index.html in your project directory.

Next, you have to modify the <title> section of the HTML file. Use https://metatags.io/ to generate your desired meta tags, and replace the <title>Streamlit</title> block with your generated meta tags. The final index.html should be like this (with appropriate title and description). A bit long, you can directly navigate to the Gist.

A bit long.

Next, you need to update the Dockerfile with additional line to update the index.html

FROM python:3.8-slim-buster

RUN apt-get update -y
RUN apt install libgl1-mesa-glx wget libglib2.0-0 -y

COPY requirements.txt .
RUN pip install -r requirements.txt


COPY . .
COPY index.html /usr/local/lib/python3.8/site-packages/streamlit/static/index.html


WORKDIR .

EXPOSE 8501


ENTRYPOINT [ "streamlit", "run" ]
CMD [ "app.py", "--server.headless", "true", "--server.fileWatcherType", "none", "--browser.gatherUsageStats", "false"]

That’s all. Build and run the Docker with

docker build -t myapp && docker run myapp

Check whether the apps run smoothly. If it works, it is ready to deploy and shared. This is how the preview works on LinkedIn

Great! now your Streamlit apps should be better to publish.

References

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Salman Chen
Salman Chen

Written by Salman Chen

Astro grad student at NTHU — interested in astrophysics and neuroscience, love chocolate and cookies

Responses (2)

Write a response