Hi all!
Is there a way to add a meta tag like <meta property="og:image" content="..." />
to Dash app?
Thanx.
Hi all!
Is there a way to add a meta tag like <meta property="og:image" content="..." />
to Dash app?
Thanx.
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
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.
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/
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.'
)
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: