Open Graph Tags: How to Control Your Link Previews

In short: Open Graph tags tell social networks and chat apps what to show when your link is shared. Every page needs og:title, og:description, og:image and og:url, plus twitter:card for X. Use an absolute HTTPS image URL, about 1200 × 630 px, under 5 MB, with the important part near the center. Render the tags in the HTML your server sends, and after changing them, refresh each platform's cached preview, because old cards stick around.

A link preview is often the first impression of your site. A colleague pastes your pricing page into Slack, a customer shares a product in WhatsApp, a partner posts your article on LinkedIn. If the page has no Open Graph tags, each app guesses: the cookie banner text becomes the description, the image is a tiny logo or nothing, and the title is whatever the page's <title> happens to be.

This guide covers what each tag does, which platforms read what, the image sizes that hold up everywhere, why previews don't update, and how our free Open Graph checker finds missing tags, with a fix for each one.

What Open Graph is

According to ogp.me, "The Open Graph protocol was originally created at Facebook." It turns a web page into a "rich object" with a title, type, image and URL that other services can display. Facebook created it, but LinkedIn, Slack and most messaging apps read the same tags, and X reads them as a fallback for its own.

The tags are ordinary meta elements in the <head>, written with a property attribute:

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

The tags that matter

The protocol defines four required properties: a title, a type, an image and a canonical URL. In practice, a handful of optional ones matter too.

Two details from the specification are worth knowing. If a tag appears twice, "the first tag (from top to bottom) is given preference during conflicts," so a theme's tag above your plugin's tag wins. And structured properties like og:image:width belong to the og:image immediately above them.

Who reads what

Each platform documents its own rules. The essentials:

• Facebook and Meta apps. Meta's webmaster guide lists og:url, og:title, og:description, og:image and og:type. Images are cached by URL. The Sharing Debugger shows what the crawler scraped and triggers a fresh scrape.
• LinkedIn. Its help page names four tags that "must exist": og:title, og:image, og:description and og:url. Images need at least 1200 × 627 px, a 1.91:1 ratio and a maximum of 5 MB. Post Inspector shows how LinkedIn sees a URL and refreshes its copy.
• X. X uses twitter: tags and falls back to the Open Graph equivalents when they are missing, so og:title, og:description and og:image usually cover it. twitter:card sets the layout; summary_large_image shows a wide image. X documents a 2:1 ratio for that card, a minimum of 300 × 157 px, files under 5 MB, and JPG, PNG, WebP or GIF (not SVG).
• Slack. When no app handles a domain, Slack "crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata" (Slack docs).
• Google. Not a social network, but Google lists og:title among the sources for title links and considers og:site_name when choosing the site name above your results.

Choosing the og:image

The image decides whether a preview looks deliberate or broken. Platform requirements differ slightly, so aim for an image that satisfies all of them:

Use a specific image per important page (product photo, article illustration) and a well-designed default for the rest. A logo on a white square is the weakest option: most apps show it small or crop it awkwardly.

Why previews don't update

Platforms store the preview they built the first time a URL was shared. Meta states that "Images are cached based on the URL and won't be updated unless the URL changes," so replacing share.jpg with a new file under the same name may change nothing. The reliable sequence:

1. Upload the new image under a new file name (or add a version parameter to its URL).
2. Update the tags on the page and deploy.
3. Run the URL through Meta's Sharing Debugger and LinkedIn's Post Inspector to force a new fetch.
4. Share the link again. Posts that were already published generally keep the old card.

Tags for different page types

The basic tags are the same everywhere, but a few page types benefit from more:

• Articles and blog posts. Use og:type article. The protocol defines extra properties for this type, such as article:published_time, article:modified_time, article:author and article:section.
• Product pages. Use the main product photo as og:image and put the product name, not the store name, in og:title. Price and availability belong in Product structured data, covered in our schema markup guide.
• The home page and category pages. These are shared less often but seen more. A designed default image with your name and a short line about what you do works better than a random photo.
• Pages that should not be shared, such as checkout or account pages. They don't need special tags; just make sure the default image doesn't point to something private.

How to see what a crawler sees

Before you blame a platform, look at the HTML it receives. Open the page with "View source" (not the DevTools element inspector, which shows the page after scripts run) and search for og:. Meta's guide also gives the user agent of its crawler, facebookexternalhit/1.1, so you can fetch the page as Facebook does from a terminal:

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

If the tags appear in your browser but not in this output, they are added by JavaScript, or your server or firewall answers bots differently.

How the Searvia Open Graph checker works

The free Open Graph checker uses the same engine as our website SEO checker and puts three checks first: social sharing tags, the title tag and the meta description. Enter a domain or a page address and it:

