ScreenshotNeo

BlogGuides

Meta Tag Analyzer: Check Page Metadata and Social Preview Fields

Learn how to inspect HTML meta tags, validate Google and social fields, and diagnose previews that differ across platforms.

By the ScreenshotNeo team30 September 20268 min read

Meta Tag Analyzer: Check Page Metadata and Social Preview Fields

A meta tag analyzer reads the metadata exposed by a page, reports each field and value, and may simulate a search or social preview. It cannot force Google, X, Facebook, LinkedIn or another client to display a particular title, description or image. The reliable workflow is to inspect the raw HTML first, compare the fields with each platform’s documented rules, then use the receiving platform’s own inspection tool when a preview still looks wrong.

What a meta tag analyzer checks

Meta tags normally live inside the document’s <head>. They describe the document to search engines, browsers, crawlers and sharing clients. A checker usually fetches a URL, parses the returned HTML, groups tags by purpose and flags missing, duplicate or malformed values.

Area Typical fields What the report tells you
Document basics title, charset, viewport Whether the page declares a usable title, encoding and mobile viewport.
Search controls description, robots, googlebot Which values are exposed to crawlers and whether indexing or snippets are restricted.
Open Graph og:title, og:type, og:image, og:url, og:description, og:image:alt The page data commonly used to build social graph cards.
X cards twitter:card, twitter:title, twitter:description, twitter:image Explicit X values, plus values that may fall back to Open Graph.

A report is evidence of the markup returned to the analyzer. It is not evidence that every crawler can reach the URL, that JavaScript-rendered tags will be seen, or that a platform’s cached card has been refreshed.

Google meta tags and search snippets

Google documents supported meta tags and attributes in its Search Central documentation. It may use a page’s description meta tag for a search snippet in some situations, but the tag does not guarantee that exact wording will appear. Google can ignore unsupported tags. The meta keywords tag has no effect on Google Search indexing or ranking.

A metadata checker reads the head, while each receiving platform decides how to render it.
A metadata checker reads the head, while each receiving platform decides how to render it.

Check these values in the raw head:

<meta name="description" content="A concise summary of this page.">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

Also check the canonical link, language declarations and HTTP headers because an analyzer that only lists meta elements cannot show every indexing signal. A noindex directive in an HTTP X-Robots-Tag header, for example, is outside the HTML meta list.

Google Search Central says: “To check the meta tags and attributes on your pages, use the URL Inspection Tool.” Use that tool when you need Google’s view of the fetched page rather than a generic parser’s result. Google’s supported-meta documentation is the primary reference for fields Google recognizes.

Open Graph fields for social previews

Open Graph is a protocol for describing a URL in social graph displays. The core fields are:

<meta property="og:title" content="Readable page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/images/card.jpg">
<meta property="og:description" content="A useful summary for sharing.">
<meta property="og:image:alt" content="Description of the preview image">

Use an absolute, publicly fetchable image URL. Keep the image available without an authenticated session, and return the correct image content type. Add og:image:alt so clients have a textual description of the image. The Open Graph protocol specification defines these properties and their relationships.

Analyzers often show a simulated card beside the parsed values. Treat that card as a debugging aid. The receiving service can apply its own image dimensions, truncation, safety checks, cache and fallback rules.

X/Twitter card metadata

X card tags use the twitter: prefix. A minimal implementation is:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Readable page title">
<meta name="twitter:description" content="A useful summary for sharing.">
<meta name="twitter:image" content="https://example.com/images/card.jpg">

Some implementations fall back to Open Graph values for fields that are not supplied with a twitter: equivalent. That behavior is described in the cited implementation guidance, not a promise that every current or future X client will behave identically. Define both sets when the wording or image should be controlled independently. web.dev’s metadata guidance explains the relationship between Open Graph and Twitter-prefixed fields: web.dev metadata guidance.

Inspect a page yourself with browser tools

  1. Open the target URL in a browser.
  2. Choose View Source, not only the live DOM inspector. View Source shows the initial HTML response.
  3. Search for <title>, description, robots, og: and twitter:.
  4. Open DevTools Network, reload the page, and inspect the document response. Confirm the response status, redirects and content type.
  5. Check the image URL directly in a private window. A 200 response and an image content type are useful basic checks.
  6. Use the platform’s own debugger or URL inspection tool after correcting the markup, because cached previews can outlive the HTML change.

Server-rendered tags are the safest choice. If a framework inserts metadata only after client-side JavaScript runs, a simple fetch-based analyzer may report it as missing. Compare the raw response with the rendered DOM before changing templates.

Build a small analyzer with JavaScript

