Open Graph Checker

The checker reads the HTML returned for a page and finds sharing tags in its <head>. Enter a public URL to check the deployed page, or paste its source HTML while the project is still on localhost. It builds approximate previews for X, LinkedIn, Facebook, Slack and Discord; each platform can render or cache a different result.

Core tags include og:title for the headline, og:description for the summary, og:image for the thumbnail, og:url for the canonical address and og:type for the kind of page. The twitter:card tag selects an X card layout; twitter:title, twitter:description and twitter:image can override OG values for X. Missing tags may cause a service to choose its own fallback.

For each supplied image, the tool downloads the file and measures its real width, height, aspect ratio and byte size. It also reports whether the file is reachable. Checks show passed, warning or missing/failed states. A warning can flag content that may be cropped or truncated, or a live-page check that remains pending. Length and size suggestions are guidance rather than universal platform rules. The generated fixes are starting points to review, not automatic edits to your site.

A 1200 × 630 pixel canvas at roughly 1.91:1 is a practical starting point for a wide link preview. It is a design recommendation, not a dimension required by the Open Graph protocol. The same artwork can be reviewed for all five previews here, but each service may crop or display it differently.

Keep your logo and essential words comfortably inside the edges. A compact JPEG or PNG is easier to deliver reliably; aim for under 1 MB when you can without making text blurry. If an X summary card needs a square thumbnail, provide a separate twitter:image and check that crop too.

For static HTML, add one set of tags inside <head>. Replace the example title, description, canonical URL and image with values for this page:

<meta property="og:title" content="Your page title">
<meta property="og:description" content="A short page summary.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

In Next.js App Router, export metadata from a page or layout. Next.js writes it into the server-rendered head. Use real strings and an image that exists at the public URL:

export const metadata = {
  title: "Your page title",
  description: "A short page summary.",
  openGraph: {
    title: "Your page title",
    description: "A short page summary.",
    url: "https://example.com/page",
    type: "website",
    images: [{ url: "https://example.com/og.png", width: 1200, height: 630 }],
  },
  twitter: { card: "summary_large_image" },
}

In WordPress, set the social image and text in the SEO plugin that already manages your metadata, such as Yoast or Rank Math. If a theme or another plugin also emits OG tags, disable the duplicate source. After any fix, deploy, inspect the returned HTML and run the URL check again.

Social crawlers cannot reach localhost on your computer. Before deployment, view the source HTML returned by your local server and paste it into the Paste HTML tab above. This checks the tags without requiring a public page. Remove secrets or private content before pasting; the source is sent to this checker for analysis.

You can also expose a development page through a tunnel or test a staging URL, then run the URL check. Keep staging addresses out of the final og:url. Local images remain unverified here unless they have public URLs. Pasted HTML proves only what you supplied, not what a deployed server returns or what a platform has cached. After launch, switch to Website URL, verify the real page and review the previews again.