How to Inspect Social Preview Metadata in Page Source

To inspect the metadata behind a social preview, open the exact page URL, view its HTML source, and search the document head for Open Graph tags such as og:title, og:description, og:image, and og:url. Check Twitter Card tags separately. If the source does not contain the values you see in the browser, inspect the rendered DOM: JavaScript may add or change metadata after the initial HTML loads. Finally, test the URL with the relevant platform’s own preview or refresh tool, because source inspection alone cannot reveal every platform’s parsing and cache behavior.

1. Inspect the exact page’s HTML source

Copy the full URL that is being shared, including its path and relevant query parameters. Inspect that page, not just the homepage.
Open the URL in a browser and choose View Source. Common shortcuts are Ctrl+U on Windows or Linux and ⌘+Option+U on macOS; menus and shortcuts vary by browser.
In the source tab, search for og: or twitter:. The Open Graph Protocol places its metadata in the document’s <head>.
Record the tag values and compare them with the title, description, image, and destination you expect in the preview.

For example, a page might contain:

<head>
  <title>Product updates</title>
  <meta property="og:title" content="Product updates">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/updates">
  <meta property="og:description" content="News and release notes.">
  <meta property="og:image" content="https://example.com/images/updates-card.png">
  <meta property="og:image:alt" content="A product update illustration">
  <meta name="twitter:card" content="summary_large_image">
</head>

The example is illustrative; use the actual canonical page and values for your site. The protocol’s four required Open Graph properties are og:title, og:type, og:image, and og:url. og:description is optional but generally recommended. The Open Graph Protocol documentation also describes structured image properties, including dimensions, MIME type, secure URL, and alternative text.

2. Check the metadata fields that affect the card

Field	What to verify
`og:title`	The intended title is present, spelled correctly, and belongs to this page.
`og:type`	The page has an appropriate Open Graph object type.
`og:url`	The value identifies the intended page URL. Check redirects and canonical URL behavior if it differs from the shared link.
`og:description`	The description is present if you want one and does not contain stale or unintended text.
`og:image`	The URL points to the intended image and is accessible to the service fetching the page.
`og:image:alt`	Alternative text describes the image; the protocol recommends specifying it.
`og:image:width`, `og:image:height`, `og:image:type`, `og:image:secure_url`	If supplied, these structured values match the image’s actual properties and secure URL.
`og:site_name`	Set this when the site name is useful context for the card.
`twitter:card` and other `twitter:` tags	Inspect these independently where relevant. Do not assume every platform reads the same fields or applies identical fallbacks.

Do not infer that a tag is working just because it appears in source. For an image, open its URL and confirm it returns the intended image rather than an error, an HTML page, or an access-denied response. A platform may fetch the image separately from the page.

3. View Source versus the rendered DOM

View Source shows the HTML delivered for the page. It is the right first check for server-rendered metadata and helps establish what a crawler receives in the initial response.

The rendered DOM is the document after the browser has parsed the HTML and run scripts. A client-side application can insert or update meta elements after load, so the rendered DOM may differ from View Source. In browser developer tools, open the Elements or Inspector panel, expand <head>, and search for the same tags. Compare values and note whether the tags exist in both places.

If a tag exists only in the rendered DOM, a browser can see it after JavaScript runs, but that does not establish that a particular social crawler will run the same scripts or wait for them. Prefer metadata in the initial HTML when you need predictable crawler access, then validate with the platform’s own inspection tool.

4. Fetch and inspect page source from the command line

For a quick raw-source check, fetch the exact URL. This does not execute JavaScript, so it inspects the delivered HTML, not the rendered DOM.

cURL

curl -L --fail --silent --show-error \
  "https://example.com/updates" \
  -o page.html

rg -n -i 'og:|twitter:' page.html

-L follows redirects. --fail makes HTTP error responses fail the command. Replace the example URL with the page being shared.

Python

from html.parser import HTMLParser
from urllib.request import Request, urlopen

URL = "https://example.com/updates"

class MetadataParser(HTMLParser):
    def __init__(self):
        super().__init__()
        self.in_head = False
        self.tags = []

    def handle_starttag(self, tag, attrs):
        attrs = dict(attrs)
        if tag.lower() == "head":
            self.in_head = True
        if self.in_head and tag.lower() == "meta":
            key = attrs.get("property") or attrs.get("name") or ""
            if key.lower().startswith(("og:", "twitter:")):
                self.tags.append((key, attrs.get("content", "")))

    def handle_endtag(self, tag):
        if tag.lower() == "head":
            self.in_head = False

request = Request(URL, headers={"User-Agent": "Mozilla/5.0 metadata-inspection"})
with urlopen(request, timeout=30) as response:
    html = response.read().decode("utf-8", errors="replace")

parser = MetadataParser()
parser.feed(html)
for key, value in parser.tags:
    print(f"{key}: {value}")

This standard-library script prints matching meta tags from the fetched head. It follows ordinary Python URL-opening redirect behavior, but it does not run page scripts. If the server returns a challenge, compressed or unusual response, or an error, inspect the response and headers before interpreting an empty result as missing metadata.

Node.js

const url = 'https://example.com/updates';
const response = await fetch(url, {
  redirect: 'follow',
  signal: AbortSignal.timeout(30000),
  headers: { 'user-agent': 'Mozilla/5.0 metadata-inspection' },
});

