share On-Page & Content

Open Graph Preview

Preview how links look on Facebook, LinkedIn, and Slack.

Edit Open Graph title, description, and image fields to preview social cards before you share campaigns or publish new pages.

build_circle Try the free tool
list On this page expand_more
star

Key takeaways

  • check_circle Open Graph tags control how URLs preview on Facebook, LinkedIn, Slack, and iMessage.
  • check_circle og:image at 1200x630 pixels is the safest large card ratio across major platforms.
  • check_circle Missing og:title or og:description forces ugly auto-scraped share cards.
  • check_circle og:url should match the canonical URL you want shares to attribute.
  • check_circle Social preview is a mini landing page: broken images kill click-through before the visit.
  • check_circle Twitter cards fall back to OG tags when twitter: properties are absent.
  • check_circle Clear platform caches after image swaps using each network debugger tool.
share

What are Open Graph tags?

Open Graph tags are meta properties in HTML head that describe how a URL should render when shared on social platforms and chat apps. Facebook introduced the protocol; LinkedIn, Slack, Discord, and many enterprise tools now read og:title, og:description, og:image, and og:url when building link preview cards. Without them, platforms guess from on-page text and images, often picking random hero photos, clipped titles, or empty thumbnails.

OG optimization is distinct from classic SEO title and meta description work, though the fields should remain factually consistent. Social cards favor conversational og:title under roughly 60 characters, benefit-led og:description near 110 to 200 characters, and large horizontal images at 1200 by 630 pixels with safe margins for cropping. Square logos alone fail on LinkedIn large link previews where faces and offer text get cut off unpredictably.

HeyLead Open Graph Preview fetches live tags or accepts pasted markup, validates required properties, checks image dimensions and HTTPS reachability, and approximates Facebook, LinkedIn, and Twitter card layouts. It documents fallback chains when twitter:card tags are missing and explains cache busting after creative swaps because platforms cache OG data aggressively.

Run OG preview before paid social launches, PR pickups, product announcements in Slack communities, and email nurtures that depend on polished link cards. Broken OG images are silent revenue leaks: users scroll past shares that look spammy or incomplete. Treat social metadata with the same QA discipline as hero banners and SERP snippets.

Developer handoffs should include OG acceptance criteria in definition of done for new routes. Marketing should supply 1200x630 masters with safe zones, not cropped Figma exports at wrong dimensions. When multiple teams share a headless CMS, designate one owner for og:url canonical alignment to prevent share attribution splits between staging and production hostnames during fast-moving launches. Employee advocacy programs fail quietly when sales shares pricing pages whose OG images still show last year's logo. Schedule OG QA in the same release train as SERP metadata updates so every customer-facing surface refreshes together. Polished OG cards signal credibility in crowded LinkedIn feeds where buyers choose which link deserves their attention. Preview every high-visibility URL before executives share it live on social.

insights

Why Open Graph tags matter for SEO and growth

OG tags do not directly decide rankings, yet they decide whether earned and paid distribution gets clicks. A strong article with a broken share card underperforms weaker content with professional OG creative. For B2B, LinkedIn and Slack shares are often the first brand impression a decision maker sees.

arrow_forward Increases click-through on organic employee advocacy and partner shares.
arrow_forward Protects brand presentation when journalists and influencers link your pages.
arrow_forward Prevents random on-page images from becoming embarrassing social thumbnails.
arrow_forward Aligns launch messaging across email, social ads, and community posts.
arrow_forward Supports developer QA on headless and SPA routes where OG is easy to omit.
arrow_forward Reduces support tickets from sales teams sharing broken preview links.
play_circle

How to use this tool

  1. 1

    Enter OG fields

    Set title, description, image URL, and canonical URL.

  2. 2

    Preview cards

    See large image and compact layouts.

  3. 3

    Fix missing tags

    Add og:image at 1200x630 for best results.

fact_check

What this tool checks

verified

Required OG properties

Checks og:title, description, image, and url presence.

verified

Image size recommendations

Validates dimensions and aspect ratio for large cards.

verified

HTTPS image URLs

Flags mixed content or blocked image hosts.

verified

Twitter card compatibility

Notes summary versus large image card behavior.

verified

LinkedIn preview layout

Approximates professional network crop patterns.

verified

Absolute URL requirements

Ensures og:url and og:image use absolute HTTPS paths.

engineering

Technical guide

Signals, standards, and what to fix when checks fail.

code

OG tag completeness

The preview lists present and missing og:title, og:description, og:image, og:url, and og:type. Incomplete sets trigger auto-scrape behavior that ignores your intended messaging.
code

Image dimension and aspect ratio

Validates minimum 1200x630 recommendations, flags square or tall assets, and checks HTTPS image URL reachability from public internet.
code

Twitter and OG fallback chain

Documents which preview mode uses twitter:card tags versus OG fallbacks so teams customize X copy only when needed.
code

Cache busting and CDN behavior

Explains platform cache lifetimes and safe debugger refresh workflows after creative swaps on CDN-backed assets.
school

