SEO

Open Graph Preview: Check og Tags and Link Cards

Open graph preview in your browser: paste a page, check every og tag against the protocol and see a link card for Facebook, LinkedIn, and chat apps.

Use the Open Graph Preview: Check og Tags and Link Cards

Paste a page to see its Open Graph preview

The page reads the Open Graph tags, checks them against the protocol and what Meta and LinkedIn ask for, and draws an approximate preview. Nothing is fetched, so it works for a page that is not online yet.

Everything runs in your browser. What you enter is never uploaded or stored.

When someone shares a link, Facebook, LinkedIn, WhatsApp, Slack, and many other apps do not show the page. They read a few meta tags in its head, the Open Graph tags, and draw a card from them: an image, a title, a line of text, and the domain. If a tag is missing, written the wrong way, or points to an image that cannot be loaded, the card is small, empty, or wrong, and it is wrong in front of everyone who sees the link. Most checkers need a live URL, and they show you what the site cached last week.

This page works on the text you paste. Paste the HTML of the page, or just its head, and it reads every tag, compares them with the Open Graph protocol and with what Meta and LinkedIn ask for, and draws an approximate card for each. You can also choose the image itself, and it checks the size, the ratio, the weight, and the type. Everything is done in your browser, the code behind the page makes no network requests, and a page that is not published yet can be checked as well as one that is.

How to use the Open Graph Preview: Check og Tags and Link Cards

  1. Paste the page or its headPaste the HTML of the page, or only what is between the head tags. The page reads the meta tags, the link tags, and the title, wherever they are in the text, and it ignores scripts and comments.
  2. Choose the image, if you have itPick the image file that og:image points to. The page reads its type from the first bytes of the file, not from its name, and measures it in your browser. It then checks the size, the ratio, and the weight against what Meta and LinkedIn document. The file is not uploaded.
  3. Read the cardsThree cards show what goes where: the large Facebook card, the LinkedIn card, and the small card of a chat app. They are approximations, so use them to see that the right title, text, and image are in the right place, not to judge the pixels.
  4. Fix the errors, then the warningsAn error is something that the protocol requires and that is missing or unusable. A warning is something that works in some places and fails in others. Press the line button to jump to the tag in your text. When the page is fixed, ask each platform to read it again, because they keep what they saw.

What the Open Graph tags are

The Open Graph protocol was started by Facebook in 2010, and it is published at ogp.me. It describes a page as an object, with meta tags in the head that have a property name starting with og:, such as <meta property="og:title" content="…">. The protocol requires four: og:title, og:type, og:image, and og:url. It lists others as optional, among them og:description, og:site_name, og:locale, and the tags for audio and video.

The tags are used by Facebook, Instagram, LinkedIn, Pinterest, WhatsApp, Slack, Discord, Telegram, and many other apps that show a preview of a link. X reads its own twitter: tags first and falls back to the Open Graph tags for the title, the description, and the image, which is why one set of tags often serves two kinds of card. The page for X cards is a separate page on this site, because X has its own rules.

The image, which matters most

The image is most of a card. It has to be an absolute address, with https:// and the host, because a crawler does not know the host of a relative address and will not guess. It has to be a raster image, so JPEG, PNG, WebP, or GIF, because Facebook, LinkedIn, and X do not draw SVG. And it has to be reachable by a crawler: an image behind a login, or one that a firewall blocks for unknown visitors, is an image that the card does not have.

The size is the next thing. Meta's documentation asks for images of at least 600 pixels wide, recommends about 1200 by 630 pixels, and says that a smaller image is shown as a small card with the image at the side. LinkedIn asks for 1200 by 627 pixels for its large preview, and shows an image under 401 pixels wide as a small thumbnail. Both favour a ratio of about 1.91 to 1, and they crop other shapes. The page checks these numbers for the file you choose, and for the width and the height that the tags give.

The tags og:image:width and og:image:height are there so that a crawler does not have to download the image to know its size. Meta recommends them, because the first time that a link is shared the image can otherwise be missing from the card. The page reports their absence as a note. The tag og:image:alt describes the image for people who cannot see it. If a page has several images, each og:image starts a new one and the og:image: tags that follow belong to it. The page reads them that way.

Mistakes that are easy to make

The first is name instead of property. The protocol uses property, and some crawlers accept both, but not all do, so the page warns about it. The second is a tag that comes after the start of the body, which happens when a script or a plugin writes the tags late. Crawlers read the head, so such a tag is probably ignored. The third is a tag that appears twice, such as two og:title tags written by a theme and by a plugin. Crawlers use one of them, and it is usually the first, so the page names the line of each.

The fourth is og:url. It is the permanent address that the page is known by, and the number of likes and shares is counted for it. If it differs from the canonical link of the page, for example because it has a tracking parameter, the counts can be split and the preview can be built from a page that is not the one that you meant. The page compares the two and warns, ignoring a slash at the end. The fifth is og:type: a value that is not one of the types in the protocol, such as blog, is reported, and the right one for a blog post is article.

