You've spent days building a feature. You share the link on Slack, Discord, or LinkedIn — and the preview is a blank box with a URL. No image, no title, no description. It looks broken, and people scroll past without clicking.
Open Graph tags are the fix. They are a small set of <meta> tags in your page's <head> that control exactly how your URL looks when it's shared on social networks, messaging apps, and any platform that generates link previews. Get them right and your links stand out. Get them wrong — or omit them — and you're invisible.
This guide covers everything: what every OG property does, complete tag sets for different page types, Twitter Card integration, how to debug previews, and best practices for image sizes, character limits, and dynamic OG generation in single-page apps. If you want to preview your tags immediately as you build them, use DevToolkit's OG Image Preview tool — paste any URL and see exactly what it renders on each platform.
What Are Open Graph Tags?
Open Graph (OG) is a protocol originally created by Facebook in 2010 to standardise how web pages describe themselves to social crawlers. When you paste a URL into Facebook, LinkedIn, Slack, Discord, iMessage, or Telegram, those platforms send an HTTP request to your URL and parse the <meta property="og:..."> tags in your HTML <head>. That metadata is what populates the link preview card.
The protocol is defined at ogp.me and has become a de facto web standard. Even platforms that use their own card format (Twitter/X) fall back to OG tags when their own tags are absent.
At a minimum, every public page should declare four properties — known as the "basic metadata" set:
og:title— the title shown in the preview cardog:description— the short description below the titleog:image— the image shown in the preview cardog:url— the canonical URL of the page
Without these, platforms try to guess the content from the page's <title> tag, body text, and random images — results are unpredictable and usually poor.
Every Major OG Property Explained
og:title
This is the headline of your link preview. It is not required to match your page's <title> tag, though it usually does. Write it as a standalone, attention-grabbing title — no site name suffix needed here (use og:site_name for that).
<meta property="og:title" content="Open Graph Tags — Complete Developer Guide" />Character limit: Facebook truncates at around 88 characters; LinkedIn at around 70. Keep it under 60–70 characters for safe display across all platforms.
og:description
A one-to-two sentence summary of what the page contains. This appears below the title in most preview cards. Write it for humans first: it should make someone want to click, not just restate the title.
<meta property="og:description" content="A complete guide to every Open Graph property, with full tag sets for articles, products, and homepages, debugging tips, and best practices." />Character limit: Facebook shows roughly 200 characters; Twitter/X cuts at 200 as well. LinkedIn shows around 120 characters in some layouts. Aim for 120–160 characters.
og:image
The single most impactful OG tag. A compelling image dramatically increases click-through rate. The value must be an absolute URL — relative paths will not work because social crawlers request the image directly without a base URL context.
<meta property="og:image" content="https://example.com/images/og/open-graph-guide.png" />You can also add supporting image tags for better control:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram showing OG tag structure in an HTML head element" />
<meta property="og:image:type" content="image/png" />Image size best practices: The canonical OG image size is 1200 × 630 px (1.91:1 ratio). This renders well on Facebook, LinkedIn, Discord, and Slack. Twitter/X prefers 1200 × 675 px (16:9) for large card formats. Use PNG or JPEG. Keep file size under 8 MB (Facebook hard limit is 8 MB; smaller is faster to crawl). Avoid putting critical text within 50px of any edge — some platforms crop.
og:url
The canonical URL of the page. This tells platforms which URL to treat as the "true" address when the same content is accessible at multiple URLs (with/without trailing slashes, with UTM parameters, etc.). Always use the full absolute URL.
<meta property="og:url" content="https://example.com/blog/open-graph-tags-complete-guide" />og:type
Describes what kind of content the page represents. The default is website. Use article for blog posts and news articles, product for e-commerce item pages, and video.movie or video.episode for video content.
<meta property="og:type" content="article" />
When og:type is article, you can add additional article-specific metadata:
<meta property="article:published_time" content="2026-03-19T09:00:00Z" />
<meta property="article:author" content="https://example.com/authors/jane-doe" />
<meta property="article:section" content="Developer Guides" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="HTML" />og:site_name
The name of the website, displayed separately from the title. Facebook shows it above the title. LinkedIn shows it as a subdued label. It's how users know which site a link is from without reading the URL.
<meta property="og:site_name" content="DevToolkit" />og:locale
Specifies the language and region of the content using a standard locale string. Defaults to en_US if omitted. Important for international sites.
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="zh_TW" />Twitter Card Tags
Twitter (now X) introduced its own card system that predates broad OG adoption on the platform. Twitter Card tags use the name attribute rather than property, so they coexist cleanly with OG tags. If Twitter Card tags are absent, Twitter falls back to OG tags — but you get more control with explicit Twitter tags.
twitter:card
Required. Sets the card layout. The two most useful values are summary_large_image (big image above the text) and summary (small thumbnail beside the text). Use summary_large_image for content-rich pages — it occupies more feed space and drives higher engagement.
<meta name="twitter:card" content="summary_large_image" />twitter:title, twitter:description, twitter:image
These override the OG equivalents on Twitter. If you're fine with Twitter using the same values, you can omit them and rely on the OG fallback. Specify them when you want Twitter-specific copy or a different image crop optimised for 16:9.
<meta name="twitter:title" content="Open Graph Tags — Complete Developer Guide" />
<meta name="twitter:description" content="Every OG property explained with full tag sets, debugging tips, and best practices for social sharing." />
<meta name="twitter:image" content="https://example.com/images/og/open-graph-guide-twitter.png" />
<meta name="twitter:image:alt" content="OG tag code example in an HTML editor" />twitter:site and twitter:creator
Optional attribution tags. twitter:site is the Twitter/X handle of the website; twitter:creator is the handle of the individual author.
<meta name="twitter:site" content="@devtoolkit" />
<meta name="twitter:creator" content="@janedoe" />Complete OG Tag Sets by Page Type
Blog Article / Documentation Page
<!-- Core OG -->
<meta property="og:title" content="Open Graph Tags — Complete Developer Guide" />
<meta property="og:description" content="Every OG property explained with full tag sets, debugging tips, and best practices for social sharing." />
<meta property="og:image" content="https://example.com/images/og/open-graph-guide.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="OG tag code example in an HTML editor" />
<meta property="og:url" content="https://example.com/blog/open-graph-tags-complete-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="DevToolkit" />
<meta property="og:locale" content="en_US" />
<!-- Article metadata -->
<meta property="article:published_time" content="2026-03-19T09:00:00Z" />
<meta property="article:author" content="https://example.com/authors/jane-doe" />
<meta property="article:section" content="Developer Guides" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="HTML" />
<meta property="article:tag" content="Social Sharing" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@devtoolkit" />
<meta name="twitter:creator" content="@janedoe" />E-commerce Product Page
<!-- Core OG -->
<meta property="og:title" content="Wireless Noise-Cancelling Headphones — AudioPro X9" />
<meta property="og:description" content="40-hour battery life, active noise cancellation, and studio-grade audio. Free shipping on orders over $50." />
<meta property="og:image" content="https://shop.example.com/products/audiopro-x9-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://shop.example.com/products/audiopro-x9" />
<meta property="og:type" content="product" />
<meta property="og:site_name" content="AudioPro Store" />
<!-- Product metadata -->
<meta property="product:price:amount" content="199.99" />
<meta property="product:price:currency" content="USD" />
<meta property="product:availability" content="in stock" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@audiopro" />Homepage / Brand Page
<!-- Core OG -->
<meta property="og:title" content="DevToolkit — Free Online Developer Tools" />
<meta property="og:description" content="JSON formatter, Base64 encoder, UUID generator, regex tester, and 40+ more free browser-based tools. No signup, no tracking." />
<meta property="og:image" content="https://devtoolkit.io/images/og/homepage.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://devtoolkit.io/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DevToolkit" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@devtoolkit" />Debugging OG Tags
After deploying or updating OG tags, you need to verify them — and, critically, clear cached previews so platforms show the new data. Here are the three essential debugging tools.
Facebook Sharing Debugger
The Facebook Sharing Debugger (developers.facebook.com/tools/debug) is the most authoritative tool for OG validation. Paste your URL and it shows:
- Which OG tags Facebook parsed
- Any warnings or missing required properties
- A preview of exactly how your link will look on Facebook and Messenger
- A "Scrape Again" button to force a cache refresh
Important: Facebook aggressively caches OG metadata. If you update tags, click "Scrape Again" in the debugger to force a fresh crawl. Without this step, Facebook continues showing the old cached data to users.
Twitter Card Validator
Twitter's Card Validator (cards-dev.twitter.com/validator) works similarly. Paste a URL to see the rendered card, check for tag errors, and verify that twitter:card, twitter:title, and twitter:image are resolving correctly.
Note: Twitter's cache TTL is much shorter than Facebook's (typically minutes, not hours), so previews update faster after a deploy.
DevToolkit OG Image Preview
For a fast, multi-platform preview without leaving your workflow, use DevToolkit's OG Image Preview tool. Paste any public URL and see how the link card renders on Facebook, Twitter, LinkedIn, and Slack side by side. It also surfaces missing or malformed tags with actionable recommendations, and links directly to our Meta Tag Generator so you can generate a corrected tag set in seconds.
Checking Raw Tags with curl
Sometimes you need to verify what a crawler actually sees — your server may serve different HTML to bots, or a CDN may be caching stale content. Use curl with a bot-like User-Agent to check:
curl -s -A "facebookexternalhit/1.1" https://example.com/your-page \
| grep -i 'og:'
Replace facebookexternalhit/1.1 with Twitterbot/1.0 or LinkedInBot/1.0 to simulate those crawlers. If you get different HTML than a normal browser request, your server has bot-detection or conditional rendering logic affecting OG output.
Best Practices
Image Sizes and Formats
- Minimum size: 600 × 315 px. Facebook will not display images smaller than this in large-card format.
- Recommended size: 1200 × 630 px for standard OG; 1200 × 675 px for Twitter large card.
- Format: PNG for graphics and text-heavy images; JPEG for photos. Both are universally supported.
- File size: Under 1 MB for fast crawling and rendering; Facebook's hard cap is 8 MB.
- Safe zone: Keep all text and important visual content at least 50 px from each edge. Some platforms crop or round-corner the image, and aspect-ratio cropping on mobile can hide edge content.
- HTTPS only: All image URLs must use HTTPS. HTTP images are blocked on most platforms.
Character Limits Quick Reference
- og:title: 60–70 characters (Facebook truncates at ~88, LinkedIn at ~70)
- og:description: 120–160 characters (most platforms show 120–200)
- twitter:title: 70 characters
- twitter:description: 200 characters
Always Use Absolute URLs
Every URL in an OG tag — og:url, og:image, and any article namespace URLs — must be absolute (including the protocol and domain). Social crawlers do not have a base URL context to resolve relative paths. /images/og.png will simply fail silently; https://example.com/images/og.png will work.
Dynamic OG Tags for SPAs and Frameworks
Single-page applications (React, Vue, Angular) have a fundamental OG problem: social crawlers typically do not execute JavaScript, so they see the bare HTML shell — no title, no description, no image. There are three standard solutions:
- Server-Side Rendering (SSR) or Static Site Generation (SSG): Frameworks like Next.js, Nuxt.js, SvelteKit, and Astro render the full HTML — including OG tags — on the server or at build time. This is the cleanest solution and is recommended for any public-facing content.
- Dynamic OG image generation: Services like Vercel's
@vercel/ogor Cloudflare Workers can render custom OG images at the edge by combining templates with per-page data. This lets you generate unique branded images for every article, product, or user profile without pre-generating thousands of static images. - Prerendering middleware: Tools like Rendertron or prerender.io sit in front of your SPA and serve a server-side-rendered snapshot to bots while serving the normal SPA to browsers. Identified by User-Agent. Less elegant than SSR but viable for legacy SPAs.
If you are using Astro (the framework powering this site), OG tags are trivially straightforward — write them directly in your layout's <head>, interpolate page-level variables, and Astro renders full HTML at build time or request time. No extra configuration needed.
Don't Rely on Inference
Platforms that don't find OG tags will try to infer a title from the <title> tag, a description from the first paragraph, and an image from the largest visible image on the page. This is unpredictable — you might get a cookie banner screenshot or a nav logo as your preview image. Always declare OG tags explicitly on every page you want to be shareable.
One og:image Tag or Multiple?
The OG spec allows multiple og:image tags. Facebook's crawler will use the first valid one. However, in practice most teams use a single image and rely on og:image:width and og:image:height hints to avoid the extra HTTP round-trip Facebook uses when dimensions are unknown. If you must include multiple images (e.g., for fallback), put the highest-quality, correctly-sized image first.
Common Mistakes and How to Fix Them
- Missing og:image on interior pages: Many developers set OG tags on the homepage but forget them on blog posts and product pages. Audit your site with a crawler or check Google Search Console for pages missing OG metadata.
- Relative image paths: Use a build-time variable or environment variable to prefix image URLs with your full domain. Never hardcode relative paths in OG tags.
- Stale cached previews: After updating tags, use the Facebook Sharing Debugger's "Scrape Again" and LinkedIn's Post Inspector to force a cache bust. For Slack and Discord, adding a query parameter (
?v=2) to the URL forces a fresh crawl. - HTTP images blocked by HTTPS pages: Mixed content rules mean platforms will refuse to load an HTTP image URL on an HTTPS page. Use HTTPS for all image assets.
- og:description duplicating og:title: The description should add information, not restate the title. Write it as a second sentence that answers "why should I click this?"
OG Tags and SEO
OG tags are not a direct Google ranking factor — Googlebot primarily uses structured data (schema.org JSON-LD), canonical tags, and page content for indexing decisions. However, there is an indirect SEO benefit: pages with good OG tags get shared more on social media, which generates backlinks and referral traffic, which are positive ranking signals.
For thorough metadata coverage, implement both OG tags and standard HTML meta tags. The <title> tag is still what Google shows in search results; <meta name="description"> is still the description Google shows below the title. Use our Meta Tag Generator to generate both sets simultaneously — fill in your page details once and get the complete <head> block covering OG, Twitter Cards, standard HTML meta, and canonical tags.
For more on developer tooling and productivity, see our guides on REST API Testing and the Best Free Developer Tools for 2026.
Try It Right Now
The fastest way to verify your OG implementation — or diagnose why a link preview looks wrong — is to paste the URL into DevToolkit's OG Image Preview tool. You'll see a rendered preview for each major platform, a full breakdown of every OG tag found on the page, warnings for missing or incorrect values, and direct links to the platform-official debuggers for a cache bust.
If you're starting from scratch or refreshing your metadata, the Meta Tag Generator builds a complete, copy-paste-ready <head> block in seconds — OG tags, Twitter Cards, canonical URL, and standard HTML meta, all from a single form.