Open Graph Meta Properties in HTML
Add Open Graph tags for reliable link previews: required properties, image fields, validation, troubleshooting, and a complete HTML template.
Open Graph (OG) metadata is HTML in your document’s <head> that describes a page for link previews and social graphs. The required baseline is four properties: og:title, og:type, og:image, and og:url. Add them with meta elements using property and content attributes.
The protocol defines how a page can become a rich object in a social graph, but it does not guarantee identical rendering on every crawler, messaging app, or search engine. Each consumer processes the tags it supports and ignores the rest, so validate the HTML and inspect the destination platform’s current preview or debugger.
Copyable Open Graph HTML template
<!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>Example article title</title>
<link rel="canonical" href="https://example.com/article">
<meta property="og:title" content="Example article title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/images/article-preview.jpg">
<meta property="og:description" content="A concise summary for link previews.">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">
<meta property="og:image:secure_url" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Abstract illustration representing the article topic">
</head>
<body>
<article>...</article>
</body>
</html>Put these elements in the initial HTML response’s <head>. If a framework renders metadata server-side, make sure crawlers receive the tags without requiring client-side JavaScript.
Which Open Graph meta tags do I need?
| Property | Purpose | Guidance |
|---|---|---|
og:title |
The object title shown in a graph or preview. | Use the page’s specific, readable title. |
og:type |
The kind of object, such as website or article. |
Some types require additional properties. |
og:url |
The object’s canonical permanent identifier. | Use the preferred public URL, not an arbitrary link. |
og:image |
The image representing the object. | Use an absolute, publicly fetchable URL. |
The Open Graph protocol specifies these four as the basic properties for every page. The prefix declaration shown in the template identifies the og vocabulary. Follow the protocol’s current documentation for object types and type-specific fields.
How do I add an Open Graph image?
Add an absolute image URL with og:image:
<meta property="og:image" content="https://example.com/images/article-preview.jpg">Then add structured image properties immediately after that root property:
<meta property="og:image:secure_url" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of what the image shows">The protocol describes og:image:secure_url as an HTTPS alternative, og:image:type as a MIME type such as image/jpeg, and width and height in pixels. It also says an og:image should have an og:image:alt description.
Declaring multiple images
You can repeat an array-like property. Put the preferred image first; the protocol says the first value is preferred when values conflict. Structured fields belong to the root image they follow. A new og:image starts a new group.
<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:alt" content="Primary article illustration">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:alt" content="Alternate article illustration">Useful optional Open Graph properties
The protocol lists these optional properties as generally recommended:
| Property | Example | Use |
|---|---|---|
og:description |
Concise page summary |
Text used in supported previews. |
og:site_name |
Example Site |
Identifies the overall site. |
og:locale |
en_US |
Declares language and territory; en_US is the documented default. |
og:locale:alternate |
fr_FR |
Lists another available locale. |
og:audio |
https://example.com/audio.mp3 |
Associates audio with the object. |
og:video |
https://example.com/video.mp4 |
Associates video with the object. |
Only add media URLs that are intended to represent the page and are accessible to the relevant crawler.
Open Graph versus other metadata
Open Graph, Twitter Cards, and search metadata solve related but separate problems.
| System | Typical namespace or element | Role |
|---|---|---|
| Open Graph | property="og:title" |
Describes a page as a social graph object and supplies supported link-preview fields. |
| Twitter Cards | name="twitter:card" |
Provides Twitter/X-specific card metadata with its own names and rules. |
| Search metadata | <title>, description and other Google-supported tags |
Supports search processing and indexing controls. |
Google Search Central says clients process the meta tags they support and ignore those they do not. Open Graph alone does not control Google indexing or rankings. Add platform-specific metadata when the platforms you target document a need for it.
Validate Open Graph metadata
- Inspect the delivered HTML. Fetch the public URL and view the response source. Confirm the tags are in
<head>, not only added after hydration. - Check the four basics. Verify title, type, canonical URL, and image URL are present and match the page.
- Check image fields. Confirm the image URL is reachable, the MIME type is accurate, dimensions describe the file, and alt text matches the image.
- Use a platform debugger. The Open Graph project documents Facebook’s Object Debugger; web.dev also points to it. Use the destination service’s current preview or debugger because support and cache behavior differ.
- Test after publishing changes. Crawlers may cache metadata. A debugger’s refresh or re-scrape action can reveal the current fetched result.
Quick command-line inspection
curl -L https://example.com/article | sed -n '/<head/,/<\/head>/p' | grep -E 'og:|twitter:'This checks the HTML response only. It does not prove that a platform will render every field.
CMS and framework implementation
Static HTML
Edit the shared document head or page template and output page-specific values. Escape attribute values and generate absolute URLs.
Server-rendered applications
Generate metadata from the same canonical route data used to render the page. Set og:url to the canonical public URL, including the intended scheme, host, and path.
Client-rendered applications
Prefer server-side or build-time output for crawler access. If tags are inserted only after JavaScript runs, some consumers may miss them.
CMS or plugin-managed sites
Use the CMS metadata settings when available, then inspect the resulting source. Plugins can reduce template work, but duplicate or conflicting tags still need to be removed.
Troubleshooting Open Graph tags
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | Relative URL, blocked asset, unsupported format, or stale cache. | Use an absolute public URL, verify the response, inspect MIME type, and re-scrape in the platform debugger. |
| Wrong page is previewed | og:url points to another object or duplicate tags conflict. |
Set one canonical og:url and remove conflicting metadata. |
| Old title or image persists | The crawler cached an earlier fetch. | Use the platform’s refresh/debug action, then verify the delivered HTML. |
| Tags are missing in a crawler | Metadata is injected only in the browser, or the response is blocked. | Render tags server-side or at build time; check redirects, robots rules, authentication, and response status. |
| Preview differs by platform | Consumers support different fields and rendering rules. | Keep the OG baseline, add documented platform-specific tags, and inspect each target’s current preview. |
| Structured fields attach to the wrong image | Fields were placed before a root og:image or after a different root. |
Place each image’s structured properties directly after its corresponding root declaration. |
| Locale is ignored | Locale value is malformed or unsupported by the consumer. | Use the documented language_territory form such as en_US and verify in the target debugger. |
Performance, reliability, and maintenance
- Keep metadata small and deterministic so crawlers can parse it quickly.
- Serve preview images from stable HTTPS URLs with correct content types.
- Generate tags from canonical route data to avoid title, URL, and image drift.
- Use one preferred value first when declaring multiple images or other array-like properties.
- After changing metadata, validate both the raw HTML and the target platform preview.
- Do not treat a successful fetch as a universal rendering guarantee; consumers can ignore unsupported tags.
Or skip the browser setup
If you need a rendered check of a page or its published preview, ScreenshotNeo can return a clean screenshot or PDF from one GET request. It 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. Responses identify the page verdict and billing status with X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf.
See the ScreenshotNeo API documentation for all options. Basic call:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);There is a free plan with 1,000 screenshots per month and no card. Paid plans start at $5 for 3,000 shots, and every feature is included on every plan. Create a free ScreenshotNeo account.
FAQ
Does Open Graph improve search rankings?
Open Graph describes social sharing objects. It is not a Google ranking control; use Google-supported search metadata for search behavior.
Can I use a relative og:image URL?
Use an absolute public URL so crawlers can fetch the intended asset reliably.
Is og:url the same as a normal link?
It identifies the object’s canonical permanent URL in the graph. Set it to the page’s intended canonical URL.
Do I need Twitter Card tags too?
Add them when you target Twitter/X or another consumer that documents its own namespace. They are separate from Open Graph.
Why can two services show different previews?
Consumers support different tags, apply different rendering rules, and cache fetches independently. Check each service’s current debugger or preview.
