Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesOpen Graph (OG) meta tags are HTML metadata in a page’s <head> that describe the page when it is shared. The protocol’s four basic properties are og:title, og:type, og:image, and og:url. Add them to every shareable page, then test the rendered page and image from each destination because social networks can choose different fields, cache old values, or apply their own image rules.
What Open Graph metadata does
The Open Graph Protocol describes a web page as a rich object in a social graph. A crawler reads metadata from the document head and can use it to build a link preview containing a title, image, description and destination URL. OG metadata does not change the page’s visible layout, search ranking directly, or guarantee that every platform will show the same preview.
Without OG metadata, a platform may guess a title from the HTML title, select an arbitrary image, extract nearby text or show no image. Explicit values make the intended representation clear, while the destination remains free to apply its own policies.
The four required Open Graph properties
| Property | What it identifies | Implementation guidance |
|---|---|---|
og:title |
The title representing the object | Use the page’s specific, human-readable title. |
og:type |
The object type | Use website for a normal page unless a more specific protocol type applies. |
og:image |
A representative image URL | Use an absolute, publicly fetchable URL. |
og:url |
The object’s permanent, canonical identifier | Use the preferred canonical URL, including the correct protocol and path. |
The protocol calls these four properties required for every page. Some object types can require additional properties. Keep the values accurate for the exact URL being shared rather than copying one site-wide title or image to every page.
How to add Open Graph tags to HTML
Place the tags inside the document’s <head>. The protocol’s standard pattern uses property for the OG name and content for its value:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open Graph Meta Tags Explained</title>
<meta property="og:title" content="Open Graph Meta Tags Explained">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/open-graph-guide">
<meta property="og:image" content="https://example.com/images/open-graph-guide.jpg">
<meta property="og:description" content="Learn which Open Graph tags to add and how to test a share preview.">
<meta property="og:site_name" content="Example.com">
</head>
<body>
...
</body>
</html>Use a fully qualified HTTPS URL for og:url and og:image. The image must be reachable by the platform’s crawler without a login, session cookie or interactive challenge. HTML-escape quotation marks and ampersands when they occur in attribute values.
Useful optional properties
og:description
Add one or two concise sentences describing the page. It supplies useful context when a platform supports it; it is not a guarantee that the platform will display that exact text.
og:site_name and locale fields
og:site_name identifies the broader site. Locale metadata can communicate the page’s language and regional variant when your site publishes localized content. Follow the protocol’s locale format consistently across pages.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Structured image metadata
When you provide og:image, also provide og:image:alt as a description of what the image contains, not as a caption. Other documented image properties are og:image:secure_url, og:image:type, og:image:width and og:image:height.
<meta property="og:image" content="https://example.com/images/report-cover.jpg">
<meta property="og:image:alt" content="A blue report cover with the words Annual Web Report">
<meta property="og:image:secure_url" content="https://example.com/images/report-cover.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Structured properties belong after the corresponding root og:image tag. If you publish several images, repeat og:image for each one and place that image’s structured properties immediately after it. The protocol says the first value from top to bottom is preferred when consumers encounter conflicting values.
Choosing images that survive platform-specific rules
Open Graph itself does not impose one universal image size or file limit. Platforms can add requirements. LinkedIn’s sharing help page lists a 5 MB maximum image file size, a minimum of 1200 × 627 pixels and a recommended 1.91:1 ratio for its sharing module. The page was marked last updated two years before the September 29, 2026 access date, so verify those figures against LinkedIn’s current guidance before relying on them.
LinkedIn also says images under 401 pixels wide display as thumbnails. If an image meeting the stated dimensions does not appear, check that the image host allows LinkedIn’s crawler and does not require authentication or block the directory. These are LinkedIn-specific observations, not universal OG rules.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Serve the image over HTTPS from a stable URL.
- Keep the file type and declared MIME type consistent.
- Describe meaningful visual content in
og:image:alt. - Do not put essential text at the extreme edges, where platform crops can remove it.
- Regenerate or version the URL when replacing an image and a platform continues to show a cached copy.
Multiple images and precedence
Some consumers support several candidate images; others may use only one. Put your preferred image first. Repeat the root property for each candidate and keep every image’s structured fields grouped beneath it:
<meta property="og:image" content="https://example.com/images/share-wide.jpg">
<meta property="og:image:alt" content="Wide illustration of the product dashboard">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/share-square.jpg">
<meta property="og:image:alt" content="Square product dashboard illustration">Open Graph versus Twitter Card metadata
Open Graph uses the property attribute and names such as og:title. Twitter Card metadata uses names such as twitter:card. A page can include both systems so a destination can use the fields it supports:
<meta property="og:title" content="Open Graph Meta Tags Explained">
<meta property="og:description" content="A practical implementation guide.">
<meta property="og:image" content="https://example.com/images/guide.jpg">
<meta property="og:url" content="https://example.com/open-graph-guide">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph Meta Tags Explained">
<meta name="twitter:description" content="A practical implementation guide.">
<meta name="twitter:image" content="https://example.com/images/guide.jpg">Do not assume that historical Twitter-era guidance describes current X requirements. Check the destination’s current documentation if X sharing is important to your workflow.
Adding OG tags in a CMS or framework
Static HTML
Edit the shared layout or page template and insert the tags before </head>. Generate the four required values from page data so each route has its own canonical URL, title and image.
Windows 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 reinstallOutdated 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 matchServer-rendered applications
Render OG tags in the initial HTML response. A crawler that receives an empty shell and must execute client-side JavaScript may not see metadata reliably. Confirm the response body with a non-browser HTTP request and inspect the final HTML.
Single-page applications
Client-side changes to document.head can be too late for some crawlers. Prefer server-side rendering, static generation or a prerendered route for pages that must produce dependable previews.
WordPress and other CMSs
Use one SEO or social-metadata system, not several competing plugins. Duplicate og:title or og:image tags can create precedence problems. View the generated page source after saving a post and confirm there is one intended root value in the correct order.
How to validate a share preview
- Open the publicly deployed page, not a localhost or staging URL.
- View the raw HTML source and search for
og:title,og:type,og:urlandog:image. - Confirm the canonical URL, title and image match that exact page.
- Open the image URL directly in a private browser window. It should return the image without authentication, a redirect loop or a consent screen.
- Use the destination’s current preview inspector or debugger to fetch the URL and examine the result.
- After changing metadata, request a fresh scrape where the platform provides that control. Otherwise allow for cached data and test with a versioned image URL when appropriate.
Google’s web.dev documentation describes OG fields as semantic information for social crawlers and points readers toward destination-specific inspection resources. Treat the rendered preview—not only your source code—as the final check.
Troubleshooting common failures
The preview uses the wrong title or description
- Check for duplicate tags generated by a theme and an SEO plugin.
- Inspect the server-rendered source rather than only the live DOM after JavaScript runs.
- Verify that the URL being shared is the same URL whose tags you edited, including redirects and trailing slashes.
- Refresh the destination’s cached scrape.
No image appears
- Request the image URL without cookies and confirm a successful image response.
- Remove access controls, hotlink protection and crawler blocks that prevent retrieval.
- Check that the image is not an unsupported or mismatched content type and that its size meets the destination’s rules.
- For LinkedIn, check its stated 5 MB, 1200 × 627 minimum and crawler-access conditions, remembering that the guidance may have changed.
The wrong image is selected
Put the preferred og:image first, keep its structured properties directly beneath it and remove stale duplicates. A platform may still retain an earlier scrape, so force a refresh or change the asset URL.
The page is blank to a crawler
Move metadata into server-rendered or statically generated HTML. A browser-only script that adds tags after load is not equivalent to sending those tags in the initial response.
Tags appear correct but the preview differs
That is expected when a destination supports only some properties, applies its own crop or uses cached data. Compare the destination’s documented fields and inspect the actual fetch response.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a rendered screenshot of the page to inspect its final share card, ScreenshotNeo can fetch it with one request. It accepts the page URL, handles the browser session and returns PNG, JPEG, WebP or PDF. Its API also supports full-page capture, waiting for a selector or network idle, custom headers and cookies, device presets, dark mode, CSS and JavaScript, hiding selectors and other capture controls.
Best Value
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/open-graph-guide -o share-preview.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/open-graph-guide"}, timeout=90)
r.raise_for_status()
open("share-preview.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/open-graph-guide' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const fs = await import('node:fs/promises');
await fs.writeFile('share-preview.webp', Buffer.from(await res.arrayBuffer()));See the ScreenshotNeo documentation for request options. Cookie banners, newsletter popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use take_screenshot, get_page_info and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Performance, reliability and maintenance
- Keep metadata generation deterministic so the same URL always produces the same values.
- Use stable, cacheable image URLs and change the URL when the underlying asset changes.
- Do not make a crawler depend on a user-specific cookie, geolocation or client-side interaction.
- Test redirects, authentication boundaries, robots and firewall rules from an external network.
- Recheck platform documentation periodically because image limits, supported fields and cache-refresh tools can change.
Open Graph implementation checklist
- Four root properties exist in the initial document head.
og:urlis the canonical URL for the shared page.og:imageis absolute, stable and publicly fetchable.og:image:altdescribes the image’s content.- Optional description and site-name values match the page.
- Duplicate or conflicting tags have been removed.
- Destination-specific preview tools show the intended result after cache refresh.
Frequently Asked Questions
Do Open Graph tags improve Google rankings directly?
They describe a page to social crawlers and influence link previews; they are not presented as a direct Google ranking factor.
Can I use a relative URL for og:image?
Use an absolute, publicly reachable URL so a crawler can request the image without resolving page-relative paths or requiring a session.
Should every page use the same og:type value?
No. Use the type that represents the object; a standard content page commonly uses website, while other protocol types can have additional requirements.
Recommended Free Tools
Why does changing a tag not immediately change an existing preview?
Platforms commonly retain fetched metadata. Use the platform’s current refresh or debugger control, and verify the newly fetched HTML and image.
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.
