Open Graph Tags Explained
Open Graph meta tags control how URLs preview on social platforms—title, description, image, and type.
Quick answer
Open Graph tags are `<meta property="og:...">` elements in HTML head. Core tags: og:title, og:description, og:image, og:url, og:type. Platforms like Facebook, LinkedIn, and Slack read them to build link preview cards. Image should be at least ~1200×630 px for best display.
Overview
When someone shares your landing page, the preview card often comes from Open Graph tags—not the visible on-page H1. Missing or wrong og:image yields bland link posts that hurt click-through. Marketing and dev teams collaborate on OG tags: copywriters supply title and description within character comfort zones; designers export 1.91:1 aspect hero images; developers implement tags and validate with platform debuggers. Twitter/X also supports twitter:card tags; many sites duplicate OG values for compatibility. Dynamic OG for programmatic pages (product SKUs, blog posts) should template from CMS fields with fallbacks.
Core Open Graph properties
og:title — preview headline, may differ from `<title>` for social hook optimization. og:description — supporting blurb, often 150–200 characters display truncated. og:image — absolute HTTPS URL to image asset.
og:url — canonical URL of shared page preventing parameter-stuffed duplicate previews. og:type — website, article, product, etc., hints card layout on some platforms.
Image requirements and aspect ratio
Recommended 1200×630 px (1.91:1) minimum for Facebook-class previews; smaller images upscale blurry. File size under platform limits (~8MB Facebook) with JPG or PNG.
og:image:alt improves accessibility on supporting platforms. Avoid critical text near crop edges—mobile crops may center differently.
Testing and cache busting
Facebook Sharing Debugger and LinkedIn Post Inspector scrape URL and refresh cache after tag changes—deploy alone does not update cached previews instantly.
Query string cache bust only for debugger rescrape—not for production sharing. Fix tags at source; platforms cache by URL.
Twitter/X cards alongside Open Graph
twitter:card summary_large_image pairs with og tags; twitter:image can mirror og:image. Some crawlers prefer twitter tags; implementing both maximizes compatibility.
Validate card type matches image dimensions—summary_large_image expects wide hero not square favicon blown up.
CMS and programmatic OG templates
Blog templates map post title, excerpt, featured image to OG fields automatically. E-commerce product pages use primary product shot and price snippet in description where policy allows.
Fallback chain when image missing: default site OG image better than blank. Localized pages need og:locale and alternate locales for international sites.
Examples
Article share card
og:type article with og:title matching compelling headline, og:image 1200×630 featured photo, og:url canonical without utm params.
Homepage default
og:type website with brand-wide default OG image when individual pages lack custom art.
Common mistakes and edge cases
- Relative og:image URLs that break off-site crawlers.
- Using tiny logo as og:image for large image card layouts.
- Forgetting to rescrape debugger after deploy.
- Duplicate conflicting og:url and canonical link tags.
Related resources
Related tools
Last reviewed: 2026-05-23