Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Open Graph in HTML is a metadata protocol for describing a page as a rich object in a social graph. Add its meta elements to the document’s <head>. Every page needs four properties: og:title, og:type, og:image, and og:url. Optional properties such as og:description and og:locale add context, while repeated properties express multiple values with the first declaration taking precedence.
What Open Graph means in HTML
The Open Graph protocol enables any web page to become a rich object in a social graph. Instead of leaving a shared URL to be interpreted only from visible page content, you explicitly describe the object’s title, type, representative image, and permanent URL.
Open Graph uses ordinary HTML <meta> elements. The protocol documentation places them in the document <head>, not in the visible body. Its design goal is developer simplicity: one consistent metadata pattern rather than a different implementation for every sharing context.
Free tools Windows power users keep installed
One-click scans. No signup required.
The four required Open Graph properties
| Property | Purpose | Example |
|---|---|---|
og:title |
The title of the object as it should appear in the social graph. | How to audit a web page |
og:type |
The kind of object, such as website or video.movie. |
website |
og:image |
The image URL representing the object. | https://example.com/images/audit.png |
og:url |
The canonical URL and permanent identifier for the object in the graph. | https://example.com/audit |
Use the page’s real values rather than copying the documentation’s movie example. The og:url value should identify the canonical address, not merely a convenient redirect or campaign destination.
#1 Best Overall
- Used Book in Good Condition
A complete HTML example
This is a minimal document containing all four required properties plus two optional ones:
<!doctype html>
<html prefix='og: https://ogp.me/ns#'>
<head>
<meta charset='utf-8'>
<title>How to audit a web page</title>
<meta property='og:title' content='How to audit a web page'>
<meta property='og:type' content='website'>
<meta property='og:image' content='https://example.com/images/audit.png'>
<meta property='og:url' content='https://example.com/audit'>
<meta property='og:description' content='A practical guide to auditing a web page.'>
<meta property='og:locale' content='en_US'>
</head>
<body>
<h1>How to audit a web page</h1>
</body>
</html>The prefix declaration identifies the Open Graph namespace used by the properties. The protocol’s namespace URL is https://ogp.me/ns#.
Optional properties and structured image data
og:description
The documentation describes this as a one- or two-sentence description. Keep it specific to the page and different from a generic site slogan.
Recommended Free Tools
og:locale
Locale is optional. The documentation gives en_US as the default locale. Add the value that actually describes the page’s language and regional variant when that distinction matters.
Other optional properties
The protocol also documents optional properties including og:audio and additional object-specific metadata. They supplement, but do not replace, the four required properties.
Image width, height, and other structured properties
Structured properties belong to the image declaration that precedes them. For example:
Rank #3
- Used Book in Good Condition
<meta property='og:image' content='https://example.com/images/audit.png'>
<meta property='og:image:width' content='1200'>
<meta property='og:image:height' content='630'>Keep these declarations after their related og:image and before another root property begins. The protocol treats them as data for that image, not as independent replacement images.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallHow to implement Open Graph tags step by step
- Choose the object values. Write the title you want associated with the shared object, select an appropriate type such as
websiteorvideo.movie, choose a representative image URL, and determine the canonical page URL. - Edit the document head. Add one
<meta property='...' content='...'>element for each required property inside<head>. - Add optional context. Include
og:description,og:locale, or other documented properties only when you have an accurate value. - Keep the canonical address stable. Set
og:urlto the page’s canonical URL. Do not use a temporary tracking URL as the graph identifier. - Publish and inspect the response. View the delivered HTML source, not only a client-side editor preview, and confirm that the tags are present in the head of the public page.
- Check each sharing service separately. The Open Graph documentation links to a Facebook parser/debugger, but the available specification does not establish current parsing, cache refresh, or image rules for every platform. Treat each service’s current official behavior as a separate question.
Multiple values: images, locales, and precedence
A property that supports multiple values can be repeated:
<meta property='og:image' content='https://example.com/images/primary.png'>
<meta property='og:image' content='https://example.com/images/alternate.png'>When values conflict, the first declaration in document order takes preference. Put your preferred image, title, or other repeated value first. For an image with structured properties, keep all of that image’s structured declarations together before starting the next root og:image.
Common implementation mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No Open Graph data is detected | The tags are in the body, in a template fragment that is not delivered, or absent from the public response. | Place the elements directly in the delivered <head> and inspect the page source. |
| The wrong image or title is selected | More than one value is present and an unintended declaration appears first. | Reorder repeated properties so the preferred value comes first, then remove stale duplicates. |
| The shared object points to the wrong page | og:url contains a tracking, preview, or non-canonical address. |
Replace it with the page’s canonical URL. |
| Image details seem attached to the wrong image | Structured properties were separated from their root og:image. |
Place width, height, and other structured declarations immediately after the relevant image declaration. |
| A preview differs between services | Cross-platform parser and cache behavior is not uniform or established by the protocol specification. | Use the affected service’s current official diagnostic tool and verify the delivered tags independently. |
A practical validation checklist
- All four required properties appear in the document head.
og:titledescribes this page rather than the whole site.og:typeis an intentional object type.og:imageidentifies the intended representative image.og:urlis the canonical graph identifier.- Optional description and locale values are accurate.
- If a property is repeated, the preferred value is first.
- Structured image properties follow their associated root image.
- The public HTML response contains the tags before any platform-specific debugger is used.
Performance, reliability, and maintenance
Open Graph metadata is declarative HTML, so its operational cost is the maintenance of correct values rather than a separate runtime service. Generate the tags from the same canonical page data used for the visible title, URL, and image selection. This reduces drift between what a visitor sees and what a parser reads.
When a page is renamed, moved, localized, or given a new representative image, update the corresponding Open Graph values at the same time. Avoid leaving contradictory duplicate declarations in a shared layout and a page template; document order determines which repeated value is preferred.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do not promise that every social service will render an identical card. The protocol defines the metadata vocabulary, while each service controls its own parser, cache, and presentation.
Or skip the browser setup
If you need a clean visual capture of the published page while checking the result, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and can return PNG, JPEG, WebP, or PDF. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf tools to Claude, Cursor, and other MCP clients.
For a one-call capture, see the ScreenshotNeo documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/audit -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/audit"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/audit' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);You can also request full-page captures with lazy images loaded, a selected CSS element, a device preset or custom viewport, dark mode, custom CSS or JavaScript, selector waits, network-idle waits, blocked resources, cookies, headers, timezone, geolocation, resizing, caching with a chosen TTL, signed image links, asynchronous webhooks, and bulk capture of up to 100 URLs per call.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account.
Frequently Asked Questions
Does Open Graph replace the HTML title element?
No. Open Graph describes the page as an object in a social graph. Keep a normal HTML <title> for the document itself and define og:title for the graph representation.
What locale does the protocol document as the default?
The Open Graph documentation gives en_US as the default for og:locale. The property remains optional, so set it when the page’s language and regional variant require explicit identification.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
