Add an og:image HTML meta tags

[peterbe]

If we add a <meta property="og:image" content="...URL..."> the preview of an MDN URL will look better in places like Twitter.

The question is; 1) Which image should we use? 2) What should the og:image:alt be? 3) How can we include it in the build so it gets a nicely hashed name?

Originally posted by @peterbe in https://github.com/mdn/yari/issues/3623#issuecomment-831508111

[peterbe]

@schalkneethling (CC @tannerdolby ) do you have a suggestion for a good image to use for the Open Graph og:image HTML meta tag?

[peterbe]

@tannerdolby Do you know what size it ought to be? Does Open Graph or Twitter have any strong recommendations for a minimum?

[schalkneethling]

@schalkneethling (CC @tannerdolby ) do you have a suggestion for a good image to use for the Open Graph og:image HTML meta tag?

https://github.com/mdn/yari/pull/3623#issuecomment-831152587 - this one? It is sized correctly and optimized. Well, not the one embedded there, but I can send you the original PNG, optimized etc.

[peterbe]

I don't love it. Do you? My eyes immediately are drawn to the big Chrome logo in the background. The ribbon doesn't make sense in an image because you can't click on it. And will the text in the ribbon even be readable when displayed much smaller? And the text in the "footer" is going to minuscule when the image is displayed shrunk.

What about the logo.svg that we have already? https://developer.mozilla.org/static/media/logo.785be1ae.svg

[schalkneethling]

How about this one?

[tannerdolby]

@peterbe 600 x 315 (px) is the minimum "best practices" dimension for the image from the Twitter docs.

[schalkneethling]

@peterbe 600 x 315 (px) is the minimum "best practices" dimension from the Twitter docs.

I find that doing double that 1200 x 630 ensures it works across all sites and sites like Twitter will simply scale it down if need be.

[tannerdolby]

@schalkneethling I agree. That's probably the best way to ensure it works everywhere.

The twitter docs for Summary with large image mentions:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

[peterbe]

Let's do it! Can you send me that PNG @schalkneethling and I'll get it in.

[schalkneethling]

Let's do it! Can you send me that PNG @schalkneethling and I'll get it in.

sent via email.

[peterbe]

@tannerdolby Do you know if the URL always has to be absolute? I.e. starting with https://developer...

[tannerdolby]

@peterbe Yeah I think the URL for the og:image needs to be absolute just like the canonical URL og:url.

I've never tried using a relative path, but it might be ok. I can't find anywhere specifically in Open Graph or Twitter card docs that say a relative path "isn't allowed", I have yet to try using anything other than an absolute URL.

From OpenGraph docs:

• og:image - An image URL which should represent your object within the graph.
• og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/"

[tannerdolby]

Is there a process.env.URL or something similar that you could grab the absolute URL from? Or is the image asset not available currently from the absolute URL?

[peterbe]

Is there a process.env.URL or something similar that you could grab the absolute URL from? Or is the image asset not available currently from the absolute URL?

The build is done independently of where it will be served. It's Jamstack, man :) But what we could do is hardcode it because once it gets uploaded once to developer.mozilla.org it'll more or less always be there. And that's the only URL where it matters. But if we can use a relative URL, it would be nice to be able to test stuff like this on the stage domain.

[tannerdolby]

The build is done independently of where it will be served. It's Jamstack, man :)

Ah, yes that makes sense :) I think I'm just use to Netlify providing process.env.URL along with some other environment variables, it was the first thing I reached for.

Yeah, hardcoding the URL would probably be the least fuss. I will pull into this branch and check things out locally, how did you kickoff a complete build to the dev server for a feature branch like you did here? We could then test stuff using a relative URL with the card validators before using the hardcoded URL.

[schalkneethling]

I have also never used it any other way than with an absolute URL. Twitter is not as specific as the OpenGraph docs and just says URL: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

But I guess they mean the same thing.

[peterbe]

I'd rather first try it this way. It ought to work. Twitter has many engineers so it shouldn't be hard for them to write some code that combines the og:image URL with the base of the site where it comes from.

[tannerdolby]

I'd rather first try it this way. It ought to work.

@peterbe Yeah, agreed.

[tannerdolby]

I tried using a relative path for the og:image in my 11ty site hosted with Netlify and it doesn't work for rendering the image. The summary card itself loads successfully just without the image. Maybe there is a way of using relative paths but from what I tested it doesn't seem likely.

