Open Graph tags: the 4 you need and og:image rules (+ snippet)

Short answer: Open Graph tags are meta tags in the head of a page that tell social networks and messengers which title, description and image to show when someone shares a link. The protocol requires four of them (og:title, og:type, og:image and og:url), and og:description is worth adding. Use an image of at least 1200 × 630 pixels and under 8 MB, give its full https address, and put every tag into the HTML your server delivers, not into JavaScript that runs later. An effect on rankings is not proven: the tags control how a shared link looks.

What are Open Graph tags?

Open Graph is a protocol that lets a web page describe itself as an object: with a title, a type, a picture and an address. According to ogp.me, the protocol was originally created at Facebook. You use it by adding meta tags to the head of the page. When someone pastes your link into a post or a chat, the platform fetches the page, reads these tags and builds the preview card from them. Without them, the platform has to guess which title, description and image to use.

The protocol names four required properties for every page, plus one that is optional but generally recommended:

The value of og:type matters beyond the label. According to ogp.me, the type you pick can bring further properties with it. For article, the protocol lists fields such as article:published_time and article:modified_time. Other optional tags are og:site_name (the name of the whole site) and og:locale (the language of the tags, default en_US).

The minimum HTML for Open Graph tags

This is a complete set that you can adapt. (The example on ogp.me also sets a prefix attribute on the html element; the big platforms read the tags without it.) It goes inside the head element, next to your normal title tag:

<head>
  <title>Open Graph Tags: How to Set og:image</title>
  <meta property="og:title" content="Open Graph Tags: How to Set og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A link preview card with image, title and description">
  <meta property="og:description" content="The four required Open Graph tags, the image size rules and how to test a link preview.">
  <meta property="og:site_name" content="Example">
</head>

A few notes on the details:

• og:url is a permanent ID. ogp.me defines it as the canonical URL of the object. Use the same address as in your canonical link, without tracking parameters.
• Write the image address in full. Every example at ogp.me uses a full address. A relative path such as /images/card.png depends on how each crawler resolves it, so do not rely on that.
• Width and height help. Facebook's documentation says that these two tags let its crawler render the image immediately, without having to download and process it first.
• Add og:image:alt. ogp.me says that a page which specifies an image should also specify a description of what is in it (a description, not a caption).

og:image rules: size, file and address

Facebook publishes the clearest numbers, on its page about images in link shares. They are the reference for the rest of this section:

• The minimum allowed size is 200 × 200 pixels.
• The file must not exceed 8 MB.
• For the best display on high-resolution devices, use at least 1200 × 630 pixels.
• At the very least, use 600 × 315 pixels to get link posts with a large image. Smaller images still show, but much smaller.
• Keep the aspect ratio as close to 1.91 : 1 as possible, so the full image appears without cropping. 1200 × 630 comes to about 1.905 : 1, which is why that size is the usual choice.
• The crawler accepts only gzip and deflate encodings, so check that your server or CDN answers with one of them.

These are Facebook's rules. Other apps and messengers read the same tags, but this article does not document their limits, so test in the places that matter to you. For reference, the blog pages of SEOgrinder use a preview image of 1200 × 630 pixels.

Two more conditions are about access, not size. The image must be public: no login in front of it, and no robots.txt rule that blocks the folder it lives in. If a crawler cannot fetch the file, the preview has no picture, however good the file is.

Give every page its own Open Graph tags

Because og:url is the permanent ID of an object, it has to be different on every page. The same goes for the rest:

• og:title should name what this page is about, not the whole site.
• og:description should summarise this page in a sentence or two.
• og:image should show something that fits the page. Keep one default image for pages that have none of their own.
• og:type can differ too: website for a home page, article for a blog post or news item.

Whatever your stack, generate the tags from the data of each page instead of typing them by hand. A small Node example:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

The esc function matters: a title with a quotation mark would otherwise end the attribute early and break the tag. If you use a CMS, look for the field that sets the share image per page. The result you check stays the same: the tags in the delivered HTML.

Open Graph tags must be in the delivered HTML

Many modern sites send an almost empty HTML shell and let JavaScript build the page in the browser. Google can handle that: according to its JavaScript documentation, Search renders pages with an evergreen version of Chromium. The same page also says that server-side rendering or pre-rendering is still a good idea, because not all bots can run JavaScript.

