Making Plotly's Dash SEO-friendly
A set of tools to make Dash apps SEO-friendly.
Dash is renderd as a single page app, as a set of React components. The HTML representation is not available like a traditional page, and app content an be difficult to read by search engines.
The solution is to convert the app's HTML components in the layout
attribute to an HTML string, and include it in the app's source.
dcc
components (charts, dropdowns, date pickers, etc.) saving on performance because these components can be heavy without much content, especially charts.$ pip install dashseo
from dashseo import htmlify
from dash import Dash, html
app = Dash()
app.layout = html.Div([
html.H1("Hello, world!")
])
# You only need to add this:
htmlify(app)
app.run()
The div
containing "Loading..." get an additional div, which is the full HTML of the app's layout
. For the above app, it ends up like this:
<div id="react-entry-point">
<div class="_dash-loading">
Loading...
</div>
<div>
<h1>hello, world</h1>
</div>
</div>
The current solution works only for simple apps (not using pages).