Open Graph Checker – Complete Guide to og: Tags, Twitter Cards and Link Previews

A colleague pastes your new article into a chat and the preview shows the cookie banner text, no image and a title that ends mid-word. Or a marketing campaign goes live and every share on social media uses last year’s logo. Both problems come from the same few meta tags, and both are hard to debug by staring at the page in a browser, because the preview is built from tags you cannot see on screen.

The Open Graph Checker reads a page’s Open Graph (og:*) and Twitter Card (twitter:*) tags, shows which values a preview would actually use — including the fallbacks to the page title and meta description — and flags missing, relative or invalid values. You can fetch a live page or paste HTML that is not yet published.

What is Open Graph?

In simple terms

Open Graph is a set of meta tags that tells other apps how to present your page as a card: the headline, a short description, an image, the canonical address and the site name. When someone shares a link, the app fetches the page, reads those tags and draws the card. If the tags are missing, each app guesses — usually from the HTML title and description — and the guesses differ.

Technical background

The Open Graph protocol (documented at ogp.me) defines tags written as <meta property="og:title" content="…"> in the document head. The four basic properties are og:title, og:type, og:image and og:url; og:description and og:site_name are optional but widely used. Structured properties extend a value, for example og:image:width, og:image:height and og:image:alt. Many sites write name="og:…" instead of property=; most consumers accept both.

X/Twitter uses its own twitter:* names with name= attributes. The key one is twitter:card, whose valid values are summary, summary_large_image, app and player. For title, description and image, X/Twitter falls back to the Open Graph values when twitter:title, twitter:description or twitter:image are absent.

Preview bots fetch the page with their own user agents, generally do not execute JavaScript, follow redirects, and then fetch the image separately. They also cache the result, which is why changes do not appear immediately.

Why use an Open Graph checker?

• Missing or wrong images. A relative og:image, an http:// image on an https:// page, or an image that is too small leads to cards without pictures.
• Truncated or wrong titles. Seeing the exact value — and whether it came from og:title or a fallback — tells you which tag to fix.
• Duplicate tags. Templates and plugins sometimes emit two og:title tags; apps usually take the first, which may not be the one you edited.
• Pre-publication review. Paste the HTML of a staging page and check the card before it goes live.
• Short links and redirects. When a shared link redirects, the preview is built from the final page; checking that page shows what people will actually see.

Who should use it?

• Web developers and theme or CMS plugin authors who generate the head section.
• Content editors and social media managers preparing posts.
• SEO specialists reviewing metadata together with the Meta Tag Analyzer.
• Anyone whose links look wrong in chat apps.

How the Open Graph checker works

Fetch mode. Your browser sends the URL to the NetTools.tech server, which requests the page with an identified NetToolsBot user agent. The request goes through the same SSRF protection as the other web tools: only public http/https addresses on ports 80, 443, 8080 and 8443, every redirect re-checked, up to 10 redirects, a 10-second timeout per request and at most the first 2 MB of HTML. If the response is not HTML, the checker tells you the status and content type instead of guessing. The server returns the HTML to your browser and does not store it; it never downloads the image.

Paste mode. The HTML you paste is analyzed only in your browser. An optional Page address is used to resolve relative URLs (for example a relative og:image) and to fill the URL fallback. Nothing is uploaded.

Analysis. In both modes the HTML is parsed inertly with the browser’s DOM parser: scripts never run and no images, stylesheets or frames are loaded. The checker collects every og:* and twitter:* value in document order and builds the preview values with these fallbacks:

How to use the NetTools.tech Open Graph Checker

1. Open the Open Graph Checker.
2. Choose Fetch page URL and enter the address, for example https://www.example.com/article, or choose Paste HTML and paste the page source (View source in your browser).
3. In paste mode, optionally fill Page address so relative URLs can be resolved. Load example fills in a sample page with deliberate mistakes.
4. Press Check Open Graph.
5. Review the Previews. Click Load image if you want to see the actual image; it is not loaded automatically.
6. Work through Values used and Checks, then compare with the full Social tags table.

Understanding the results

Example: a page with a relative image

Using Load example in paste mode, the page address is https://www.example.com/guides/network-monitoring/ and the head contains, among other tags:

