Adding meta tag for Facebook sharing

Dash Python
1

Hi all!

Is there a way to add a meta tag like <meta property="og:image" content="..." /> to Dash app?

Thanx.

2

There’s no way to do this through Dash’s API. I would solve this by subclassing the Dash class and overriding the index method. Here’s an example of that that to add local CSS files you could adapt: https://github.com/ned2/slapdash/blob/master/slapdash/custom_dash.py

1 Like
3

In case anybody is directed here via Google like me - as explained in the documentation (see " Customizing Meta Tags" on https://dash.plot.ly/external-resources), meta tags can now simply be passed as a dictionary when you create the app.

2 Likes
4

To add to this answer- I was still struggling with what exactly to write in meta tags to work for the images found on preview cards for social media etc. To emphasize, I believe you need a title, a description, and an image, for those cards to function.

I found this formatting to work:

app = Dash(__name__, external_stylesheets=[dbc.themes.FLATLY],
                meta_tags=[{'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0'}, # I had this tag previously
                {'name': 'description', 'content': 'This is my app description.'},
                {'property': 'og:image', 'content': 'https://raw.githubusercontent.com/rest/of/github/link/to/my/image.png'},
                ])

app.title = "Title" # Here I include my title separately

I also found that pasting my link into this forum was a good way to test the meta info, as well as using this convenient site here (I hope I’m allowed to link to outside sites): https://metatags.io/

5

Thank you for sharing this @Tipshishat

Another solution is now available with Dash Pages. When building the app, all you need to do is define the title, image, description:

import dash
from dash import html, dcc


dash.register_page(
	__name__,
    title='Explore the archive',
    image='archive_image_2022.png',
    description='The archive page shows previously generated reports.'
)
6

I’m struggling to get the Dash Pages method to work in my home.py. The og meta tags work in all other pages except on the "/" path where home.py is pointed. My about page etc. do work though. Any insight here would be appreciated.

home.py not working:

dash.register_page(
    __name__,
    name='Custom Name',
    path='/',
    title='Custom Title',
    image='app.jpg',
    description='Custom Page Description',
)

about.py is working:

dash.register_page(
    __name__,
    name='About',
    path='/about',
    title='About',
    image='app.jpg',
    description='Custom Page Description',
)

Resulting cards on social media:

image
image754×393 35.3 KB