Open Graph Image Checker & Previewer

What Are Open Graph Tags and Why They Matter

Open Graph tags are a set of meta tags that Facebook introduced in 2010 to give website owners explicit control over how their pages appear when shared on social media. Before OG tags existed, platforms scraped whatever text and images they could find on a page — with unpredictable results. A product page might preview with a navigation logo instead of the product image. A blog post might pull its author avatar as the share thumbnail.

Today, every major platform reads OG tags: Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord, iMessage on iOS, and more. Twitter has its own parallel system called Twitter Cards, but it falls back to OG data when its own tags are absent. Getting these tags right is one of the highest-leverage, lowest-effort improvements you can make to a site's content marketing performance.

I have audited hundreds of websites over the years, and I consistently find that 40–60% of pages either have no OG tags, incomplete OG tags, or OG images that are sized incorrectly and get cropped into unrecognizable thumbnails. The business impact is direct: every social share of those pages underperforms, reducing organic reach and click-through rates without the owner ever knowing why.

How This OG Checker Works

Most browser-based tools cannot directly read other websites because browsers enforce the same-origin policy for security reasons. This tool solves that by running a server-side PHP proxy on my server. When you enter a URL and click "Check OG Tags," the following happens:

1. Your browser sends the URL to ?fetch_url= on this same page.
2. My server fetches the target page using PHP's file_get_contents with a real browser user-agent string, following any redirects.
3. The raw HTML is parsed using regular expressions to extract every og: and twitter: meta tag, plus the page's <title> and meta description as fallbacks.
4. The data returns to your browser as JSON, where the preview renderer and scoring engine process it.

The previews are rendered in CSS to match Facebook's, Twitter's, LinkedIn's, and WhatsApp's actual card dimensions and typography as closely as possible. The score is calculated based on tag completeness, image presence, and whether character lengths fall within best-practice ranges.

This tool does not store the URLs you check or the data it retrieves. It is a stateless check — the data lives only in your browser session.

Essential Open Graph Tags Every Page Needs

There are four tags that are non-negotiable. If any one of these is missing, social platforms will either display a broken preview or substitute incorrect content:

• og:title — The headline shown in the preview card. Should be clear and compelling. Keep it under 60 characters to avoid truncation on most platforms.
• og:description — The supporting text under the title. Aim for 120–155 characters. Facebook shows roughly two lines; Twitter shows two as well.
• og:image — The preview thumbnail. This is the single highest-impact OG tag. A great image doubles click-through rates. Use an absolute HTTPS URL. Minimum 1200 x 630 pixels.
• og:url — The canonical URL of the page. This prevents platforms from splitting share counts when a page is accessed via multiple URLs (with and without trailing slashes, www vs. non-www, etc.).

Beyond the essentials, I recommend also setting:

• og:type — Use website for most pages, article for blog posts (enables author and publish date on Facebook), and product for e-commerce pages.
• og:site_name — Your brand name. Shown above or below the title on many platforms.
• twitter:card — Set to summary_large_image for full-width image cards. Without this, Twitter defaults to a small square thumbnail regardless of your og:image.

Optimal Image Sizes for Each Social Platform

Image size is where most websites quietly fail. Here are the specifications I use for every client site I build:

• Facebook and LinkedIn: 1200 x 630 pixels. Minimum accepted is 600 x 315. File size under 8 MB. Format: JPG or PNG (JPG compresses better for photos).
• Twitter / X: 1200 x 675 pixels for summary_large_image cards. 400 x 400 pixels for summary (small square) cards. File size under 5 MB.
• WhatsApp: Uses og:image directly. Displays at roughly 300 x 157 pixels in the chat preview, but the source image should still be 1200 x 630 to display sharply on high-DPI screens.
• Slack and Discord: Use og:image at 1200 x 630. Discord caps at 8 MB per file.

I always design OG images with a safe zone: place the most important visual content (logo, headline, face) in the centre 80% of the frame so it is not cropped when platforms apply their own responsive sizing.

