What is an Open Graph meta tag? Examples and how to check a link preview

How do Open Graph tags work?

Open Graph is a meta tag protocol. Google's web.dev HTML course explains that Open Graph tags can be used to control how social media sites, such as Twitter, LinkedIn and Facebook, display links to your content. When someone shares your page, the site reads these tags to build the preview card, usually a title, a short description and an image.

Open Graph tags differ from ordinary meta tags in one way: they use a property attribute instead of name. web.dev notes this ensures the protocol's values will not clash with future values of the name or http-equiv attributes. The main tags are:

• og:title: the title shown in the preview.
• og:description: a short summary of the page.
• og:image: the absolute URL of the preview image.
• og:image:alt: a text description of that image.
• og:url: the canonical URL of the page.

What does an Open Graph example look like?

This example follows the pattern in the web.dev course. The tags go inside the head of the page:

<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://www.example.com/image.png" />
<meta property="og:image:alt" content="Line drawing of household appliances" />
<meta property="og:url" content="https://www.example.com/workshop" />

Two details are easy to get wrong. First, web.dev says to provide the absolute URL to the image, including the https:// protocol. A relative path such as /image.png is not enough. Second, use property, not name, for the og: tags.

Twitter has its own syntax. Its tags use the name attribute with values prefixed by twitter:, such as twitter:title. web.dev notes that other social platforms have similar syntaxes of their own.

What happens if a page has no Open Graph tags?

The link can still be shared. According to web.dev, when Open Graph tags are missing, social sites use the page title and the description from the description meta tag. That can work, but you lose control over the image and wording, and the preview may not suit a social feed. Adding Open Graph tags lets you choose exactly what appears.

The image tag can matter beyond social sites. Google has said that it uses both schema.org markup and the og:image meta tag as sources when choosing image thumbnails in Google Search and Discover, so a good preview image can serve both purposes.

How do you check a website link preview?

Checking a preview is a two step job: confirm the tags, then see how they render.

1. Open the page in a browser and view the page source. Search for og: and confirm that og:title, og:description, og:image and og:url are present in the head, with the values you expect.
2. Check that the image URL is absolute, starts with https:// and opens on its own in a new tab.
3. Share the link in a private message or a draft post on the platform you care about, and look at the card it builds before you publish.

If the preview shows your page title and meta description instead of your chosen text, the site is probably not finding your Open Graph tags, so return to the first step.

Sources

• web.dev Learn HTML: Metadata
• Google Search Central: Image SEO best practices
• Google Search Central: Latest documentation updates

Frequently asked questions

Do Open Graph tags affect Google rankings?

Open Graph tags are designed for social sharing. Google's web.dev course describes them as a way to control how social media sites such as Twitter, LinkedIn and Facebook display links to your content. Google has also said that it uses the og:image meta tag, alongside schema.org markup, as a source when choosing image thumbnails in Google Search and Discover.

Why is my og:image not showing when I share a link?

A common cause is a relative image path. web.dev says og:image should be the absolute URL of the image, including the https:// protocol. Also check that the tag uses the property attribute rather than name and that the image URL opens on its own.