Add an og:image HTML meta tags
See original GitHub issueIf 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;
- Which image should we use?
- What should the
og:image:alt
be? - 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:
- Created 2 years ago
- Comments:38 (37 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
WOHOO!!
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.