Common Open Graph Mistakes I See on Client Sites

After reviewing hundreds of sites, these are the patterns that show up again and again:

1. Using a relative URL for og:image

Writing <meta property="og:image" content="/images/hero.jpg"> does not work. Social crawlers need a full absolute URL: https://yourdomain.com/images/hero.jpg. WordPress SEO plugins handle this automatically, but custom or legacy implementations often get it wrong.

2. The image is too small

Facebook will not display images smaller than 200 x 200 pixels at all. Images between 200 x 200 and 600 x 315 display as small thumbnails beside the text rather than a full-width card. This dramatically reduces visual impact and click-through rate.

3. All pages share the same OG image

Using the site logo as the og:image on every page is better than nothing, but it is a significant missed opportunity. Each key page — especially service pages, landing pages, and blog posts — should have a dedicated OG image that reinforces the page's specific offer or topic.

4. No twitter:card tag

Without <meta name="twitter:card" content="summary_large_image">, Twitter/X shows a small 120 x 120 pixel thumbnail in the corner of the card regardless of how large your og:image is. Adding this one tag immediately upgrades every Twitter share to a full-width image card.

5. og:title longer than 60 characters

Facebook truncates og:title at around 65 characters, LinkedIn at around 119. Twitter shows roughly 70. Titles that run long often get cut in the middle of the value proposition, making the preview read as incomplete or confusing.

6. HTTP image URLs on HTTPS pages

If your site is HTTPS but your og:image points to an HTTP URL, Facebook and other platforms may refuse to load the image entirely, displaying a blank placeholder instead. Always use HTTPS for image URLs.

Open Graph Tags for WordPress (How to Set Them Up)

WordPress does not output OG tags natively — you need either a plugin or custom code. Here are the three most common approaches I use with clients:

Option 1: Yoast SEO (recommended for most sites)

Install Yoast SEO and go to Yoast SEO → Social in the WordPress admin. Enable Open Graph metadata, set a default og:image for the site, and optionally connect your Facebook page ID. Then, on each post or page, use the Yoast metabox to set a custom og:title, og:description, and og:image under the Social tab. Yoast handles the tag output automatically.

Option 2: Rank Math

Rank Math's approach is nearly identical. Go to Rank Math → Titles & Meta → Global Meta, enable Social Meta, and set your defaults. Per-page overrides are available in the Rank Math block in the post editor under the Social tab.

Option 3: Manual code in functions.php

For developers who want full control without a full SEO plugin:

add_action('wp_head', function() {
    if (is_singular()) {
        $post    = get_queried_object();
        $title   = get_the_title($post);
        $excerpt = has_excerpt($post) ? get_the_excerpt($post) : wp_trim_words(get_the_content(), 25, '…');
        $image   = get_the_post_thumbnail_url($post, 'large') ?: get_bloginfo('url') . '/og-default.jpg';
        echo '<meta property="og:title" content="' . esc_attr($title) . '">' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($excerpt) . '">' . "\n";
        echo '<meta property="og:image" content="' . esc_url($image) . '">' . "\n";
        echo '<meta property="og:url" content="' . esc_url(get_permalink($post)) . '">' . "\n";
        echo '<meta property="og:type" content="article">' . "\n";
        echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    }
});

This is a bare-minimum implementation. For production sites, I always recommend a dedicated plugin unless you are building a highly customised theme where you want zero plugin overhead.

Twitter Cards vs Open Graph — What Is the Difference?

Twitter Cards are Twitter's proprietary version of Open Graph tags. They were introduced because Twitter wanted more control over how content appeared in its own feed. The key differences are:

• Namespace: OG tags use the og: prefix as a property attribute. Twitter Card tags use twitter: as a name attribute.
• Card types: Twitter has four card types: summary, summary_large_image, app, and player. You declare these with twitter:card. OG has no direct equivalent.
• Fallback: If Twitter does not find its own tags, it falls back to OG tags. So at minimum you need OG tags; Twitter-specific tags are additive overrides.
• Images: twitter:image takes priority over og:image on Twitter/X. If you want a different crop or image specifically for Twitter, set twitter:image separately.

My standard setup for any page is to have both sets. The complete Twitter Card block is just four tags: twitter:card, twitter:title, twitter:description, and twitter:image. The title and description can repeat the OG values exactly — the important one to add is twitter:card, because without it you lose large image cards regardless of everything else.

How Open Graph Tags Affect Click-Through Rates

The data on this is consistent. BuzzSumo, Buffer, and multiple academic studies on social sharing behaviour all point to the same conclusion: posts with compelling images receive 2–3x more clicks, shares, and engagement than text-only or broken-image posts.

In my own client work, I have seen service pages go from a 1.2% CTR on LinkedIn shares to a 4.8% CTR simply by:

1. Adding a properly sized OG image (replacing the default site logo).
2. Rewriting og:title to be benefit-led rather than brand-led.
3. Writing og:description as a direct response to the implied question the sharer's audience would have.

The OG image does the most work. When someone scrolls a social feed, the image is what stops the scroll. The title confirms relevance. The description closes the click. Getting all three right is the full equation.

For local businesses — medspas, dental practices, law firms, service businesses — the OG image is also a trust signal. A professional, branded image communicates authority before the viewer even reads the title. A generic white-background logo or a broken preview communicates the opposite.

Debugging Social Share Previews (Facebook, LinkedIn, Twitter)

Once you have fixed your OG tags, you need to force each platform to re-crawl your page and clear its cached preview. Here is the process for each:

Facebook and Instagram

Go to developers.facebook.com/tools/debug. Paste your URL and click "Debug." If the old preview appears, click "Scrape Again." You may need to do this 2–3 times. Facebook's cache TTL is typically 30 days, but the Debugger forces an immediate re-crawl.

LinkedIn

Use the LinkedIn Post Inspector at linkedin.com/post-inspector. Paste your URL and click "Inspect." LinkedIn's cache can take up to 7 days to expire on its own; the Inspector forces a fresh crawl immediately.

Twitter / X

Twitter's Card Validator was deprecated in 2023. The most reliable approach now is to simply post a tweet with your URL and check how it renders. Twitter re-crawls pages when a new tweet is posted with that URL, so the preview should reflect your current tags within a few minutes of posting.

WhatsApp

WhatsApp caches previews on the sender's device for the duration of the session. To force a refresh, clear the app cache or send the link from a different device. WhatsApp reads og:image, og:title, and og:description — there are no WhatsApp-specific meta tags.

Open Graph for Medspa and Local Business Websites

Medspas, aesthetic clinics, and local service businesses have a unique opportunity with OG tags that most of them miss. Their services are highly visual — before/after results, clinic interiors, treatment demonstrations — and social sharing is a core part of how patients discover and refer them.

Here is the OG setup I implement for every medspa client through my medspa marketing service:

• Home page: OG image shows the clinic interior or a lifestyle shot of the target patient persona. Title is brand + primary value proposition. Never just the clinic name.
• Service pages (Botox, filler, laser, etc.): Each service page gets a dedicated OG image featuring the treatment area or a compelling result visual. og:title leads with the outcome, not the procedure name.
• Blog posts: OG image reinforces the article topic with a clear visual hook. For "5 signs you need filler" the image should visually communicate that topic, not use a generic stethoscope stock photo.
• Promotion pages: Dynamic OG images are generated with the promotion headline and expiry date overlaid on the image. This creates urgency in the feed and improves CTR on time-sensitive offers.

The standard setup for local businesses applies equally: every service, every location page (for multi-location practices), and every blog post should have its own unique OG image. It takes a few hours to set up the system in Yoast or Rank Math, but it runs automatically for every future page you publish.

If you want my team to audit and fix your social sharing setup alongside a full SEO and CRO review, book a free consultation and I will take a look personally.

---

More free tools: Headline Analyzer  |  Meta Tag Generator (coming soon)  |  Free Consultation