Yoryantra
Home/Tools
← Back to Tools

Open Graph Preview Checker

Check Open Graph tags from HTML, preview social sharing metadata, and inspect Twitter card fields directly in your browser.

Paste page HTML to check Open Graph and Twitter card tags. This tool does not fetch remote URLs, so your HTML stays in the browser.

Open Graph Report

Open Graph check results will appear here.

Check Open Graph Tags Before Sharing a Page

Open Graph tags describe how a page may appear when its link is shared on social platforms, messaging apps, and other services that build link previews. Important fields include og:title, og:description, og:image, og:url, and og:type.

This Open Graph checker reads pasted HTML, extracts the available tags, creates a clean social preview, checks Twitter card metadata, and reports common missing or weak fields. Everything runs locally in your browser.

How to Use the Open Graph Checker

  1. Copy the HTML source from the page you want to inspect.
  2. Paste the source into the HTML input box.
  3. Click Check Open Graph.
  4. Review the social preview and extracted Open Graph fields.
  5. Check the warnings and suggestions in the report.

This tool checks pasted HTML only. It does not fetch a live URL, which keeps the source code in your browser.

Open Graph Tags Checked by This Tool

  • og:title: the headline used for the shared page.
  • og:description: the summary shown below the title.
  • og:image: the image URL used in the link preview.
  • og:url: the preferred sharing URL for the page.
  • og:type: the content type, such as website or article.
  • og:site_name: the website or brand name.
  • Twitter card tags: card type, title, description, and image.

Common Open Graph Problems

  • Missing og:title or og:description values.
  • No og:image for the social preview.
  • A relative image path instead of an absolute URL.
  • A title or description that is too long for a clear preview.
  • No og:url or og:type value.
  • Missing Twitter card metadata.
  • Preview text that does not match the actual page content.

Example HTML with Open Graph Tags

<!doctype html>
<html lang="en">
<head>
  <title>Yoryantra | Practical Tools for Everyday Work</title>
  <meta name="description" content="Simple browser tools to help you format, convert, check, clean, validate, and prepare things quickly.">

  <meta property="og:title" content="Yoryantra | Practical Tools for Everyday Work">
  <meta property="og:description" content="Simple browser tools for everyday work.">
  <meta property="og:image" content="https://yoryantra.com/og-image.png">
  <meta property="og:url" content="https://yoryantra.com/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Yoryantra">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Yoryantra | Practical Tools for Everyday Work">
  <meta name="twitter:description" content="Simple browser tools for everyday work.">
  <meta name="twitter:image" content="https://yoryantra.com/og-image.png">
</head>
<body>
  <h1>Yoryantra</h1>
</body>
</html>

Why a Social Preview May Look Different

Social platforms may crop images, shorten text, cache older metadata, or apply their own layout rules. This checker shows a practical browser preview based on the tags in your HTML, but it cannot guarantee an exact platform-specific result.

After changing Open Graph tags on a live page, some platforms may continue showing an older cached preview until they refresh the page metadata.

Frequently Asked Questions

What does an Open Graph checker do?

It reads HTML and extracts Open Graph metadata so you can inspect the title, description, image, URL, type, site name, and common issues.

What is an Open Graph preview?

It is a visual representation of how a shared page may appear using its Open Graph title, description, image, site name, and URL.

Does this test a live URL?

No. Paste the page HTML into the tool. It does not make a request to the live website.

Can it check Twitter card tags?

Yes. The report checks twitter:card, twitter:title, twitter:description, and twitter:image.

Why is my social image not appearing?

The tag may be missing, the image URL may be relative or inaccessible, or the platform may still be using cached metadata.

Is my HTML uploaded anywhere?

No. The Open Graph check runs directly in your browser.