How to Preview Open Graph Metadata With a Browser Extension

Direct answer: Open the exact page you want to check, activate an Open Graph checker extension, then review og:title, og:type, og:image, og:url, and og:description. Use the extension’s visual card to spot mismatched titles, descriptions, or images. Treat that card as an inspection aid, not a guarantee of what a social network will ultimately display.

What Open Graph metadata is

The Open Graph Protocol describes a webpage with metadata in the document head. Its four basic properties are:

Property	Purpose
og:title	The title of the shared object.
og:type	The object type, such as an article or website.
og:image	The image associated with the share.
og:url	The canonical URL for the object.
og:description	Optional descriptive text that is generally recommended.

Tags belong in the page’s <head>. The protocol also permits multiple values for a property. When conflicting values are present, the first tag takes precedence. og:image supports structured properties including width, height, MIME type, and alt text.

Install and choose an extension

1. Use your browser’s official add-on store.
2. Search for an Open Graph checker that lists field values and provides a visual preview.
3. Confirm that the extension supports your browser. A Chrome listing and a Firefox listing reviewed for this guide are separate products; support in one store does not imply support in the other.
4. Review the extension’s permissions and publisher information before installing it.

The Chrome Open Graph Checker listing describes previews for image, title, and description, plus missing-field checks. It also claims to read live rendered pages, including JavaScript-generated metadata and localhost or login-protected pages. That is the extension publisher’s claim, so verify the behavior you need. The Firefox Open Graph Checker listing describes a toolbar preview and an Open Graph checklist.

Preview a page step by step

1. Open the exact URL and state. Use the production URL, staging URL, or authenticated page you intend to share. A different route, query string, locale, or logged-in state can produce different metadata.
2. Activate the extension. Click its toolbar button or use its documented command while the target page is active.
3. Read the core fields. Check og:title, og:type, og:image, and og:url. Check og:description as well.
4. Inspect the visual card. Look for a missing image, an unexpected crop, stale copy, a title that is too long for the design, or a URL that points to the wrong page.
5. Compare with source markup. If a value is missing or surprising, inspect the page source or the rendered DOM and confirm the extension is showing the same document.
6. Fix and recheck. Update the head tags, deploy the change, reload the page, and run the extension again.

Minimal markup to validate

<head>
  <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.jpg">
  <meta property="og:description" content="A concise description of the article.">
</head>

Use an absolute URL for the image and canonical URL so the value is unambiguous to tools that fetch the page. If you provide repeated values, put the preferred value first.

What to check in the preview

Check	What a problem looks like	What to do
Title	Browser title appears instead of the intended share title.	Correct og:title in the head.
Description	Text is missing or unrelated to the page.	Add or correct og:description.
Image	Broken image, wrong asset, or unexpected composition.	Fix og:image and confirm the URL serves the intended file.
URL	Preview points to a staging URL, redirect, or duplicate route.	Set og:url to the canonical page URL.
Type	Object type does not match the content.	Set the appropriate og:type.

JavaScript-rendered and protected pages

Extensions do not all inspect pages the same way. Some read the initial HTML; others claim to inspect the live rendered page. If your framework inserts tags with JavaScript, or if the page requires a login, check the specific extension listing for that capability and verify the result against the rendered DOM. Do not assume that an extension that works on a static page will see client-rendered metadata.

Common errors and fixes

Symptom	Likely cause	Fix
No fields are shown	The extension is not active on the target tab, or the page has no Open Graph tags.	Activate it on the correct tab, then inspect the head and add the required tags.
Values differ from your template	Server-side and client-side rendering produce different head markup.	Compare initial HTML with the rendered DOM and use an extension that supports the rendering mode you need.
The wrong image appears	Wrong og:image, repeated values in the wrong order, or a stale preview.	Check every repeated image tag, put the preferred one first, and reload after deployment.
Preview shows staging data	The page or og:url still references staging.	Open production and correct the canonical metadata.
Login page is previewed	The extension fetched a public response or cannot access your authenticated session.	Confirm the extension’s protected-page support and test while logged in.
Social result still differs	The extension preview is not the social platform’s crawler, cache, or renderer.	Use the extension to validate markup, then verify the destination platform separately.

Reliability, privacy, and performance notes

• Reliability: A preview reflects what the extension can read at that moment. Redirects, authentication, JavaScript timing, and duplicate tags can change the result.
• Cache: This research does not establish any platform’s cache refresh rules. A corrected page may not immediately change an already fetched share.
• Security: Install extensions from the browser’s official store and review permissions. The cited listings describe features, not independent security audits.
• Performance: For a single page, the extension is usually the quickest inspection path. For many URLs, automate collection or capture so you can compare results consistently.

Or skip the browser setup

When you need a visual capture of the rendered page in addition to checking its metadata, ScreenshotNeo provides a one-request screenshot API. See the ScreenshotNeo API docs for all options.

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

import 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}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing status. It also offers an MCP server for AI agents, including Claude and Cursor. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for the free plan.

FAQ

Does an extension prove what LinkedIn, Slack, or another platform will show?

No. It shows the metadata and preview behavior implemented by that extension. Platform crawler, cache, and rendering behavior were not verified here.

Are all five tags required?

The protocol defines four basic properties: og:title, og:type, og:image, and og:url. og:description is optional but generally recommended.

Can one page have multiple Open Graph images?

Yes. The protocol allows repeated values; when values conflict, the first is preferred.

Why would a browser extension show different data after deployment?

The URL may redirect, JavaScript may change the head, authentication may differ, or the extension may read a different representation of the page.

Can ScreenshotNeo read my Open Graph tags?

ScreenshotNeo’s endpoint returns a rendered screenshot or PDF. Use an Open Graph extension or inspect the document head for tag values, then use ScreenshotNeo when you need a clean visual capture of the page.