Open Graph tags and og:image: how to set them up

Craig AddymanUpdated 4 November 20266 min read

What Open Graph tags do

When someone pastes a link, the app fetches the page and reads its og: tags to build a card. Without them, it has to guess, and you may get the wrong image or no card at all.

They're for sharing, not search rankings, but they decide how your page looks wherever it's passed around. The property attribute is part of the format, so use it rather than name.

The tags you need

The Open Graph protocol requires four: og:title, og:type, og:image and og:url. A description and image details are optional but worth adding.

Copy<meta property="og:title" content="Blue widgets for small workshops">
<meta property="og:description" content="Sizes, prices and delivery for our blue widget range.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/widgets/blue">
<meta property="og:image" content="https://example.com/images/blue-widgets.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A row of blue widgets on a workbench">
<meta name="twitter:card" content="summary_large_image">

• og:url should be the page's canonical URL.
• og:image:width and og:image:height let Facebook show the image before it's been downloaded.
• twitter:card sets the X card layout. summary_large_image gives the large image version.

The right og:image

Meta's sharing guidance is a good default for other apps too:

Keep important text away from the edges, as some apps crop the image or show it small.

How to check them

Copycurl -s https://example.com/page | grep -iE 'property="og:|name="twitter:'

Copy// Lists the social tags on the rendered page
document.querySelectorAll('meta[property^="og:" i], meta[name^="twitter:" i]')
  .forEach((tag) => console.log(tag.getAttribute('property') || tag.name, '=', tag.content));

Why the preview is wrong

• The old preview is cached. Facebook caches images by URL. Give a new image a new URL, keep the old one in place, then scrape again. Existing shares keep the old preview until they're refreshed.
• The tags are added by JavaScript. Move them to the server HTML.
• The image URL is relative. Use the full https:// address.
• The image can't be fetched. It may return an error, sit behind a login, or be blocked by robots.txt or bot protection.
• The tags are outside the head. A stray element can end the head early.
• There are two sets of tags. A theme and a plugin may each add their own.

On Shopify, WordPress and Next.js

• Shopify: set the homepage's social sharing image under Online Store > Preferences. Other pages usually depend on the theme, so check its head code.
• WordPress: core doesn't add Open Graph tags, so they usually come from an SEO plugin. If you see duplicates, check the theme as well.
• Next.js: set openGraph in the metadata, or add an opengraph-image file. Image URLs must be absolute, so set metadataBase. Nested fields set on a page replace the whole openGraph object from its layout. Next.js serves metadata in the head to bots that can't run JavaScript.

How crawlers report this

Screaming Frog has a Social section for these. Sitebulb's public hints library doesn't list an equivalent.