Open Graph Tags Examples: Complete HTML Guide

Direct answer: Put Open Graph tags in the <head> of every page you want to share. The four core properties are og:title, og:type, og:image, and og:url. Add og:description and og:site_name for a more complete card, then validate the deployed HTML with the target platform’s current debugger.

<!doctype html>
<html prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <title>Example page</title>
  <meta property="og:title" content="Example page" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page/" />
  <meta property="og:image" content="https://example.com/images/share-card.jpg" />
  <meta property="og:description" content="A concise description of this page." />
  <meta property="og:site_name" content="Example site" />
</head>
<body>
  ...
</body>
</html>

This follows the Open Graph Protocol property/content syntax. Replace every example value with information for the actual page. A tag generator can produce markup, but you still need to make sure the canonical URL, image, title, and description match the page that a crawler will fetch.

1. What Open Graph tags do

Open Graph metadata describes a web page as an object that can be represented in a link preview. A crawler reads the elements in the document head and uses them to select the preview title, image, URL, and supporting text. The protocol’s basic set is deliberately small:

Open Graph metadata is read from the page head and assembled into a link preview.

Property	Purpose	Typical value
`og:title`	The title shown for the object.	`Open Graph Tags Examples`
`og:type`	The kind of object being described.	`website`
`og:image`	The image representing the object.	`https://example.com/card.jpg`
`og:url`	The permanent graph identity and canonical page URL.	`https://example.com/guide/`

The protocol uses website as a straightforward example for a normal page. Specialized types are available, but choose one only when it accurately describes the object and you provide any properties that type requires. The og:url value should be the intended canonical URL, without tracking parameters or an incidental campaign URL.

2. The complete recommended tag set

Start with the four required-in-practice basics, then add the optional fields that improve clarity and localization:

<meta property="og:title" content="Open Graph Tags Examples" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/open-graph-tags/" />
<meta property="og:image" content="https://example.com/images/open-graph-tags.jpg" />
<meta property="og:description" content="Copyable Open Graph examples and implementation guidance." />
<meta property="og:site_name" content="Example Docs" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />

Descriptions and site names

og:description is an optional one- or two-sentence summary. Keep it specific to the page rather than repeating a generic company slogan. og:site_name identifies the larger site when the object belongs to one. Neither replaces the ordinary HTML <title> or meta description; keep those elements too for search and browser behavior.

Locales

Use og:locale for the page’s primary language and territory, such as en_US. Add one or more og:locale:alternate values when translated versions are available. The locale should describe the content actually served at that URL.

Audio and video

The protocol also defines og:audio and og:video for media associated with the object. Add them only when the media URL is stable, publicly reachable, and genuinely part of the page representation. Platform rendering of optional media can differ, so validate on the destination where the link will be shared.

3. Multiple images and structured image properties

You may repeat an Open Graph property to provide multiple values. When a crawler sees conflicting values, the first tag from top to bottom is preferred. For images, put structured properties immediately after the corresponding root declaration:

<meta property="og:image" content="https://example.com/card-one.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />

<meta property="og:image" content="https://example.com/card-two.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

The first og:image starts one image entry. Its width, height, and MIME type belong to that entry until the next root og:image. Put your preferred fallback first, because a consumer may stop after the first usable value. The protocol demonstrates structured image properties, but the illustrative dimensions above are not a universal requirement for every platform.

4. A production-ready page template

This template keeps ordinary document metadata and Open Graph metadata together while using a canonical URL:

<!doctype html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Open Graph Tags Examples | Example Docs</title>
  <link rel="canonical" href="https://example.com/open-graph-tags/">
  <meta name="description" content="Copyable Open Graph examples and implementation guidance.">

  <meta property="og:title" content="Open Graph Tags Examples">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/open-graph-tags/">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.jpg">
  <meta property="og:description" content="Copyable Open Graph examples and implementation guidance.">
  <meta property="og:site_name" content="Example Docs">
  <meta property="og:locale" content="en_US">
</head>
<body>
  <main>...</main>
</body>
</html>

Use absolute HTTPS URLs for og:url and og:image. A crawler needs to fetch the image independently, so a relative path, private asset, authentication wall, or URL that only works in a browser session can produce a missing image.

5. Framework and CMS implementation checklist

Generate values from the page record, not from one site-wide constant.
Render tags in the initial HTML head when possible. If JavaScript adds them after load, a crawler may not execute the same code path.
Escape attribute values so quotes or ampersands in titles cannot break the markup.
Emit one canonical og:url for the page. Remove tracking parameters unless they identify a genuinely different object.
Ensure the image URL is public, stable, and returns an image with the expected content type.
Keep the first image and title the preferred values when emitting fallbacks.
Deploy, then validate the deployed response rather than only inspecting a local development server.

