How to have an image show up when sharing links to your site
By Flavio Copes
Learn how to make an image show up when your links are shared on social media by adding Open Graph meta tags like og:image, og:title and og:description.
To get an image (and a nice title and description) to show up when someone shares a link to your site, add Open Graph meta tags to the <head> of your pages. The one responsible for the image is og:image.
I was asked this question on Twitter:
How to get an image to show up when sharing a link to a website I made?
Here’s what happens behind the scenes. When you paste a link into Twitter, Facebook, LinkedIn, Slack or WhatsApp, their servers fetch the page and look for Open Graph tags (also called OG tags). If they find them, they build that card with the image, title and description. If they don’t, you get a plain, boring link.
What the tags look like
Take a look at this blog post: How to set GitHub credentials for macOS. On Chrome, right click in the page and press View Source. Or on Safari, from the Develop menu click Show Page Source (got to have the Develop menu activated in the settings).
You can find those tags in the <head> part of the HTML:
<meta property="og:title" content="How to set GitHub credentials for macOS">
<meta property="og:description" content="Set up GitHub authentication so you can use it from VS Code or the command line">
<meta property="og:type" content="article">
<meta property="og:url" content="https://flaviocopes.com/setup-github-credentials-macos/">
<meta property="og:image" content="https://flaviocopes.com/img/avatar.png"/>The important part for the image is the og:image tag, but all contribute to creating a way to make it easier for other software to show our site nicely.
A couple of rules for the image itself. The URL must be absolute, including the https:// part. A relative path like /img/avatar.png won’t work, because the social network’s server has no idea what site to resolve it against. And the recommended size is 1200×630 pixels, which renders well as a large card everywhere.
Twitter also reads its own tag to decide the card format. Add this to get the big image card instead of a small thumbnail:
<meta name="twitter:card" content="summary_large_image">To generate all these tags (with a live preview of how the shared link will look), try my free meta tags generator.
When the image doesn’t update
Here’s the pitfall everyone hits: you fix your tags, share the link again, and the old image (or no image) still shows up.
Social networks cache the scraped data. You have to ask them to fetch the page again. Facebook has a Sharing Debugger tool with a “Scrape Again” button that refreshes its cache.
For Twitter, any time you do any change, check the Twitter Card Validator website and paste the URL of the page. That will show a preview and will give you some hints of what to fix:
