Skip to content
TurboIndex

Open Graph Preview

Enter a URL to see the link card that chat apps and social networks will build from its Open Graph tags.

How link previews are built

When someone pastes your link into a chat or a post, the app sends a bot to fetch the page. The bot reads a handful of meta tags in the <head> and builds a card from them: an image, a title, a line or two of description and the domain. It does not run JavaScript and it gives up quickly, so the tags must be in the HTML your server sends.

This tool does the same fetch and draws two generic cards: the large image layout used when a big enough image is available, and the compact layout with a small square thumbnail. The exact fonts and crop differ between apps, but the content comes from the same tags everywhere.

The tags that matter

  • og:title: the headline of the card. Leave out the brand suffix you use in the title tag. Shorter is safer, since long titles are cut after two lines.
  • og:description: one or two sentences. Many layouts show only the first line.
  • og:image: an absolute https URL to a 1200x630 JPG or PNG. This is the tag that makes the biggest visible difference.
  • og:url: the canonical address of the page.
  • og:site_name and og:type: optional, cheap to add.
  • twitter:card: set to summary_large_image to request the large layout where that tag is read.

Fallbacks

If an og: tag is missing, the tool shows what most apps would fall back to: the twitter: equivalent, then the <title> tag and the meta description. Under the preview you can see which source each field came from.

Image checks

The image is loaded directly in your browser from its own URL, so a broken or blocked image shows up as broken here too. Once it loads we report the real pixel size and compare it with the 1200x630 recommendation. Relative image paths are resolved for the preview and flagged, because not every bot resolves them.

Next steps

Generate a full tag set with the meta tag generator, then review everything in the head with the meta tags analyzer. If the page is new, a good preview only helps once people can find it: TurboIndex submits new pages from your sitemap to Google and tracks whether they get indexed.

Questions and answers

What size should an og:image be?

1200x630 pixels is the size that works almost everywhere. It has a ratio of 1.91:1, which matches the large card layout, and enough pixels to stay sharp on phones. Keep the important content near the centre because some apps crop to a square.

I changed my tags but the old preview still shows. Why?

Apps cache link previews, often for days. This tool always fetches the live page, so if the preview here is right your tags are right. Most large platforms offer a debugger or a re-scrape option for developers. In chat apps, adding a throwaway query string such as ?v=2 to the link forces a fresh preview.

Do I need Twitter card tags if I already have Open Graph tags?

Only one: twitter:card, usually set to summary_large_image. When twitter:title, twitter:description and twitter:image are missing, the og: values are used instead.

Do Open Graph tags help rankings on Google?

Not directly. Google does not use them as a ranking signal. They affect how many people click your link when it is shared, and Google may use og:image as one candidate for thumbnails in Discover.

Why is my image not showing in the preview?

The usual causes: the URL is relative and the bot did not resolve it, the image is blocked by robots.txt or hotlink protection, it is served over http on an https page, or the tags are added by JavaScript that preview bots never run.