Open Graph tags for link previews
When someone shares a link in a social network or a chat app, the app fetches the page and builds a preview card: a title, a short description and an image. Open Graph meta tags let you decide what goes on that card instead of leaving the app to guess.
<meta property="og:title" content="Trail running shoes: how to choose" />
<meta property="og:description" content="Grip, cushioning and fit explained in five minutes." />
<meta property="og:image" content="https://example.com/images/trail-shoes-1200x630.jpg" />
Why it matters
A link with a clear title and a relevant image gets noticed in a feed; a bare URL or a preview with
a random logo or cropped banner does not. Without Open Graph tags, apps fall back to the <title>,
some text from the page and whatever image they find first, and the result varies from app to app.
Open Graph does not affect your ranking in web search. It affects how your pages look everywhere they are shared.
What we check
We look for three tags, each with a non-empty content:
og:titleog:descriptionog:image
| Result | When |
|---|---|
| Pass | all three are present |
| Needs attention | one or two are present |
| Fail | none are present |
The report lists the tags we found. We read the property attribute, as the Open Graph protocol
specifies; tags written as name="og:title" are not detected.
How to fix
Add the tags to the <head> of each page, with values specific to that page:
<head>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/guides/trail-shoes" />
<meta property="og:title" content="Trail running shoes: how to choose" />
<meta property="og:description" content="Grip, cushioning and fit explained in five minutes." />
<meta property="og:image" content="https://example.com/images/trail-shoes-1200x630.jpg" />
<meta property="og:image:alt" content="A pair of trail shoes on a muddy path" />
</head>
We only check the first three, but the Open Graph protocol also lists og:type and og:url as
required, so add them too. og:url should match your canonical URL.
Tips for each tag:
- og:title: the page’s headline, without the site name tacked on if space is tight. It can be
the same as your
<title>or a slightly more conversational version. - og:description: one or two sentences. Many apps cut it short, so put the important part first.
- og:image: use an absolute
https://URL. A 1200 × 630 pixel image (about 1.91:1) displays well on most platforms. Keep text on the image large and away from the edges, because some apps crop it. The image must be publicly reachable; previews cannot load images behind a login or blocked by robots.txt.
CMS and frameworks. WordPress SEO plugins and most site generators can output Open Graph tags from each page’s title, excerpt and featured image. Set a default image for pages that have none.
Testing previews
Apps cache previews, often for days. After changing tags, use the platform’s own debugging or preview tool to fetch the page again, or share a URL with a harmless query string added to see the fresh version.
X (formerly Twitter) also supports its own twitter:card tag. Adding
<meta name="twitter:card" content="summary_large_image" /> makes it show a large image preview.
The full list of properties is in the Open Graph protocol specification.