if (!response.ok) {
  throw new Error(`HTTP ${response.status} ${response.statusText}`);
}

const html = await response.text();
const head = html.match(/<head\b[^>]*>([\s\S]*?)<\/head\s*>/i)?.[1] ?? '';
const metaTag = /<meta\b[^>]*>/gi;
const attribute = (tag, name) => {
  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return tag.match(new RegExp(`\\b${escaped}\\s*=\\s*(["'])(.*?)\\1`, 'i'))?.[2] ?? '';
};

for (const tag of head.match(metaTag) ?? []) {
  const key = attribute(tag, 'property') || attribute(tag, 'name');
  if (/^(og:|twitter:)/i.test(key)) {
    console.log(`${key}: ${attribute(tag, 'content')}`);
  }
}

This uses Node’s built-in fetch in supported Node versions and reads the initial HTML only. For production parsing, use an HTML parser rather than regular expressions; HTML attribute quoting, entity decoding, malformed markup, and duplicate tags make regex-based extraction limited.

5. Test the platform preview and refresh stale cards

After correcting metadata, use the inspection or refresh tool for the platform where the card is wrong. This checks the platform’s interpretation and can help distinguish a markup problem from a cached preview. LinkedIn’s Post Inspector is one example of a LinkedIn refresh option; other platforms have their own tools and rules. Tool availability and cache behavior can change, so consult the platform’s current documentation.

Submit the exact shared URL, not a nearby page or only the domain root.
Compare the preview’s title, description, image, and destination with the source values.
If the tool reports a fetch problem, verify that the page and image can be fetched by the service and inspect redirects or access controls.
After changing tags or the image, request a refresh where the platform supports it, then check again. A local source change does not necessarily replace a previously cached card immediately.

A tag checker confirms markup values; a platform preview shows what that platform currently extracts or displays. Neither should be treated as a universal guarantee for every social network.

6. Troubleshooting

Symptom	Likely cause	What to do
No Open Graph tags in View Source	Tags are missing, injected by JavaScript, or you opened a different URL than the one being shared.	Confirm the exact URL and inspect its head. Compare with the rendered DOM. For reliable initial fetches, emit the tags in the server-delivered HTML.
Tags appear in the browser but not in the source	Client-side JavaScript added them after initial load.	Inspect the rendered DOM to confirm. Check the target platform’s own inspector to see whether its crawler receives usable metadata.
Correct tags, wrong preview	The platform may use different fields or fallback rules, fetch a different URL after redirects, or display a cached result.	Use the platform-specific inspector, compare its fetched URL and parsed values, and request a refresh if available.
Wrong title or description	The value may be stale, duplicated, attached to a template, or overridden by platform parsing.	Search the whole head for duplicate Open Graph and Twitter tags. Fix the page template or route data, then recheck the platform preview.
Image is missing or wrong	The image URL may be incorrect, inaccessible to the fetcher, redirected unexpectedly, or point to content that is not an image.	Open the image URL, verify the returned content and response, and check image-related Open Graph values. Ensure the platform can fetch the URL.
Command-line fetch returns an error or no useful HTML	The server may reject the request, return a redirect or error page, or require a browser session.	Check the HTTP status and final URL, follow redirects, and compare with browser source. Do not mistake a challenge page for the page’s actual metadata.
Preview stays old after a fix	The platform may retain a cached card.	Run the platform’s refresh or inspection flow if it provides one, then verify the exact URL again. Cache timing is platform-specific.

7. Reliability, performance, and cost

Viewing source is immediate and free for a page you can access, but it only reveals the delivered HTML. A command-line fetch is easy to repeat and automate; set a timeout, inspect the HTTP status, follow redirects deliberately, and avoid interpreting blocked responses as a valid page. Rendered-DOM inspection requires a browser and is useful for JavaScript-generated metadata, but adds page load and script execution variability. Platform inspectors are the relevant final check for a specific network, with platform-specific refresh and cache behavior.

For a one-off diagnosis, start with View Source and the browser inspector. Automate raw-source checks when validating many routes or preventing regressions, and reserve browser rendering for pages whose metadata depends on client-side code. These checks make no guarantee about every crawler’s rendering behavior.

Or skip the browser setup

If your goal is to capture the page as an image while investigating a preview, ScreenshotNeo is a website screenshot API and MCP server. A GET request takes a URL and returns an image or PDF; it captures the page, while the source and DOM steps above are what reveal metadata.

One-call example (see the ScreenshotNeo API documentation for options):

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

Cookie banners are accepted and removed before the shot; newsletter popups and chat widgets are also removed. Each step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and billing status.
An MCP server lets AI agents, including Claude and Cursor, take screenshots with tools for screenshots, page information, and PDF capture.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.

FAQ

Does a browser’s View Source show the same thing as Inspect Element?

No. View Source shows the delivered HTML; the Elements or Inspector panel shows the browser’s parsed, potentially script-modified DOM.

Are Open Graph tags and Twitter Card tags interchangeable?

Do not assume so. Inspect both sets where relevant and check the target platform’s own preview behavior.

Does finding the right tags guarantee the right card everywhere?

No. Platform parsing, client-side changes, fetch access, and cached previews can affect what is displayed.

Which page should I inspect when a link includes a path?

Inspect the exact page being shared. Page-specific metadata can differ from the homepage and from other routes.

Protocol reference: Open Graph Protocol.