How the Open Graph protocol is put together
The Open Graph protocol is documented at ogp.me. Each property is a meta tag with a property
attribute and a content value. Four properties are listed as required by the protocol: og:title,
og:type, og:image and og:url. In practice og:description
is treated as part of the core set too, because every major platform shows it when it is there.
| Property | What a valid value looks like | Common mistake |
|---|
og:title | A plain-text headline for the shared card | The full SEO
title with a long brand suffix |
og:type | website for most pages, article for dated
editorial content | Left out, or a made-up value |
og:image | A full https:// address of a JPG or PNG | A relative path, or an SVG |
og:url | The same clean address as the canonical tag | The home page
on every page, or an address with tracking parameters |
og:description | One or two sentences for the card | Copied from the
meta description on every page, or left empty |
og:site_name | The name of the site or business | The domain name, or a tagline |
og:locale | en_GB, with an underscore | en-GB or en-UK |
Structured properties
Some properties describe the one before them. og:image:width, og:image:height,
og:image:type and og:image:alt all apply to the most recent og:image
above them. If a page lists more than one image, each set of details has to follow its own image, in
order. A generator gets this right automatically; hand-written templates often do not, which is why width
and height sometimes end up attached to the wrong image.
Attribute names
Open Graph tags use property=, while X card tags use name=. Most readers
are forgiving about the difference, but not all of them, so match the documented form for each vocabulary
rather than mixing them.
The fix guides, finding by finding
Each guide takes one generator finding, explains what the tag is for and what went wrong, and gives
the corrected markup, a way to change it on your platform and a way to check the result.
Missing and incomplete tags
Fixing missing core OG tags covers
the minimum block every page should carry and what platforms do when it is absent: they scrape the page
and guess, usually badly. Fixing X (Twitter)
card tags covers twitter:card, twitter:site for the site's account and
twitter:creator for the author's, and why explicit tags give you more control even though
X can fall back to Open Graph.
Values that are present but wrong
Fixing wrong OG image dimensions
covers the aspect ratios the main platforms expect, whether one image can serve all of them, and the
smallest size that avoids a cramped thumbnail. Fixing
og:title and title mismatches covers writing a share headline that can differ from the search title
without looking like a different page. Fixing
og:url and canonical mismatches covers why the two should name the same address, so shares are not
scattered across versions with parameters or different slashes. Fixing
og:locale issues covers the primary locale, og:locale:alternate for other languages
the address serves, and locales that do not match the content.
Richer data and stale previews
Fixing article OG tags covers article:author,
article:published_time, article:section and article:tag for editorial
pages. Fixing a stale cached OG image covers
why a corrected image does not appear straight away, versioned image addresses and forcing a fresh fetch.
By platform
Open Graph in WordPress covers Yoast
and Rank Math settings, per-post overrides, a custom image for the home page and clashes when two SEO
plugins are active. Open Graph in Shopify
covers theme-level tags, per-product images and apps that add a second set. Open
Graph in Next.js covers the openGraph field in the Metadata API, generated images and
route-level defaults.
Which findings to fix first
A missing tag and a slightly imperfect one are not the same size of problem. This order puts the findings
that make shared links look broken ahead of the ones that only refine them.
- No
og:image, or an image address that does not load. A card without
a picture is the most visible failure, and platforms may fill the gap with a logo or a random image from
the page.
og:url pointing to the wrong page. When every page names the home page,
some platforms fetch the home page instead, so every shared link shows the same card.- Missing
og:title or og:description. Platforms fall back
to the title element and page text, which often works but gives you no say in the wording.
- Missing
twitter:card. Without it, links on X, and in some chat apps
that read the same tag, are more likely to appear as a small card.
- Image dimensions not declared, or the wrong shape. Declaring width and height helps
a platform render the card on the first share instead of waiting to fetch the image.
- Locale, article and site name details. These improve accuracy and attribution but
rarely make the difference between a working and a broken card.
💡 If the generator reports a correct block but a platform still shows an old or empty
card, the problem is almost always a cache or a blocked crawler rather than the tags. Per-platform troubleshooting
of that kind is covered in the
Social Preview
Guide.
Getting the values right
Most generator findings are not about missing tags but about values that are technically present and
still wrong. These are the ones that catch people out.
og:title is not a copy of the title element
The title element is written for a search results page, where it competes with nine other links and
often ends with the brand name. A shared card already shows the site name or domain, so the brand suffix
is wasted there. A good og:title says the same thing as the page title in the way a person
would say it when sharing it. It should never describe a different page: a card that promises one thing
and lands on another looks like a mistake or worse.
og:type decides which extra tags make sense
Use website for home pages, service pages, categories and products unless a platform
you care about documents something else. Use article for news stories, blog posts and guides
with a publication date, because that unlocks the article: properties. Values invented for
the occasion, such as blog or service, are not part of the protocol.
Three ways of writing the same language
British English is written three different ways in three different places, and the generator often
flags a value copied from the wrong one.
| Where | Correct form | Separator |
|---|
html lang attribute | en-GB | Hyphen |
hreflang annotation | en-GB (case does not matter) | Hyphen |
og:locale | en_GB | Underscore |
In all three the country code is GB, not UK. Only list og:locale:alternate
values for languages the same address actually serves; if each language has its own address, each page
should carry its own primary locale instead.
og:url matches the canonical, exactly
Protocol, host, path and trailing slash should all match the canonical tag. The simplest way to guarantee
that is to generate both from one variable in the template.
Article pages: the extra properties
Editorial pages can carry a set of article: properties alongside the core tags. They
tell platforms when a piece was published and updated, who wrote it and what it is about. Not every platform
displays them, but they cost little and keep the metadata consistent with what the page says.
<meta property="og:type" content="article">
<meta property="og:title" content="How we cut our heating bill with a smart thermostat">
<meta property="og:url" content="https://example.com/blog/smart-thermostat-review">
<meta property="og:image" content="https://example.com/images/thermostat-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A smart thermostat mounted on a hallway wall">
<meta property="og:locale" content="en_GB">
<meta property="article:published_time" content="2026-03-02T09:00:00+00:00">
<meta property="article:modified_time" content="2026-09-14T11:30:00+01:00">
<meta property="article:author" content="https://example.com/about/jane-smith">
<meta property="article:section" content="Home energy">
<meta property="article:tag" content="Thermostats">
<meta property="article:tag" content="Heating">
- Dates use the ISO 8601 format with a time zone, the same format used in structured
data. Only change the modified time when the content really changes.
- Author is defined in the protocol as a profile; a link to the author's page on your site is the safest value.
- Tags repeat the property once per tag rather than using a comma-separated list.
Keep these values consistent with the dates and author shown on the page and in any Article structured
data. Three different publication dates in three places is the kind of inconsistency that erodes trust
in the page's metadata.
A sensible order of work
- Open the OG / Twitter Tag Generator, enter the page
and note every missing or invalid tag it flags.
- Work out which layer prints the tags on your site: the theme, an SEO plugin, an app or the framework. Make sure only one does.
- Fix the core block first: title, type, image, url and description, with full https addresses.
- Create a share image at the recommended size, declare its width, height and alt text, and give it a new file name.
- Add
twitter:card and, if you have accounts, twitter:site and twitter:creator.
- Set
og:locale and, on editorial pages, the article: properties.
- Run the generator again to confirm the block validates, then refresh the platforms' cached copies
for pages that were already shared.
This hub covers the tags. Seeing how the finished card appears on each platform, and fixing blocked
crawlers, is the job of the Social Preview Tester, explained in the Social
Preview Guide. For the rest of the head, see meta
tag fixes, and for how the page appears in Google, SERP
preview fixes. The full reference for this tool is the Open
Graph Guide.
Questions and answers
1. What are the required Open Graph tags?
The Open Graph protocol lists four properties as required: og:title, og:type, og:image
and og:url. Most sites should also include og:description, because every major platform displays it,
and og:site_name so the card is attributed properly. Adding og:image:width, og:image:height and og:image:alt
helps too. Put one copy of each in the head of the page, in the HTML the server sends, with complete
https addresses for the image and the url. The generator flags any of these that are missing.
2. Should og:title be the same as the page title?
It should describe the same page, but it does not have to be word for word the same.
The title element is written for search results and often ends with a brand name, which is redundant
on a social card that already shows the site. A share headline can be shorter, more conversational or
more specific. Avoid making it so different that someone who clicks the card feels they have landed on
a different page from the one promised.
3. What is the difference between og:locale and the lang attribute?
They describe the same thing, the language and region of the content, but in different
formats for different readers. The lang attribute on the html element uses a hyphen, as in en-GB, and
is read by browsers and screen readers. The og:locale tag uses an underscore, as in en_GB, and is read
by platforms that build link previews. In both, the United Kingdom is GB rather than UK. Neither tells
Google which country to target; that is what hreflang is for.
4. Why does og:url need to match the canonical tag?
Both tags name the main address of the page, one for search engines and one for sharing
platforms. If they disagree, search engines credit one address while share counts and cached previews
attach to another. When og:url points to the home page on every page, some platforms fetch the home page
and show its card for every link. The safest set-up is to generate both values from the same variable
in your template, so they cannot drift apart.
5. Do I still need Twitter card tags now that Twitter is X?
It helps to include at least twitter:card. X reads its own tags first and falls back
to Open Graph for the title, description and image, so you do not need to duplicate those unless you
want different wording on X. The twitter:card value decides whether a link gets a large image or a small
one, and some chat apps read it too. Add twitter:site and twitter:creator if you want the card attributed
to your accounts.
6. Can I use an SVG or WebP image for og:image?
Use a JPG or PNG for the widest support. SVG is not accepted as a share image by the
major platforms, and support for WebP varies between them, so a card that works on one site may appear
without an image on another. Declare the type with og:image:type if you like, give the image a full https
address, and keep the file reasonably small so platforms can fetch it quickly when the link is first
shared.
7. Why does my new share image not appear after I changed it?
Because platforms keep a copy of each preview they have built, and they do not check
your page again every time a link is shared. Changing the image file at the same address makes the problem
worse, because the address the platform remembers still looks valid. Give the new image a new file name,
update og:image, purge your own CDN cache, and then use the refresh tools that Facebook and LinkedIn
provide. Other platforms update when their cache expires.
Build and check your Open Graph tags
The OG / Twitter Tag Generator builds the Open Graph and X card block for your page, validates
it against the requirements of Facebook, LinkedIn and X, and flags every tag that is missing or invalid.
Run the OG / Twitter Tag Generator →