How to preview your Open Graph tags

Open Graph metadata controls how your webpage appears when shared on social platforms like Facebook, LinkedIn and X. This guide explains what Open Graph tags are, why the OG image matters, and how to preview and optimise your social sharing appearance before publishing.

What is an Open Graph Preview?

An Open Graph Preview shows how your webpage could appear when shared on social media platforms. It uses the Open Graph meta tags on your page — og:title, og:description, og:image and others — to create a visual preview card with an image, title and description.

The preview helps you identify problems before publishing: missing tags, broken images, titles that are too long, or descriptions that do not read well. By fixing these issues in advance, you can improve the visual appeal and click-through rate of your shared links.

How to preview a social media link

1. Enter your webpage URL.
2. Analyse the URL to detect Open Graph metadata automatically.
3. Review the detected Open Graph metadata in the form.
4. Switch between Facebook, LinkedIn and X previews to see how your link could appear on each platform.
5. Fix missing or incorrect metadata by editing the fields directly.
6. Copy the required meta tags and add them to your page if needed.

If URL analysis is unavailable — for example because the page blocks external requests or requires authentication — you can enter your metadata manually and still see live previews.

What are Open Graph tags?

Open Graph tags are HTML meta tags that tell social platforms how to represent your webpage when it is shared. The core tags are:

• og:title — The title shown in the social sharing card. Should be clear and compelling.
• og:description — The description shown beneath the title. Should be a concise summary of the page.
• og:image — The image shown in the sharing card. Should be a publicly accessible image URL.
• og:url — The canonical URL of the page. Helps platforms point to the correct destination.
• og:type — The type of content (e.g. website, article, product). Helps platforms categorise your page.

When these tags are missing, platforms may fall back to the page's <title> tag or generate their own preview from the page content, which may not be what you want.

Why is the OG image important?

The OG image is often the most visually prominent part of a social sharing card. A strong, relevant image can significantly increase click-through rate and engagement, while a missing or broken image can make your link look unappealing or untrustworthy.

Recommended guidance for OG images:

• Use a publicly accessible image URL.
• Aim for 1200×630 pixels for optimal display across platforms.
• Use JPG, PNG or WebP formats.
• Keep the file size reasonable for fast loading.
• Ensure the image is relevant to the page content.

These are recommendations, not guaranteed platform requirements. Each platform may interpret and display images differently.

Facebook vs LinkedIn vs X previews

Different social platforms may interpret and display Open Graph metadata in slightly different ways:

• Facebook uses og:title, og:description and og:image to create a sharing card with the image on top, followed by the domain, title and description.
• LinkedIn also uses Open Graph tags, with a similar card layout but slightly different styling and truncation.
• X (Twitter) can use Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) when available, and may fall back to Open Graph tags when Twitter-specific tags are absent.

Because each platform may truncate titles and descriptions differently, display images at different sizes, or rewrite metadata based on the page content, the previews in this tool are simulations for planning purposes rather than guarantees of exact appearance.

You can use the Open Graph Preview tool to check all three platform previews before publishing your page.