Deep dive

web

Social cards are mini landing pages

Users decide whether to click from the card alone. Invest in OG creative with the same discipline as paid ad images. Preview every high-budget campaign URL before ads go live.

Sales enablement

Give reps pre-tested URLs with OG screenshots so they trust share assets in outbound sequences.

layers

OG and SEO meta coexist

OG titles can be shorter and more conversational than title tags. Document when teams should diverge deliberately versus when inconsistency signals sloppy publishing.

og:url alignment

Point og:url to the canonical share target to consolidate engagement signals and avoid parameter duplicates.

image

Image design for crops

Platforms crop unpredictably on mobile and desktop. Keep logos, faces, and offer text inside central safe zones on 1200x630 masters.

File weight

Compress JPEG or PNG under roughly 1 MB for faster scraper fetches on slow corporate networks.

cached

Cache busting after updates

Facebook, LinkedIn, and Slack cache OG responses. After swapping images, use each network debugger to refresh cache or append controlled query strings only when documented.

Launch checklist

Include OG debugger refresh in go-live runbooks alongside SERP and analytics checks.

compare

Examples

thumb_up Strong examples

B2B report launch

og:title: 2026 B2B SaaS Benchmark Report | og:description: Pricing, churn, and pipeline data from 400 VC-backed companies. Download the 48-page PDF. | og:image: 1200x630 chart hero with 15% margin

Specific title, proof-led description, sized image safe for LinkedIn crop.

Product update

og:title: Introducing SAML SSO for Enterprise Teams | og:description: Ship SSO in days with SCIM provisioning and audit logs. See setup docs. | og:image: product UI screenshot 1200x630

Feature clarity and doc CTA match technical buyer expectations on Slack shares.

Webinar registration

og:title: Live Workshop: Fix Crawl Budget Waste | og:description: March 18 with Logan Lee. Bring your faceted nav questions. Register free. | og:image: speaker photo left third with title text right

Date and host name in description; image layout respects face crop zones.

Case study

og:title: How FleetFeet Grew Local SEO 80% | og:description: Retail chain playbook for city pages, reviews, and GBP alignment. Read the case study. | og:image: client logo plus metric callout on 1200x630 canvas

Outcome hook in title; description promises tactical depth, not vanity brand fluff.

thumb_down Weak examples

Missing image

og:title and og:description present but no og:image; platform picks tiny favicon enlarged.

Card looks broken in LinkedIn feed and reduces credible clicks.

Square logo only

og:image: 400x400 logo on white background for a long-form guide URL.

LinkedIn large card crops to a small centered square with wasted space.

HTTP mixed image

og:image: http://cdn.example.com/promo.jpg on HTTPS canonical page.

Some apps block mixed content thumbnails entirely.

Stale campaign OG

og:title still says 2024 Holiday Sale on a page redirected to 2026 pricing.

Sales shares mislead buyers; erodes trust before the landing page loads.

rule

Best practices and common mistakes

check_circle Best practices

  • done Design OG images at 1200x630 with safe margins for platform cropping.
  • done Keep og:title under roughly 60 characters for readable card headlines.
  • done Use absolute HTTPS URLs for og:image and og:url on every template.
  • done Match og:description facts to visible on-page copy and legal disclaimers.
  • done Refresh OG debugger cache after image or title changes on launch day.
  • done Provide unique OG images for major content types, not one generic logo tile.

cancel Common mistakes

  • close Relying on auto-scraped random body images for thought leadership URLs.
  • close Pointing og:image to logos smaller than 200 pixels wide.
  • close Leaving og:url on staging domains that redirect in production.
  • close Using animated GIF og:image files unsupported on several networks.
lightbulb

Common use cases

task_alt

Preview campaign landing pages before paid social and influencer launches.

task_alt

Fix share cards for flagship content with broken or missing OG images.

task_alt

QA headless CMS and Next.js pages where OG tags are easy to omit per route.

task_alt

Coordinate OG copy with email nurture subject lines for message match.

task_alt

Audit partner co-marketing pages with dual-brand OG image requirements.

groups

Who should use this

person Social media managers responsible for share CTR and brand presentation. person Growth marketers launching updates across LinkedIn and Slack communities. person Developers implementing OG tags in SPA and headless frameworks. person PR teams ensuring press pages render polished cards when journalists share links.
dictionary

Glossary

Open Graph
Meta protocol describing shared link preview objects.
og:image
Image URL used for social preview thumbnails.
Twitter Card
X-specific tags that can override or complement OG.
Large image card
Preview format showing wide hero image above title.
Scraper cache
Platform-stored OG data that persists after HTML updates.
Canonical URL
Preferred URL; should match og:url for share attribution.
Safe zone
Margin area keeping text and faces inside crop tolerance.
Auto-scrape
Platform-generated preview when OG tags are missing.
quiz

Frequently asked questions

Ready for a deeper audit?

HeyLead reviews your site, competitors, and growth opportunities with no sales pressure.

Auditoría gratuita arrow_forward