yari: Twitter and OpenGraph cards not rendering for root URL and most pages
I was certain that the Twitter card was rendering correctly for pages on MDN, but it looks like the required <meta>
tags for the Twitter summary and OpenGraph cards don’t exist.

The following <meta>
tags should be added for the Twitter social share card to render correctly.
<meta name="twitter:card" content="summary_large_image"> <!-- or content="summary" -->
<meta name="twitter:site" content="@MozDevNet">
<meta name="twitter:title" content="MDN Web Docs">
<meta name="twitter:description" content="Some description text for the page">
<meta name="twitter:image" content="https://foobar.com/some-image.jpg">
<meta name="twitter:image:alt" content="Some alt text">
I couldn’t track down where exactly the document metadata inside the <head>
was being generated or manually typed, but if the <meta>
tags are being written in a template, we could define the metadata in YAML format or another data source to populate the content
of the required Twitter card meta tags. E.g. below is an example of defining the metadata as template variables and passing them into the required <meta>
tags.
---
twitter_card_type: summary_large_image
twitter_handle: MozDevNet
twitter_card_title: MDN Web Docs
twitter_card_desc: Some description text for the page
twitter_card_image: https://foobar.com/buzz.jpg
twitter_card_image_alt: Some alt text
or maybe from an object
data:
card_type: summary
twitter_handle: FooBar
and access in the template {{ data.card_type }}
---
<head>
<meta name="twitter:card" content="{{ twitter_card_type }}">
<meta name="twitter:site" content="@{{ twitter_handle }}">
<meta name="twitter:title" content="{{ twitter_card_title }} ">
<meta name="twitter:description" content="{{ twitter_card_desc }}">
<meta name="twitter:image" content="{{ twitter_card_image }}">
<meta name="twitter:image:alt" content="{{ twitter_card_image_alt }}">
</head>
This seems like a solid way to add support for the social share Twitter summary card. We could also add <meta>
tags for the OpenGraph protocol (Facebook card) which look like:
<meta name="og:title" content="MDN Web Docs">
<meta name="og:type" content="website">
<meta name="og:url" content="https://developer.mozilla.org/en-US/">
<meta name="og:description" content="Some description text for the page">
<meta name="og:image" content="https://foobar.com/some-image.jpg">
<meta name="og:image:alt" content="Some alt text">
These <meta>
tags could also have their content
populated through template variables or from another data source like mentioned for the Twitter card tags.
Thoughts
If the document metadata in the <head>
is being rendered elsewhere and injected into the page, maybe writing a function to generate the <meta>
tags needed for the Twitter summary code would be a start in that direction. Going further down this route, (my eleventy knowledge thinks “shortcode”) but creating a KS macro that accepts the 6 string arguments or a single object argument with all the nested key/value pairs to generate the <meta>
tags could be a good idea. That’s if the metadata is being generated server side.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 20 (16 by maintainers)
Commits related to this issue
- add Open Graph HTML metea tags Fixes #3590 — committed to mdn/yari by peterbe 3 years ago
- add Open Graph HTML metea tags (#3623) Fixes #3590 — committed to peterbe/yari by peterbe 3 years ago
On https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started under the heading “Twitter Cards and Open Graph” it says
So, let’s reinstate the Open Graph meta tags and see how Twitter handles that.
@Ryuno-Ki That’s a really neat tool. Could definitely be useful down the line to generate the social share image for each SPA page. The current setup in #3623 renders a social card from the Open Graph meta tags for each social site besides Twitter, which should work as the twitter validator falls back to the Open Graph tags as Peter mentioned above from the docs. But it doesn’t seem to be working as the docs say.
Dropping https://docs.htmlcsstoimage.com/ which is used by forem (dev.to) => new issue?
In the past, I’ve used a service where you just point to a URL and it generates (and caches!) the screenshots based on something like puppeteer. Perhaps if you can combine it with a CSS selector or something to make it without the header and sidebar it could be neat. But it’s bound to get very expensive at our scale.
Let’s park that discussion for another day. Let’s focus on Open Graph 😃
First of all, we don’t have images, which is a shame. I sometimes wish we could take a screenshot of the page (without the header and sidebar) and make that the image. But I think my point is that 362 worth of bytes to add to the HTML. On top of the OpenGraph ones. I’m not super worried about that but the summary string could be a lot larger and then you’ll end up including that 4 times.
<meta name="description">
So which websites can use and benefit from the OpenGraph tags?
By the way, I don’t mind adding these so much. But the proprietary bloat of bending to Twitters will is a bit annoying so I’m also not rushing to it 😃
Looking at view-source:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox (that is, Ctrl-U on https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox ) I can confirm, that the
<meta />
tags are not part of the initial HTML.