How to add Meta Tags for your Streamlit project
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.
