Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Twitter and OpenGraph cards not rendering for root URL and most pages

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Comments:20 (16 by maintainers)

Top GitHub Comments

2reactions

peterbecommented, Apr 23, 2021

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.

1reaction

tannerdolbycommented, Apr 25, 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.