How to use the Open Graph Previewer
Using the previewer takes under a minute. Paste the full URL of any publicly accessible page (your homepage, a blog post, a product page, or a key landing page) and click Analyze. The tool fetches the live page, reads every Open Graph and Twitter Card meta tag from the <head>, checks whether your og:image URL is reachable and what dimensions it returns, then generates a simulated link preview for each of the four platforms.
Once results load, use the Facebook, X / Twitter, LinkedIn, and Slack tabs to switch between platform previews. Each tab renders a faithful simulation of how that platform's link card would look when someone shares your URL. You'll see the image at the top, the domain beneath it, your title in bold, and your description in the lighter text below — precisely as a viewer would see it before clicking.
Expand "View raw OG tags" to see every tag the tool extracted and spot any that show as "missing." The issues list below the preview uses color-coded severity indicators — red for errors that actively break your preview, amber for warnings that reduce quality, and blue for informational notes. Address the errors first, deploy your changes, and re-run the tool to confirm the fixes registered. Social platforms cache OG data, so use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh after you update your tags.
What are Open Graph tags and why they matter
The Open Graph protocol was introduced by Facebook in 2010 as a way for website owners to explicitly tell social platforms how to represent their pages when shared. Before OG tags, Facebook scraped whatever content it found — often the wrong image, a navigation menu snippet as the description, or an entirely wrong title. OG tags gave publishers direct control over that representation. The protocol was quickly adopted by LinkedIn, Pinterest, Slack, and virtually every platform that generates link previews.
The core OG tags every page should have are:
og:title— the title displayed in the link card, ideally concise and specific (typically 60–90 characters)og:description— a 2–3 sentence summary used in the card description, distinct from your meta description (though they are often the same)og:image— the thumbnail image, minimum 1200×630 pixels, served at a stable absolute URLog:url— the canonical URL of the page (prevents tracking parameters from fragmenting social share counts)og:type— "website" for most pages, "article" for blog posts, "product" for e-commerce listings
Twitter Cards are a parallel system developed by X (formerly Twitter) to control how URLs appear in tweets. The most important Twitter Card tags are twitter:card (set to "summary_large_image" for content-heavy pages), twitter:title, twitter:description, and twitter:image. When Twitter Card tags are absent, X falls back to the equivalent OG tags — so if you have complete OG tags, you get a reasonable Twitter preview by default. But explicit Twitter Card tags give you finer control: you can use a different image crop or a different title optimised for X's audience.
Together, OG and Twitter Card tags form the metadata layer that controls your page's visual identity across every platform that generates link previews. For most pages, implementing them correctly is a one-time 30-minute task that pays dividends every time your content is shared, cited, or embedded — which includes AI platforms that generate visual citation blocks from the same metadata.
How Open Graph tags affect AI search citations
OG tags were designed for social sharing, but their influence now extends to AI search interfaces. When Perplexity, ChatGPT with browsing, or Google AI Overviews cite a web page in a generated answer, they frequently assemble a citation block alongside the text — a compact visual unit showing the page's title, a short description, and a thumbnail. The data powering that citation block comes directly from your OG tags.
Specifically: og:title is used as the citation's display title when it is more specific than the <title> tag. og:description is used as the citation description when the native meta description is absent or vague — Perplexity has been observed using og:description as a fallback summary signal. og:image is used as the citation thumbnail when AI interfaces display visual results alongside text answers. A missing or broken og:image means your citation appears without a thumbnail — less visually prominent and less likely to attract a click.
From a Generative Engine Optimization (GEO) perspective, this matters because citation visibility in AI-generated answers increasingly drives referral traffic. A citation block with a clear title, specific description, and properly sized thumbnail performs better than a plain text citation — both in terms of user attention and click-through rate. Pages where OG tags are absent or misconfigured are at a structural disadvantage: even if the AI engine selects them as a source, the citation representation is weaker than pages with well-configured metadata.
You can also check how your page's underlying meta structure looks (title tag, meta description, heading hierarchy, and canonical URL) with our Meta Tag Analyzer, which scores all five meta categories and gives item-level recommendations.
Common Open Graph mistakes
Most OG tag problems fall into a short list of repeating patterns. Fixing these will resolve the majority of broken or weak link previews across all platforms:
- Wrong image dimensions. Images smaller than 600px wide are frequently ignored by platforms or rendered as tiny thumbnails. Images with a square or portrait aspect ratio get cropped aggressively on Facebook and LinkedIn, often cutting out the most important visual content. Always size your OG image to at least 1200×630px and test it with this tool before publishing.
- Missing og:description. Without
og:description, platforms extract a description heuristically from the page body — often pulling navigation text, cookie banners, or the first sentence of an introduction that lacks context. This is also the scenario where AI platforms are most likely to construct a weak or inaccurate citation description. Write a distinct, 2–3 sentence og:description for every key page. - Mismatched twitter: and og: tags. Having an og:title that says one thing and a twitter:title that says something different creates inconsistency across platforms that can erode trust. More commonly, twitter:image points to a different URL than og:image — sometimes one that no longer exists. Keep your OG and Twitter Card tags synchronized, and if you don't need to differentiate them, set the OG tags and let Twitter fall back to them rather than maintaining two separate sets.
- Inaccessible og:image URLs. Images served behind authentication, with incorrect MIME types, or from paths that were moved or deleted will fail silently — the platform gets a non-200 response and renders a placeholder or no image. Relative image URLs (starting with
/instead ofhttps://) are another common source of failure since some platforms cannot resolve them from the document context.
For a broader audit of how your pages signal their content to AI engines, explore our content strategy services, which covers the full metadata and content structure stack.