<meta property="og:type" content="article">
<meta property="og:title" content="Network Monitoring Guide">
<meta property="og:url" content="https://www.example.com/guides/network-monitoring/">
<meta property="og:image" content="/images/monitoring-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example Company">
<meta name="twitter:card" content="summary_large_image">

The Values used list shows the image resolved against the page address as https://www.example.com/images/monitoring-guide.png, and the image size as 1200 × 630. The Checks list nevertheless reports an error for og:image: it must be an absolute URL, because many apps ignore relative image paths. The fix is to write the full https://www.example.com/images/monitoring-guide.png in the tag. twitter:card is reported as a valid card type, and the image size is fine.

Common use cases

• Checking every new blog post template once before rollout.
• Reviewing staging pages behind a VPN: copy the HTML and use paste mode, since the server cannot reach private addresses.
• Debugging why a link shared through a URL Shortener shows the wrong preview: check the final destination after following the Redirect Checker chain.
• Auditing a CMS plugin that might emit duplicate tags.
• Making sure product pages declare image dimensions and alt text.

Troubleshooting

“The server did not return an HTML page”

The URL answered with a non-HTML content type or an error status. Some sites block automated requests or serve a challenge page to bots. Check the URL in the HTTP Status tool, or paste the page source instead.

Fetch fails or times out

The site did not answer within 10 seconds, resolves to a private address, uses a port other than 80, 443, 8080 or 8443, or refused the connection. Paste mode works without any server request.

Tags are in the browser but not in the checker

They are added by JavaScript after the page loads. Render the tags on the server (or prerender the head) so preview bots see them too.

The preview in an app still shows old content

The app cached the earlier preview. Use the platform’s refresh or debugging feature if it has one; otherwise wait. Changing the URL (for example a new query parameter) forces a new fetch in many apps but creates a different URL.

The image does not load after clicking “Load image”

The host refuses hotlinking, needs cookies, uses http:// on a mixed-content page, or the file does not exist. Preview bots will likely have the same problem; open the image URL directly to check.

Common mistakes

• Writing a relative path in og:image.
• Using an image much smaller than the card, which apps either upscale or replace with a small thumbnail.
• Forgetting twitter:card, so X/Twitter shows a small card even with a large image available.
• Leaving two sets of tags from a theme and an SEO plugin.
• Pointing og:url at a different page than the canonical URL; apps treat og:url as the identity of the shared object.
• Expecting changes to appear instantly in apps that cache previews.

Limitations

• The previews are generic illustrations; real apps crop images, shorten text and apply their own rules.
• The server fetches with the NetToolsBot user agent. Sites that serve different HTML to specific preview bots may show those bots something else.
• JavaScript is not executed, so script-inserted tags are not seen.
• Only the first 2 MB of HTML are read; tags placed after that point are missed.
• The checker does not download the image, so it cannot verify that the file exists, its real pixel size or its file size; it checks the declared values.
• It does not check platform-specific extensions beyond og:* and twitter:*, and it cannot see or clear any app’s preview cache.
• Pages on private networks cannot be fetched; use paste mode for those.

Security & privacy

In fetch mode the URL is sent to the NetTools.tech server, which fetches the page and returns its HTML to your browser; neither the URL nor the page is stored. The server never contacts the image host. In paste mode nothing leaves your browser. If you click Load image, your browser contacts the image host directly (without a referrer), which reveals your IP address to that host — that is why images are not loaded automatically.

Do not paste HTML from pages behind a login that contain personal data or session tokens; you only need the head section for this check.

Related tools

• Meta Tag Analyzer — title, description, canonical, robots and hreflang tags. Guide: Meta Tag Analyzer guide.
• URL Shortener — short links redirect to the page whose tags build the preview. Guide: URL Shortener guide.
• Redirect Checker — see which final page a shared link lands on. Guide: Redirect Checker guide.
• Page Size Checker — check how heavy the page and its images are.
• HTTP Status — confirm the page answers 200 for automated requests.
• Category overview: Web & SEO tools guide.

Summary

Link previews are built from a handful of og:* and twitter:* tags, with fallbacks to the page title and description when they are missing. The Open Graph Checker shows which values a preview would use, where each value came from and which tags are missing, relative or invalid, from a live page or pasted HTML. It does not reproduce any app’s exact rendering or cache, so treat the previews as a structural check.