1. Fetches that page, following redirects. If you enter only a domain, the home page is what gets checked, so paste the address of an article or product page to check its preview.
2. Reads the HTML your server returns, without running JavaScript, the way most link-preview crawlers see it.
3. Looks for four tags and records the first non-empty value of each: og:title, og:description, og:image and twitter:card.

The result is a table with a tick or cross and the exact value for each tag:

The check never shows a failure and carries low priority in the overall score, because missing social tags don't stop a page from being found. They do make every share look worse, which is why this tool shows them first.

The title and description checks (pass at 30 to 60 and 70 to 160 characters) appear right below, because many apps fall back to them when Open Graph tags are missing. The report also includes a Google result preview, which uses og:site_name for the site name when you set one.

What the checker does not do: it doesn't download the image to measure it, doesn't check og:url, og:type or og:image:alt, and doesn't fetch the page as each platform's crawler. Use the platform debuggers for the final look.

How to read the results

• All four ticked: the basics are in place. Click through to the values and check they make sense: a real title, a description that isn't the cookie notice, an image URL that starts with https://.
• og:image missing: fix this first. It is the part of the preview people notice.
• Only twitter:card missing: X will still read your Open Graph tags but may show a small summary card. Add the tag to get a large image.
• Title and description warnings below: these affect Google and the apps that fall back to them.

How to fix each missing tag

og:title is missing

Add a headline written for people scrolling a feed, not for a search engine. It can match your <title> without the brand suffix:

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:description is missing

Write one or two sentences with a concrete detail. Reusing your meta description is fine:

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:image is missing

1. Create a 1200 × 630 px image (JPG, PNG or WebP) with the subject centered.
2. Upload it somewhere public and copy its full HTTPS URL.
3. Add the image tag, plus dimensions and alt text:

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Open the image URL in a private browser window to confirm it loads without a login.

twitter:card is missing

<meta name="twitter:card" content="summary_large_image">

Note the name attribute: Twitter tags conventionally use name, Open Graph tags use property.

Platform settings

After any change, run the checker again, then the platform debuggers.

Common mistakes

• Relative image URLs. /images/share.jpg works in a browser but not for crawlers that expect a full URL. Always use https://….
• Tags injected by JavaScript. Single-page apps that set tags in the browser often show empty previews. Render the tags on the server or at build time. Google also advises avoiding JavaScript that changes meta tags.
• The image is blocked. A login wall, a bot-protection rule or a robots.txt line can stop the crawler from fetching the image. LinkedIn notes that a site "may be blocking us from pulling the image."
• One image for every page. It works, but a product or article shared with its own image gets more attention.
• Duplicate tags. A theme and a plugin both printing og:image: the first one wins, which may be the wrong one. View the source and search for og:image.
• Replacing an image under the same URL. Caches keep the old one. Use a new file name.
• SVG or huge files. Not supported by X, and slow for everyone.

Worked example (hypothetical)

The following is a hypothetical example, not real data. Fernway, an invented project management app, notices that links to its site in Slack show only a gray box and the text "We use cookies to improve your experience."

The Open Graph checker shows og:title and og:description present, but og:image and twitter:card missing. The description value turns out to be the cookie banner text: a plugin generates og:description from the first paragraph in the HTML, and the banner comes first.

The fixes: a written og:description in the page template, a 1200 × 630 px image showing the product's board view with the subject centered, og:image:width, og:image:height and og:image:alt, and twitter:card set to summary_large_image. A second run of the checker passes. The team then runs the URL through the Sharing Debugger and Post Inspector and posts the link again in Slack, where the new card appears.

A 15-minute checklist

1. Run the Open Graph checker on your domain.
2. Add any missing tag among og:title, og:description, og:image and twitter:card.
3. Add og:url, og:image:width, og:image:height and og:image:alt while you are in the template.
4. Make sure the image is 1200 × 630 px, under 5 MB, public and served over HTTPS.
5. Render the tags in the server HTML, not in client-side JavaScript.
6. Refresh the cached previews in the platform debuggers, then share again.

How Searvia keeps your previews and listings in shape

The free Open Graph checker checks one page, your home page or any address you enter, in about 20 seconds, with no sign-up, and the same report covers the other 37 checks of our website audit. Previews are only one part of how your pages appear; titles, descriptions and canonicals are covered in our meta tags guide, and the meta tag checker shows your Google preview.

For the whole site, a free Searvia account adds a weekly site audit that crawls every page and flags missing or duplicate titles and descriptions, so the text that apps fall back to stays accurate. For a weak title or description, Write with AI in the audit suggests ready options (1 credit), and the audit runs again every week, so a theme or plugin update that breaks your titles or descriptions shows up in the next report.