Fixing SEO for Streamlit Apps!

In this short article, I describe how I added meta tags to my Consultancy Streamlit App in a way that won't break if there is a Streamlit update ✨

Sep 28, 2024

I am building my Career Consultancy website using the Streamlit framework, a popular framework that allows you to create an interactive web app in pure Python.

🕷 The Problem

As I got closer to release my website, I deployed the containerized web app to a staging instance in the Azure Cloud, I realized that every time I shared a link to my website, it would look something like this:

A screenshot of a shared link to Damian Capdevila´s website staging instance — Sharing my website app via WhatsApp looked horrible!

🔎 Why does it happen?

Streamlit does not support adding meta tags natively to a custom deployment!

This is necessary so that the title, picture and description of the website appears when shared via Social Media or messaging apps like WhatsApp.

👨🏻‍🔬 The Research

After searching online, and thanks to Salman Chen for writing this article, it became evident that the best way of doing this was manually copying the index.html which comes inside the streamlit library, adding the meta tags, and overwriting the original one.

The article gave me an idea of how to solve the problem in this particular deployment, but the workaround had an issue:

What happens when I update the Streamlit library in a future deployment?
❌ Probably it will break if the structure of the index.html that the library expects is different than the one we overwrite it with.

😎 The Solution

To future-proof Salman Chen´s approach, and using the help of the Cursor IDE, I came up with a solution that programmatically would:

Locate the index.html file in the Streamlit package directory.
Create a backup of the original index.html file.
Read the content of the original index.html.
Use BeautifulSoup to parse the HTML content.
Create new meta tags with the specified content.
Add these new meta tags to the <head> section of the HTML.
Save the modified HTML, overwriting the original index.html.

✨These steps are achieved by the following script:

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	import os
	import shutil
	from bs4 import BeautifulSoup

	# Path to the Streamlit package directory
	streamlit_path = '/usr/local/lib/python3.9/site-packages/streamlit/static/index.html'

	# Create a backup of the original index.html
	shutil.copy2(streamlit_path, streamlit_path + '.bak')

	# Read the original index.html
	with open(streamlit_path, 'r') as file:
	html_content = file.read()

	# Parse the HTML
	soup = BeautifulSoup(html_content, 'html.parser')

	# Create new meta tags
	meta_tags = [
	# General SEO
	{'name': 'description', 'content': 'Damián Capdevila helps engineers unlock the freedom, flexibility, and high income of a software career. Expert guidance for your transition into software engineering.'},

	# Open Graph / Facebook
	{'property': 'og:type', 'content': 'website'},
	{'property': 'og:url', 'content': 'https://damiancapdevila.com'},
	{'property': 'og:title', 'content': 'Damián Capdevila - Software Engineer'},
	{'property': 'og:description', 'content': 'Unlock your potential in software engineering with expert guidance from Damián Capdevila.'},
	{'property': 'og:image', 'content': 'https://raw.githubusercontent.com/DamianCapdevila/damian-capdevila-personal-website-assets/main/Damian-sin%20fondo-gris.webp'},

	# Twitter
	{'name': 'twitter:card', 'content': 'summary_large_image'},
	{'name': 'twitter:url', 'content': 'https://damiancapdevila.com'},
	{'name': 'twitter:title', 'content': 'Damián Capdevila - Software Engineer'},
	{'name': 'twitter:description', 'content': 'Unlock your potential in software engineering with expert guidance from Damián Capdevila.'},
	{'name': 'twitter:image', 'content': 'https://raw.githubusercontent.com/DamianCapdevila/damian-capdevila-personal-website-assets/main/Damian-sin%20fondo-gris.webp'},

	# LinkedIn
	{'name': 'linkedin:title', 'content': 'Damián Capdevila - Software Engineer'},
	{'name': 'linkedin:description', 'content': 'Unlock your potential in software engineering with expert guidance from Damián Capdevila.'},
	{'name': 'linkedin:image', 'content': 'https://raw.githubusercontent.com/DamianCapdevila/damian-capdevila-personal-website-assets/main/Damian-sin%20fondo-gris.webp'},

	# Additional tags
	{'name': 'author', 'content': 'Damián Capdevila'},
	{'name': 'keywords', 'content': 'software engineering, career transition, engineering, consulting, mentorship'},
	]

	# Add new meta tags to the head
	for tag in meta_tags:
	new_tag = soup.new_tag('meta')
	for key, value in tag.items():
	new_tag[key] = value
	soup.head.append(new_tag)

	# Save the modified HTML
	with open(streamlit_path, 'w') as file:
	file.write(str(soup))

	print("Meta tags have been added to the Streamlit index.html file.")

view raw add_meta_tags.py hosted with ❤ by GitHub

🏃🏻‍♂️How do I run my Script?

Since my application is containerized, I use a Dockerfile. In the Dockerfile, I have written instructions to copy and run the script to insert the meta tags.

Show hidden characters

	# Use the official lightweight Python image.
	# https://hub.docker.com/_/python
	FROM python:3.9-slim

	# Set the working directory
	WORKDIR /app

	# Copy the requirements file into the container
	COPY requirements.txt .

	# Install the dependencies
	RUN pip install --no-cache-dir -r requirements.txt

	# Copy the add_meta_tags.py script
	COPY add_meta_tags.py .

	# Run the script to add meta tags
	RUN python add_meta_tags.py

	# Copy the rest of the application code into the container
	COPY . .

	# Expose the port Streamlit runs on
	EXPOSE 8501

	# Run the application
	CMD ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

view raw Dockerfile hosted with ❤ by GitHub

✅ The Results

Now, sharing the my website via Social Media or WhatsApp looks much better! 🎉

🤓 Also, doing this programmatically ensures that even if Streamlit is updated, it won’t break. since it always works on the basis of respecting Streamlit´s original index.html structure!

Sharing my website via WhatsApp looks much better now!

Note: the script will only break if Streamlit team decides to place their index.html in a different directory, since I am using this line to locate it:

# Path to the Streamlit package directory

streamlit_path = '/usr/local/lib/python3.9/site-packages/streamlit/static/index.html'

"Code & Gears: From Automation to Software Engineering"

Discussion about this post