6. Validation and stale preview troubleshooting

The official protocol site lists Facebook Object Debugger as a parser and debugger. Use the destination platform’s current own preview or debugger after deployment. Protocol-level correctness does not guarantee identical rendering across every social network, because each consumer can apply its own fetching and caching behavior.

Symptom	Likely cause	Fix
Preview uses the page title instead of `og:title`	The tag is missing, malformed, or absent from the fetched HTML.	Inspect the raw response, move the tag into `<head>`, and confirm valid property/content attributes.
Wrong page appears	`og:url` points at another route or includes a campaign URL.	Set it to the page’s canonical URL and keep the HTML canonical link consistent.
No image	The image is private, blocked, relative, unavailable over HTTPS, or returns an unexpected response.	Open the absolute image URL without a session, check its HTTP response and content type, and publish a stable public asset.
Old title or image persists	The platform cached an earlier fetch.	Use the platform’s current debugger or refresh workflow, then share the canonical URL again.
Wrong language	The locale or page variant does not match the content.	Serve the correct localized page and set `og:locale` plus alternate locales deliberately.
Only one of several images appears	The consumer selected the first usable value.	Place the preferred image first and attach structured properties before the next root image.
Tags appear in view source but not in the validator	The validator receives a different response because of redirects, bot rules, or server-side variation.	Check the final URL, response headers, redirects, and crawler access from the public internet.

7. Performance, reliability, and maintenance

Open Graph tags add negligible document size, but the referenced image affects preview fetch time and reliability. Serve the image from a dependable HTTPS endpoint, avoid expiring signed URLs unless the receiving crawler can fetch them immediately, and keep the asset available after publishing. A page can load quickly for a human while a crawler still fails because of access controls or a redirect chain.

For large sites, generate metadata from a single page model and add automated checks for missing titles, duplicate canonical URLs, invalid absolute URLs, and image endpoints that return errors. Revalidate after URL migrations, redesigns, locale changes, and image replacements. Keep a small set of representative pages in each template for recurring preview checks.

8. Capture and inspect the rendered result

When a preview problem is visual rather than markup-related, inspect a rendered screenshot of the page and its consent or popup state. ScreenshotNeo is a website screenshot API and MCP server. It can capture a full page or one element, wait for a selector or network idle, use a chosen device or viewport, and apply custom CSS or JavaScript. Those controls help you see whether a cookie banner, newsletter modal, or chat widget is covering the content you expect to represent.

9. Or skip the browser setup

For a reliable page image or social-card workflow, call ScreenshotNeo directly. See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/open-graph-tags/ -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/open-graph-tags/"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/open-graph-tags/'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; the response identifies the result with X-Page-Verdict and X-Billed headers. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Free accounts include 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

10. Cost and operational notes

Open Graph metadata itself has no service cost: it is HTML. Costs can appear when you generate, store, or repeatedly capture card images. Cache deterministic screenshots when the page has not changed, use a suitable viewport, and capture only the element you need when a full page is unnecessary. ScreenshotNeo supports caching with a TTL you choose, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage reporting, and signed links for public <img> tags. Every feature is available on every plan: Free (1,000 monthly), Starter ($5/3,000), Growth ($15/15,000), Pro ($39/60,000), Scale ($99/250,000), and Business ($249/1,000,000); yearly billing gives two months free.

11. Short FAQ

Do Open Graph tags replace a canonical link?

No. Keep a normal <link rel="canonical"> for search and set og:url to the same intended page identity.

Can I use `name` instead of `property`?

The protocol’s canonical examples use property and content. Follow that form for Open Graph properties.

Which `og:type` should a normal article use?

website is the protocol’s simple example. Choose a specialized type only when it accurately describes the object and you supply its required fields.

Why does a validator show an old card after I changed the HTML?

The platform may have cached its previous fetch. Run the platform’s current debugger or refresh workflow against the canonical URL.

Are image dimensions in the protocol example mandatory everywhere?

No universal platform requirement was established here. Structured width and height properties are useful metadata, but check the target platform’s current documentation for its own constraints.

12. Final launch checklist

Core tags are present in the initial <head>.
Title, description, type, and image describe this exact page.
og:url matches the canonical URL.
Absolute HTTPS image and page URLs are publicly reachable.
Preferred values appear first when properties repeat.
Locale values match the served language.
The deployed URL has been checked with the target platform’s current debugger.
Rendered screenshots show the intended page without obstructing consent or popup elements.

Open Graph markup is small, but correctness depends on the complete delivery path: generated HTML, canonical identity, public image availability, and the crawler’s own cache and parser. Keep those pieces aligned and validate again whenever the page or sharing platform changes.