question-mark
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.

Add an og:image HTML meta tags

See original GitHub issue

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_

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:38 (37 by maintainers)

github_iconTop GitHub Comments

3reactions
peterbecommented, May 13, 2021

WOHOO!! Screen Shot 2021-05-13 at 7 05 26 AM

2reactions
peterbecommented, May 10, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML meta tags cheatsheet - Devhints
The one-page guide to HTML meta tags: usage, examples, links, snippets, and more.
Read more >
The Essential Meta Tags for Social Media - CSS-Tricks
A URL to a unique image representing the content of the page. You should not use a generic image such as your website...
Read more >
Fixing the Preview Image, Title and Description for Shared Links
To modify a page's preview image, description, and additional metadata for these services, you can provide meta tags in the HTML code of...
Read more >
How to Add Metadata to Images and Video
Open up the folder on your computer that contains the image or video file. · PC users: Right-click on the image, and select...
Read more >
How to add an image to an event with Microdata meta tag?
Instead of using the meta element, you must use the link element (because the value is a URI): <link itemprop="image" href="image.jpg" />.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found