search

plotly / graphing-library-docs

Plotly's graphing libraries documentation.
https://plotly.com/graphing-libraries
Other
52 stars 66 forks source link

Twitter meta tags #213

Open alexcjohnson opened 1 year ago

alexcjohnson commented 1 year ago

@LiamConnors not urgent, but every page we serve should get meta tags for Twitter, so a nice preview card shows up when a plotly link is included in a tweet. See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup, and see the meta tags in the <head> of the Plotly main site https://plotly.com for an example that we know @jingningzhang1 is happy with - and perhaps @msynko can help ensure we get the right contents.

jingningzhang1 commented 1 year ago

@alexcjohnson thank you for creating this issue! Yes, the purpose of this request is to prevent occurrences like below, where there is no image an a misc "A" as a meta description (https://plotly.com/javascript/) image

@alexcjohnson it looks like that particular link is now showing an image though, which is good! Did you recently change that? Twitter is definitely trickier than linkedin, so I would suggest taking a look at plotly.com to see how the meta tags are implemented. @msynko can help with that.

Dash docs is interesting because no image or description shows up at all. I would prefer that over a misc "A" though. image

While the code is being examined, I will ask @angeladaodao to create a meta image for both the dash docs and the graphing libraries so we can use those moving forward.

AnnMarieW commented 1 month ago

@LiamConnors Moving an issue here from the dash docs.

Meta tag titles look incorrect:

image

image

https://github.com/plotly/graphing-library-docs/blob/master/_includes/layouts/seo.html

I suspect that adding quotes around the meta tags may fix this. For example:

 <meta property="og:title" content={{title}}/>

should be:

 <meta property="og:title" content="{{title}}"/>

Maybe the description too? 

 <meta property="og:description" content="{{description}}"/>