Why the preview does not update

Platforms keep what they read. Facebook, LinkedIn, and the others fetch your page when a link is first shared and keep the result, so a change to the tags is not seen until they read the page again. Facebook has a Sharing Debugger and LinkedIn has a Post Inspector, and both read a page again when you ask them. Chat apps keep their own copies, and some of them cannot be told to refresh.

This is a reason to check the tags before the page is public. A tag that is wrong on the first share is the one that is kept. This page does not need the page to be published, because it reads the text you paste. It cannot tell you what a platform has saved, and it cannot ask the platform to refresh. For that you need the platform's own tool.

What the cards show, and what they do not

The cards on this page show the place of each part: where the image goes, how many lines of title and text are shown, and where the domain is. They use the title from og:title, the text from og:description, the domain from og:url, and the image that you chose, or its address if you chose none. They are not copies of what the sites draw. Each site changes its design from time to time, cuts text where it likes, and crops an image to its own shape.

The page does not load the image that the tag points to. That would be a network request, and it would tell the host of the image that you looked at it. If you want to see a real image in the card, choose the file, and it is shown from your device.

How it was tested

The part that reads the tags was compared with a mature parser. A set of 349 heads was generated with the kinds of thing that real pages have: tags in single and double quotes, without quotes, with entities, over several lines, with comments around them, with a script that holds a string that looks like a tag, and with tags after the start of the body. The same text was read by the HTML parser in lxml, and the page found the same 2,259 meta, link, and title tags, with the same attributes, in every one of them.

The image reader was tested on real files made by Pillow: a still and an animated PNG, GIF, and WebP, a JPEG, two SVG files, and a text file with an image name. The type and the animation were found for all of them. The rules in the checks were written from the sources listed below and are tested on written examples. The cards were not compared with the real ones on each site.

Limits and accuracy

  • The page reads the text that you paste. It does not fetch a URL, so it cannot see tags that a script adds after the page loads, and it cannot tell whether a crawler can reach your image.
  • It checks the tags and a file you choose. It does not know what Facebook, LinkedIn, or any other site has saved. To make a site read the page again, use its own tool, the Sharing Debugger or the Post Inspector.
  • The cards are approximations of where things go. Each site changes its design and cuts text and crops images in its own way, and the page cannot match that.
  • The size rules are the ones that Meta and LinkedIn publish in their help pages, which were read on 4 October 2026. They change from time to time, and a platform may show a card that its documentation says it will not.
  • Only the tags that the protocol and the platforms document are checked. A tag for a feature that is not documented, such as a custom property, is listed and not judged.
  • A page and an image are never uploaded, but the text you paste is not saved either, so copy the report before you close the page.

Frequently asked questions

How do I check my Open Graph tags?

Paste the HTML of the page, or only its head, on this page. It reads the tags, tells you which of the four that the protocol requires are missing, finds the common mistakes, and draws an approximate card for Facebook, LinkedIn, and chat apps.

Which Open Graph tags are required?

The protocol requires og:title, og:type, og:image, and og:url. In practice, add og:description too, because Facebook and LinkedIn use it for the text of the card, and og:image:width and og:image:height so that the image loads the first time a link is shared.

What size should an og:image be?

Meta recommends about 1200 by 630 pixels and asks for at least 600 pixels wide. LinkedIn asks for 1200 by 627 pixels and shows an image under 401 pixels wide as a small thumbnail. Both favour a ratio of about 1.91 to 1 and crop other shapes.

Why does Facebook or LinkedIn still show the old preview?

Because they keep what they read the first time a link is shared. After you fix the tags, ask the platform to read the page again with Facebook's Sharing Debugger or LinkedIn's Post Inspector. Chat apps keep their own copies.

Can I use an SVG as my og:image?

No. Facebook, LinkedIn, and X need a raster image, such as JPEG or PNG. The page reports an SVG address as a warning, and an SVG file that you choose as an error.

Should og:url be the same as the canonical link?

Yes, in nearly every case. og:url is the address that likes and shares are counted for, and a difference between it and the canonical link, such as a tracking parameter, can split the counts. The page warns when they differ.

Does it work for a page that is not online yet?

Yes. It works on the text that you paste, so a staging page, a template, or a draft can be checked before anyone shares it. That is the best time, because a platform keeps what it reads the first time.

Is my page or my image uploaded?

No. The text is read in your browser, the image is measured in your browser, and the code behind the page makes no network requests. Nothing is saved.

Research and references

This page was written and checked against the sources below.

  1. The Open Graph protocol
  2. Meta for Developers: Sharing best practices for webmasters
  3. Meta for Developers: Sharing Debugger
  4. LinkedIn Help: Optimize your link previews
  5. LinkedIn Post Inspector