For AI crawlers there is a measurement: in December 2024, Vercel and MERJ found that none of the major AI crawlers they looked at executed JavaScript. That is a 2024 snapshot and has not been confirmed again since. For link previews, the safe rule follows from the same logic: if your tags only appear after a script has run, a crawler that does not run scripts never sees them. SEOgrinder reports such pages as "The page is only assembled in the browser", with the note that many AI crawlers run no JavaScript and see an almost empty page.

You can test this in ten seconds:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

If the tags come back, they are in the HTML as delivered. If nothing comes back, but the tags show up in the browser's developer tools, a script adds them too late. Use "View page source" in the browser for the same test; it shows the delivered HTML, not the live page the developer tools show. The fix is to render on the server or generate the pages ahead of time, so that title, text and tags are in the first response.

How to test your link preview

Facebook's Sharing Debugger shows which tags the crawler read and any errors. It asks for a Facebook login. According to Facebook's image documentation, running a URL through it also pre-fetches the metadata, which matters because of caching:

• Facebook caches every image by its address. If you replace an image, use a new URL for the new one, or the old picture stays.
• Do not delete the old image, since existing posts may still point to it.
• Changing the image for a URL does not update the preview of old shares. Those have to be refreshed.
• The crawler has to see an image at least once before it can render it. Without pre-fetching, the first person who shares a link may not see the image.

Before you publish, run through this list:

1. Fetch the page with curl and confirm that the five tags are in the first response.
2. Open the image address on its own. It must load without a login, with status 200.
3. Check the size: at least 1200 × 630 pixels, under 8 MB.
4. Run the page through the Sharing Debugger and read the errors and warnings.
5. Repeat for one page of each type: the home page, a post, a product.

How SEOgrinder checks Open Graph tags

Enter the address of a public page in SEOgrinder and the report includes a social preview, which shows how the page looks when it is shared. The tool reads your tags and loads the image, then reports what it finds. It needs no account and costs nothing. These are the findings that matter here:

• Share preview incomplete lists which of image, title and description are missing.
• Preview image does not load appears when the image answers with an error status. The finding names that status and points to the usual causes: a wrong address, a login in front of the file, or a robots.txt block. According to the finding, links then appear on LinkedIn, WhatsApp and X without a picture.
• Preview image is very small appears below 600 × 315 pixels (Facebook then shows only a small thumbnail) and flags images below the 200 × 200 minimum separately.
• The page is only assembled in the browser is the finding for pages that build their interface in the browser.

SEOgrinder cannot show you how every network draws the card. It checks the tags and the file, which is the part you control. For the final look, use the debugger.

Common mistakes

• A relative image path. Use the full address with https://.
• An image that cannot be fetched. A login, a firewall rule or a robots.txt line on the image folder leaves the preview without a picture.
• An image that is too small. Below 600 × 315 pixels it is shown small; below 200 × 200 it may not show at all.
• No description. og:description is optional in the protocol, but without it the platform guesses.
• The same tags on every page. Every post then looks like the home page when shared, and og:url no longer identifies anything.
• Replacing the image under the same address. Facebook caches by URL, so publish the new file under a new name.
• Tags that only exist after JavaScript runs. Put them into the delivered HTML.
• Unescaped quotation marks in values. They end the attribute and cut the tag off.
• A tracking address in og:url. The tag should hold the canonical address.

FAQ

Are Open Graph tags a ranking factor?

There is no evidence that they are. Open Graph controls how a shared link looks on social networks and in messengers. Nothing in the sources used here ties it to rankings.

Which og:image size should I use?

1200 × 630 pixels, at an aspect ratio close to 1.91 : 1 and under 8 MB. That meets Facebook's recommendation and is the size of the preview image on SEOgrinder's blog pages.

Do I need og:description?

The protocol lists it as optional and generally recommended. Without it, the platform has to guess a description from your page, so write one.

Why does my old image still show?

Facebook caches images by address. Publish the new image under a new URL, then run the page through the Sharing Debugger. Old shares are not updated automatically.

What about twitter:card?

That tag is not part of the Open Graph protocol. SEOgrinder's fix hint for an incomplete preview also suggests setting twitter:card to summary_large_image. This article does not cover the rules of X, so check them in X's own documentation.

Can a coding agent add the tags for me?

It can do the mechanical part: write the tags into your templates and check them with curl. In the report, Hand over to AI produces the findings as a work order in Markdown, with a verifiable target condition for each task. Choosing the picture and the wording stays your job.

Your next step

Run the free scan on your home page and look at the social preview and the findings listed above. Fix them in order, publish a new image under a new address if you have to replace one, and run the page through the Sharing Debugger. Then scan again to confirm that the preview is complete.