The following browser-console script lists common fields from the currently rendered document. It is useful for a quick local check, but it does not replace a crawler request or platform debugger.

const selectors = [
  ['title', 'document.title'],
  ['description', 'meta[name="description"]'],
  ['robots', 'meta[name="robots"]'],
  ['og:title', 'meta[property="og:title"]'],
  ['og:description', 'meta[property="og:description"]'],
  ['og:image', 'meta[property="og:image"]'],
  ['og:url', 'meta[property="og:url"]'],
  ['twitter:card', 'meta[name="twitter:card"]'],
  ['twitter:title', 'meta[name="twitter:title"]'],
  ['twitter:image', 'meta[name="twitter:image"]']
];

const report = Object.fromEntries(selectors.map(([name, selector]) => {
  if (selector === 'document.title') return [name, document.title || null];
  const nodes = [...document.querySelectorAll(selector)];
  return [name, nodes.map(node => node.content || node.getAttribute('content') || '')];
}));
console.table(report);

For production auditing, add checks for duplicate fields, empty content, relative URLs, non-HTTPS images, redirects, response status, robots headers and HTML size. Store the fetched HTML and timestamp with each report so a later comparison can distinguish a template change from a platform cache.

Common analyzer findings and fixes

Finding Likely cause Fix
Missing description The template omits it or JavaScript adds it after load. Render a useful description in the initial HTML head.
Duplicate Open Graph titles Two layout components emit the same property. Keep one authoritative tag and remove the duplicate.
Social image does not appear Image URL is private, blocked, redirected, invalid or cached. Serve a public absolute URL, verify status and content type, then re-run the platform debugger.
Analyzer sees old values The analyzer or receiving platform cached the URL. Confirm current View Source, purge the relevant cache where possible and allow recrawling.
Google shows different snippet Google selected page text instead of the description. Improve the description and visible copy; do not assume the meta value is guaranteed.
Tags exist in DevTools but not View Source Client-side rendering inserted them. Move critical metadata into server-rendered or statically generated HTML.
Twitter card falls back unexpectedly A Twitter-specific field is absent or unsupported by the client. Provide explicit twitter: values and retain valid Open Graph fallbacks.

Reliability, performance and edge cases

Run checks against canonical production URLs, with redirects enabled and a realistic user agent. A page protected by a bot challenge may return a challenge document rather than your HTML. Login-only pages expose different metadata to different sessions. Localhost, private IPs and firewalled image hosts cannot be fetched by public crawlers.

For a large site, sample templates and changed URLs first. Cache reports by URL and content hash, use request timeouts, and retry transient 5xx responses with backoff. Avoid crawling every URL on every deploy. Compare fields structurally so a change to one image URL is visible without treating the whole document as unrelated.

Metadata parsing is inexpensive compared with browser rendering, but JavaScript execution, large pages and remote images increase latency. A static HTML fetch is appropriate for server-rendered metadata. Use a real browser capture when the question includes rendered layout, consent overlays, lazy content or a screenshot.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. The do-it-yourself analyzer above checks markup; ScreenshotNeo is useful when you also need a dependable visual record of the page after it renders. It accepts one GET request and returns PNG, JPEG, WebP or PDF. Before capture it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets. Each step can be turned off.

Visual capture can document the rendered page after overlays are removed.
Visual capture can document the rendered page after overlays are removed.

Only clean shots are billed. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server supplies take_screenshot, get_page_info and capture_pdf tools to Claude, Cursor and other MCP clients.

See the ScreenshotNeo API documentation for all options. A minimal capture looks like this:

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

Relevant capture options include full-page screenshots with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or any viewport, retina scale, custom CSS and JavaScript, clicks, selector or network-idle waits, blocked ads or resource types, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTL, signed image links, asynchronous jobs with signed webhooks, bulk capture of 100 URLs per call and a usage API. PDF options include paper size, margins, landscape mode and page ranges. Parameter names used by other screenshot APIs also work, which can simplify migration.

The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is on every plan. Create a free ScreenshotNeo account and try the API with no card.

Short FAQ

Does a meta description control rankings?

No. Google may use it for a snippet, but it is not a guarantee of displayed text and it is not a direct ranking control.

Should I remove meta keywords?

You can remove them for Google-focused work; Google says the tag has no effect on Search indexing or ranking.

Do Open Graph tags affect Google snippets?

They describe social graph displays. Use the search-oriented fields and Google tools for Search behavior.

Why does a checker disagree with a social preview?

The services may fetch different HTML, use different user agents, or hold different cached values. Check the raw response and the receiving platform’s debugger.

Can an analyzer prove what every user will see?

No. It reports exposed metadata and may simulate a card; each client controls fetching, caching, truncation and rendering.