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

Most upvoted comments

On https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started under the heading “Twitter Cards and Open Graph” it says

“When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.”

So, let’s reinstate the Open Graph meta tags and see how Twitter handles that.

peterbe on Apr 23, 2021

@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.

tannerdolby on Apr 25, 2021

Dropping https://docs.htmlcsstoimage.com/ which is used by forem (dev.to) => new issue?

Ryuno-Ki on Apr 25, 2021

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.

@peterbe We could but it’s a bit of setup. If we had a sort of social share image generator that happens at build time, maybe using puppeteer to load the page and take a screenshot of the document with certain dimensions (to not include header and sidebar)
page.screenshot({
  path: '/someDir/splat',
  type: 'jpeg',
  clip: { x: 0, y: 0, width: 800, height:  
});
and have the background be an image or some color that would handle generating the social share image and then the image output to some dir can be accessed via URL assets/generated-social.jpg

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 😃

peterbe on Apr 23, 2021

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.

The <meta name="description">
The Twitter one
the OpenGraph one
The summary within the HTML page itself

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 😃

peterbe on Apr 23, 2021

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.

Ryuno-Ki on Apr 22, 2021