Free Open Graph Preview Tool – Test OG Tags Instantly

How to Preview Your Open Graph Tags

1. Enter the title, site name and description you plan to use. The counters under the title and description show character counts as a guide, not as platform limits, and turn amber above 70 and 160 characters.
2. Add the page URL and the full image URL, including https://.
3. Choose a Twitter card type, Summary Large Image or Summary, and add your X (formerly Twitter) @handle if you have one. Leave the handle empty if you don't want a twitter:creator tag.
4. Switch between the Google, Facebook, Twitter, LinkedIn and Slack tabs to compare the mock previews.
5. Click Copy All Tags and paste the tags into the <head> of your page.

The copied tags are og:title, og:description, og:url, og:image, og:site_name, og:type and the matching twitter: tags for the card type, title, description, image and, when filled in, creator. Double quotes, ampersands and angle brackets in your text are escaped so the HTML stays valid.

What the Preview Does and Does Not Check

The previews are mock-ups built from what you type. The tool does not visit your URL or read the tags already on your page, so it cannot tell you whether a live page has missing or incorrect tags.

• Text length: titles and descriptions are cut at fixed character counts, such as 65 and 100 characters in the Facebook preview. Real platforms cut text by display width and change their layouts, so treat the cut-off as approximate.
• Images: the tool does not check the image size, file type or file size. If the image URL cannot be loaded, the preview says so instead of showing the image.
• Page type: og:type is always set to website. Edit the copied tag by hand for other content, such as article.
• Google: the Google preview uses the title and description you enter, but the copied tags do not include a <title> element or a meta description. Add those to your page separately.
• X card type: in the Twitter preview, Summary Large Image shows a wide image above the text and Summary shows a small square thumbnail beside it.

Apart from the image URL, nothing you enter is sent to a server. To show the image, your browser loads the image URL directly from the server that hosts it, as it would for any image on a web page, so that server receives the request.

Open Graph Image Size

Platforms publish their own image requirements, so check the ones that matter to you. Two examples:

• Facebook: use images of at least 1200 × 630 pixels, and keep them as close to a 1.91:1 aspect ratio as possible so the full image shows without cropping. The smallest image Facebook allows is 200 × 200 pixels.
• LinkedIn: shared link images need to be at least 1200 × 627 pixels and no larger than 5 MB, with a recommended ratio of 1.91:1.

A 1200 × 630 image meets both. X sets its own card image requirements, so check the X developer documentation if X matters for your content. Facebook also supports the optional og:image:width and og:image:height tags, which tell its crawler the image size so it can render the image straight away. This tool does not generate them, so add them yourself if you need them.

How Google Shows Your Page in Search

Google does not simply copy your Open Graph tags. It creates the title link automatically from several sources, including the <title> element, the main heading on the page and og:title. Snippets come mainly from the page content, and Google sometimes uses the meta description when it gives a more accurate description of the page. Treat the Google preview as a rough guide only.

Check the Live Page After Publishing

Once the tags are on your live page, check the URL with each platform. The Facebook Sharing Debugger shows which meta tags the Facebook crawler reads from your URL, along with any errors or warnings, and triggers a fresh scrape of the page. Facebook caches images by URL, so if you replace an image, publish it under a new URL. Slack caches link previews for about 30 minutes, so a change may not show straight away.

To add campaign tracking to the links you share, use the UTM Builder. To scale an image to a new width before you upload it to your site, try the Image Resizer.