[peterbe]

What if you test with that page on the real Twitter?

[tannerdolby]

I didn't try that, let me see

[tannerdolby]

Card renders but is missing the image on Twitter.

[peterbe]

Alright. I'll force it to be https://developer.mozilla.org

[tannerdolby]

Ok sounds good.

[peterbe]

So, in the next 24h, roughly, we'll be able to test prod on Twitter to see if it works now that we have all the Open Graph tags, including og:image. If Twitter cards look nice, great, but I suspect the next action is to add the <meta name="twitter:card" content="summary_large_image"> for it to really look good.

[peterbe]

Not that I read it but I skimmed https://flayyer.com/blog/posts/github-cards and it looks cute. If we really wanted to, I think https://flayyer.com/pricing is very reasonable.

[peterbe]

@tannerdolby It's clearly still not "working" on https://cards-dev.twitter.com/validator but I don't even know how to test this on Twitter. I don't know how to preview a tweet with a URL in it. Or to preview a tweet with or without a URL. Do you literally have to post the tweet and then delete it?

Either way, I don't think it'll be hard to inject the twitter:card meta tag next.

[tannerdolby]

Do you literally have to post the tweet and then delete it?

@peterbe That is one way to test if the Twitter validator is rendering the card and displaying it in the tweet, like mentioned in number 1 below.

Yeah I just had a look and its clearly still not rendering a summary card on https://cards-dev.twitter.com/validator. To my understanding there are three ways to test if a summary card is rendering for Twitter or Open Graph:

1. Paste the URL into a tweet and see if it populates a summary card in the tweet preview, or use https://cards-dev.twitter.com/validator and make sure the card is being rendered and displays correctly.

2. Use the Facebook open graph validator or https://www.opengraph.xyz/

[tannerdolby]

Either way, I don't think it'll be hard to inject the twitter:card meta tag next.

@peterbe Agreed. Once a <meta name="twitter:card" content="summary_large_image"> is added, everything should render as expected.

[peterbe]

1. Paste the URL into a tweet and see if it populates a summary card

But you press the "Tweet" button to actually send it out? I thought it would start to display the preview as you're in the middle of typing it. Not sure if that's a valid test.

[tannerdolby]

I thought it would start to display the preview as you're in the middle of typing it.

It should start to display the preview once the URL is fully typed or pasted in as a full address. I'm not sure how Twitter handles auto completing a URL like https://goo -> https://google.com if thats what you mean by "in the middle of typing it". It should only render the preview once a full URL is manually typed or pasted into the tweet preview area.

Before pressing the "Tweet" button to actually send it out, if the URL has a valid Twitter summary card it will display in the tweet preview area (before) you click the "Tweet" button and sent it. It happens 100% of the time that a URL has a valid rendered summary card.

For a MDN URL without the <meta name="twitter:card"> tag so it won't render in Tweet preview:

For a URL with a rendered twitter card confirmed with the validator. This is what I've been referring to as the tweet preview, e.g. before sending it out with "Tweet".

[tannerdolby]

The way I look at it is, the https://cards-dev.twitter.com/validator is running in the background when a URL is pasted into a tweet (before sending it) and will render the card preview in the tweet as a nice reminder of what it will look like before you actually do "Tweet" it out. So in the "Tweet Preview" area (before sending) it should display the summary card and after tweeting it out the card should be displayed, not entirely valid tests but tests nonetheless.

[tannerdolby]

The image meta tag is on the page from your PR which is good news,

<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.2f09512a.png">

so once the twitter:card tag is injected everything will look nicely.

[peterbe]

so once the twitter:site tag is injected everything will look nicely.

Uh? Do we add that or <meta name="twitter:card" content="summary_large_image" /> or both?

[tannerdolby]

@peterbe That was a typo on my end, meant to say twitter:card. All we need to add is the <meta name="twitter:card" content="summary_large_image"> for Twitter to fallback to the Open Graph tags and render a card.

[peterbe]

WOHOO!!

[Ryuno-Ki]

I don't even know how to test this

FWIW I'm using https://addons.mozilla.org/en-GB/firefox/addon/openlink-structured-data-sniff/ to check whether parsing works at least.

[tannerdolby]

Woohoo! It looks great @peterbe