Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To preview Open Graph metadata, open the exact page you want to share, run a browser extension that reads Open Graph tags, then inspect both the field values and the extension’s card preview. Check at least og:title, og:type, og:image, og:url, and the usually recommended og:description. Treat the card as an inspection aid, not a guarantee of what every social network will eventually display.

What you need to check

Open Graph (OG) metadata is placed in a page’s <head> as <meta> elements. The official Open Graph Protocol defines four basic properties for a page:

  • og:title — the title of the shared object.
  • og:type — the object type, such as an article or website.
  • og:image — the image URL used for the card.
  • og:url — the canonical URL for the object.

og:description is optional in the specification but generally recommended for a useful link preview. The protocol describes its purpose as enabling any web page to become “a rich object in a social graph.” See the official Open Graph Protocol specification for the complete vocabulary.

How to preview OG tags with an extension

  1. Open the exact page state

    Navigate to the URL you intend to share. If the page changes by locale, login state, query string, cookie choice, or client-side routing, reproduce that state before opening the extension. A staging URL can be useful, but confirm that your chosen extension can read it.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  2. Run the extension

    Click the extension’s icon in the browser toolbar, or use its documented command. The Chrome and Firefox listings below describe checking the page currently being viewed. Give the page time to finish loading before you inspect it.

  3. Read the core properties

    Find og:title, og:type, og:image, and og:url. Read og:description as well. Check that the title and description describe this page, the image URL resolves, and the URL is the canonical address you expect.

  4. Examine the visual card

    Many checkers render an approximation containing the image, title, and description. Look for a missing image, an unexpected crop, stale text, or a card that uses a fallback title. A visual preview is a fast way to spot a bad combination even when every tag technically exists.

  5. Compare a warning with the markup

    If the extension says a field is missing or improvable, verify the page’s actual HTML before changing content. An extension can have its own detection rules, and a listing’s recommendation is not automatically a protocol requirement.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  6. Fix, deploy, and check again

    After editing the page head, reload the page and run the checker again. If the page is generated by JavaScript, test the rendered page and also inspect the server response when possible.

Extensions you can use

Open Graph Checker for Chrome

The Chrome Web Store listing for Open Graph Checker says it previews the page’s image, title, and description and checks for missing or improvable fields. The listing also claims support for live rendered pages, including JavaScript-added metadata and pages on localhost or behind a login. That is the publisher’s claim about this extension; do not assume that capability for other add-ons. It suggests a 1200-pixel-wide image, og:url, og:type, and og:site_name. Those suggestions are listing guidance, not requirements established by the protocol.

Open Graph Checker for Firefox

The Mozilla Add-ons listing for Open Graph Checker by Coywolf describes a toolbar preview and a checklist of OG tags, showing the image, title, and description. The reviewed listings represent separate Chrome and Firefox options; neither listing establishes that one add-on supports both browsers.

How to choose between checkers

  • Metadata visibility: Can you see the literal values, not just a pass/fail icon?
  • Visual preview: Does it show the image, title, and description together?
  • Missing-field checks: Does it identify absent tags as well as display present ones?
  • Page coverage: Does it inspect the live rendered document, or only what its method can access?
  • Browser fit: Is the add-on listed for your browser and compatible with your page’s login or staging setup?

Inspect the tags yourself when a result looks wrong

An extension is convenient, but the browser’s developer tools provide an independent check. Right-click the page, choose Inspect, open the Elements panel, and expand <head>. Search for property="og:. You can also run this JavaScript in the DevTools Console to list the values currently present in the live DOM:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
for (const el of document.querySelectorAll('meta[property^="og:"]')) {
  console.log(el.getAttribute('property'), el.getAttribute('content'));
}

This reads the rendered document, so it can reveal tags inserted after navigation. To check what your server sent before JavaScript ran, use the browser’s View Page Source command or inspect the original response in the Network panel. Differences between the original HTML and the live DOM explain why two tools may report different results.

Open Graph rules that affect what you see

Tags belong in the head

The protocol specifies meta tags in the document head. A tag placed only in visible body content is not an equivalent replacement for a correctly placed OG property.

Repeated properties and precedence

Some properties may have multiple values. The specification allows repeated tags and says that when values conflict, the first tag takes preference. If an extension displays a surprising value, search for duplicate declarations and put the intended value first or remove the duplicate.

Structured image properties

og:image can be accompanied by structured properties including image width, height, MIME type, and alt text. A checker may display these fields, but the four basic properties remain the starting point for diagnosis.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Why the extension preview may differ from a shared post

The sources establish what the protocol requires and what the cited add-ons claim to display. They do not establish that an extension’s card exactly matches a particular social platform. Platforms can fetch at a different time, cache an earlier response, apply their own image and text rules, or render a different layout. Therefore, use an extension to catch markup errors and preview likely content, not as a cross-platform guarantee.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshooting checklist

The extension shows no OG fields

  • Confirm you are on the intended URL, not an embedded frame or redirect destination.
  • Reload after the page finishes navigating, then reopen the extension.
  • Inspect <head> directly to determine whether tags are absent or merely unreadable to that add-on.
  • If the page is client-rendered, verify whether the extension claims live-rendered support.

The title or description is wrong

  • Search for duplicate og:title or og:description tags; the first conflicting value is preferred by the protocol.
  • Check that a template did not output a default value for every route.
  • Compare the live DOM with View Source to find server-versus-JavaScript differences.

The image is missing

  • Open the exact og:image URL in a new tab and confirm it resolves.
  • Check for a typo, an inaccessible host, or a URL that only works inside your local network.
  • Look for multiple image declarations and confirm the intended one appears first.

The extension’s card looks good but sharing still looks different

That result is possible because the extension does not control a platform’s crawler, cache, or final layout. Recheck the deployed HTML and then use the destination platform’s own debugging or preview facility when available.

Or skip the browser setup

If your goal is a clean visual capture of the page rather than reading the OG fields themselves, ScreenshotNeo provides a website screenshot API. It is not an OG-tag parser, so keep the extension or DevTools for inspecting metadata. Use the API when you need a repeatable image or PDF of the rendered page:

ScreenshotNeo documentation

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Before capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Practical validation sequence

  1. Run the extension on the exact page state.
  2. Record the five key values and any warnings.
  3. Verify the live DOM and, when relevant, the original response.
  4. Resolve duplicate, missing, or inaccessible declarations.
  5. Reload and preview again after deployment.
  6. Use a platform-specific checker separately when the final appearance matters.

Frequently Asked Questions

Can an extension guarantee the card shown by LinkedIn, Facebook, or another platform?

No. It previews the metadata it can read, while each platform controls crawling, caching, and final rendering.

Is og:description required?

The Open Graph Protocol describes og:description as optional but generally recommended; og:title, og:type, og:image, and og:url are the four basic properties.

What should I do when two og:image tags exist?

Review the order. The protocol allows repeated values and says the first value is preferred when values conflict.

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.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.