OG Tag Previewer

Preview how your Open Graph tags will appear on Facebook, LinkedIn, and Discord before publishing. Generates ready-to-use OG meta tag code.

Key features

Live preview cards for Facebook, LinkedIn, and Discord
Character count warnings for title and description
Generates ready-to-use OG meta tag code
Visual feedback helps optimize social sharing appearance

Guide

Open Graph (OG) tags are meta tags that control how your web pages appear when shared on social media platforms. When someone pastes your URL into Facebook, LinkedIn, WhatsApp, Discord, Slack, iMessage, Telegram, Pinterest, or dozens of other apps that support link previews, those platforms read your OG tags to generate a rich preview card with a title, description, and image. Without OG tags, the platform either shows a bare URL with no context, or it tries to guess what to display by scraping random text and images from your page. This automatic scraping almost never produces a good result. It might pull your copyright notice as the description, use a tiny logo as the image, or show a navigation menu item as the title. The Open Graph protocol was created by Facebook in 2010 and introduced at the f8 developer conference. It extended the idea of semantic web metadata into a simple, practical format that any website could implement and any platform could consume. The protocol uses meta tags in the HTML head section, each with a property attribute prefixed with "og:" and a content attribute containing the value. Since its introduction, OG has become the de facto standard for link preview metadata, adopted by virtually every platform that displays URL previews. Here are the five essential OG tags that every page should have: <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A brief description of your page." /> <meta property="og:image" content="https://example.com/image.png" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="website" /> Each tag controls a specific part of the preview card. Missing any of them can result in an incomplete or poorly formatted preview on one or more platforms. og:title is the headline of your preview card. It appears in bold or large text as the primary clickable element in the preview. This title does not need to match your HTML title tag exactly. The HTML title is optimized for search engines (with keywords and brand suffixes). The og:title is optimized for social feeds, where you want it to be attention-grabbing and concise. Keep it under 60 characters to avoid truncation on most platforms. Facebook truncates titles at around 88 characters on desktop feeds but as few as 40 characters in mobile feeds and in Messenger previews. LinkedIn truncates at approximately 70 characters. The safest approach is to keep og:title under 55 characters to ensure full visibility everywhere. A good og:title for a tool page might be "CSS Gradient Generator - Free Visual Builder" rather than "CSS Gradient Generator - Free Online Tool for Linear, Radial, and Conic Gradients | WebRecast" (which is fine for a search engine title but far too long for social). og:description is the supporting text that appears below the title in the preview card. It gives the reader context and a reason to click. Keep it under 155 characters for reliable display across platforms. Facebook can display up to 300 characters in some placements but truncates heavily in mobile feeds. LinkedIn shows approximately 100-150 characters. WhatsApp shows very little description text. Write the description as a standalone sentence or two that makes sense without seeing the page. Avoid repeating the title. Instead, add information or benefits that the title does not cover. For example, if og:title is "CSS Gradient Generator - Free Visual Builder" then og:description could be "Drag and drop colors, adjust angles, and copy production-ready CSS code. Supports linear, radial, and conic gradients." This adds specifics (drag and drop, copy code, three gradient types) that the title does not mention. og:image is the single most impactful OG tag. Research by Buffer found that posts with images receive 150% more retweets on Twitter, 2.3 times more engagement on Facebook, and 200% more comments on LinkedIn compared to text-only posts. A compelling og:image can be the difference between a link that gets clicks and one that gets scrolled past. The recommended dimensions are 1200x630 pixels, which produces a 1.91:1 aspect ratio. This is the ratio that Facebook, LinkedIn, and most other platforms use for their large link preview cards. You can go up to 1200x1200 for a square format, but the 1200x630 rectangle is the safest choice for cross-platform compatibility. Image size thresholds matter. On Facebook, images smaller than 600x315 pixels trigger the "small card" format, where the image appears as a small square thumbnail on the left side of the card instead of spanning the full width. Images smaller than 200x200 may not display at all. For maximum visual impact, always use images at the full 1200x630 size. The image URL must be an absolute URL starting with https://. Relative paths like /images/og.png will not work because the scraping platform has no way to resolve them without knowing your domain. The image should be in JPEG, PNG, or WebP format. GIF files may work on some platforms but only the first frame is displayed. The maximum file size varies by platform but keeping images under 1MB ensures fast loading and reliable display. Facebook allows up to 8MB, but large images slow down preview generation. og:url is the canonical URL for the content. This serves two purposes. First, it tells the platform which clean URL to display in the preview, stripping away query parameters, tracking codes, and session identifiers. If someone shares https://example.com/page?utm_source=twitter&utm_campaign=spring, the preview will display the clean https://example.com/page URL. Second, og:url is used for deduplication. If 100 people share the same page with different UTM parameters, the platform consolidates all shares under the og:url, combining the total share count and social proof. og:type categorizes your content. The most common values are: website: General pages, tool pages, homepages, landing pages. This is the safe default. article: Blog posts, news articles, opinion pieces. This type enables additional article-specific tags. product: E-commerce product pages. Enables price, availability, and other product tags. profile: Personal profile pages. Enables first_name, last_name, and other profile tags. video.other: Video content pages. music.song, music.album: Music content. book: Book pages with ISBN and author information. Setting the correct type helps platforms display the appropriate preview format and may influence how your content appears in discovery features and news feeds. Beyond the core five tags, several additional OG tags improve your social previews in measurable ways: og:site_name identifies your website brand. It appears in small text above or below the title on Facebook and in the domain position on LinkedIn: <meta property="og:site_name" content="WebRecast" /> og:locale specifies the language and regional variant of your content. The default is en_US. For other languages: <meta property="og:locale" content="tr_TR" /> <meta property="og:locale:alternate" content="en_US" /> <meta property="og:locale:alternate" content="de_DE" /> This tells platforms the page is in Turkish with English and German alternatives available. Platforms may use this for content language detection and to serve the appropriate language version when available. og:image:width and og:image:height specify the image dimensions in pixels: <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> Without these tags, the platform must download the entire image to determine its dimensions before it can render the preview layout. Specifying dimensions lets platforms render the preview skeleton immediately and load the image asynchronously, resulting in a faster, smoother preview experience. This is especially noticeable on platforms like Slack and Discord that show previews inline in chat. og:image:alt provides alternative text for the preview image, improving accessibility for screen reader users who encounter the shared link: <meta property="og:image:alt" content="Screenshot of the CSS Gradient Generator showing a purple-to-blue linear gradient" /> For article-type content, additional tags provide rich metadata: <meta property="og:type" content="article" /> <meta property="article:published_time" content="2026-03-21T10:00:00Z" /> <meta property="article:modified_time" content="2026-03-21T14:30:00Z" /> <meta property="article:author" content="https://example.com/team/jane" /> <meta property="article:section" content="Web Development" /> <meta property="article:tag" content="CSS" /> <meta property="article:tag" content="Gradients" /> <meta property="article:tag" content="Web Design" /> These tags help platforms categorize your content, display publication dates, and attribute authorship. Facebook may use article:section and article:tag for content discovery and news feed ranking. Image specifications vary by platform. Here are the detailed requirements for the best results: Facebook: Minimum image size 200x200 pixels. Images smaller than 600x315 appear in the small card format. Recommended 1200x630 for the large card format. Supports JPEG, PNG, GIF (first frame only), and WebP. Maximum file size 8MB. Facebook caches images for 30 days by default. LinkedIn: Recommended 1200x627. Minimum 200x200 for the image to display at all. LinkedIn crops images that do not match the 1.91:1 aspect ratio, cropping from the center. Keep your important visual content (text, faces, products) centered within the middle 80% of the image. Twitter/X: Falls back to og:image if twitter:image is not specified. Recommended 1200x628 for summary_large_image card type. Minimum 280x150 for summary_large_image, 144x144 for summary. Maximum file size 5MB. Supports JPEG, PNG, WebP, and GIF. WhatsApp: Uses OG tags for link previews. Images appear in a compact format with heavy cropping on mobile. Ensure the most important visual content is centered and visible even when cropped to a roughly square format. Discord: Reads OG tags and displays them in embedded link previews in chat. Discord respects og:image:width and og:image:height for layout, displaying large images when dimensions exceed certain thresholds. Discord's bot fetches og:image relatively quickly and caches it. Slack: Reads OG tags for unfurled links. Large images display when the image width exceeds 500 pixels. Slack caches previews for up to 30 minutes, so updates to OG tags take time to appear. Slack also reads og:site_name and displays it prominently. iMessage and Apple platforms: Apple's Messages app reads OG tags for link previews. The preview appears in a chat bubble with the image, title, and domain. Telegram: Reads OG tags and also supports its own Instant View format for article content. OG previews appear when a link is shared in a chat. Platform caching is one of the most frustrating aspects of working with OG tags. When you share a URL for the first time on any platform, the platform's scraper bot fetches your page, reads the OG tags, downloads the image, and caches everything. Subsequent shares of the same URL use the cached version. If you update your OG tags (new image, better title, corrected description), the old preview continues to appear until the cache expires or you manually force a refresh. To clear cached OG data on each platform: Facebook: Use the Sharing Debugger at developers.facebook.com/tools/debug/. Enter your URL and click "Scrape Again." This forces Facebook to re-fetch your OG data immediately. You may need to click "Scrape Again" twice if the first attempt returns stale data. LinkedIn: Use the Post Inspector at linkedin.com/post-inspector/. Enter your URL. LinkedIn will display the current cached preview and automatically fetch fresh data. If the preview does not update, add a dummy query parameter to the URL (?v=2) to bypass the cache. Twitter/X: Twitter's Card Validator at cards-dev.twitter.com/validator shows the current card preview. Twitter caches cards for approximately 7 days. Forcing a refresh is not always immediate. Slack: Slack caches unfurled links for about 30 minutes in workspaces. Sharing a URL with a query parameter variation can bypass the cache in the short term. The OG previewer tool eliminates the publish-check-fix-republish-check-again debugging loop by showing you how your tags will render before anything is published. Enter your og:title, og:description, og:image URL, og:url, and og:type, and the tool generates side-by-side preview cards matching Facebook, LinkedIn, and Discord's actual rendering. You can immediately see if your title is too long (it will be truncated in the preview just as the platform would truncate it), if your description gets cut off mid-sentence, if your image has the wrong aspect ratio, or if essential visual content falls outside the safe zone. Common OG implementation mistakes and how to avoid them: Relative image URLs. og:image MUST be an absolute URL starting with https://. The scraper bot fetching your page does not know your domain unless you tell it. <meta property="og:image" content="/images/og.png" /> will fail on every platform. Images too small. Using a 300x200 image because "it looks fine on the page" will produce a tiny, unappealing thumbnail in social previews. Always create dedicated OG images at 1200x630. Missing HTTPS on the image URL. Some platforms require HTTPS for the image URL. Even platforms that accept HTTP may show warnings or not display the image. Always use HTTPS. Different OG tags on www vs non-www, or on HTTP vs HTTPS versions of the same page. If your canonical URL is https://example.com/page but someone shares http://www.example.com/page, and the OG tags are only on the canonical version, the preview may be incomplete. Ensure all URL variations either redirect to the canonical version or serve the same OG tags. Not testing after deployment. OG tags that work in your local development environment may break in production due to different base URLs, missing image paths, or server configuration issues. Always test the live URL with Facebook's Sharing Debugger after deploying. For single-page applications (SPAs) built with React, Vue, Svelte, or Angular, OG tags present an architectural challenge. Social media scrapers do not execute JavaScript. They send an HTTP request, receive the HTML response, and parse the meta tags from the raw HTML. If your SPA sets OG tags dynamically via JavaScript (using react-helmet-async, vue-meta, or similar libraries), the scraper will only see the default meta tags in your static index.html shell, not the page-specific tags. Solutions ranked by effectiveness: Server-side rendering (SSR): Frameworks like Next.js (React), Nuxt (Vue), SvelteKit (Svelte), and Angular Universal render the page on the server for each request, including the correct meta tags in the initial HTML response. This is the most reliable solution. Static site generation (SSG): Pre-render each page to static HTML at build time. Each page has its OG tags baked into the HTML. Works for sites with content that does not change between deploys. Prerendering service: Services like Prerender.io or Rendertron detect scraper user agents and serve a pre-rendered HTML snapshot with correct meta tags, while serving the normal SPA to regular users. In React with react-helmet-async and Next.js, OG tags are set per page: import Head from 'next/head'; export default function BlogPost({ post }) { return ( <> <Head> <meta property="og:title" content={post.title} /> <meta property="og:description" content={post.excerpt} /> <meta property="og:image" content={post.ogImageUrl} /> <meta property="og:url" content={`https://example.com/blog/${post.slug}`} /> <meta property="og:type" content="article" /> <meta property="article:published_time" content={post.publishedAt} /> </Head> <article>{/* content */}</article> </> ); } Because Next.js renders this on the server, the OG tags appear in the initial HTML response and are visible to all scrapers. For automated OG image generation at scale, several approaches exist. Vercel's @vercel/og library generates dynamic images as serverless functions, rendering a React-like template to a PNG on each request. Cloudinary's dynamic image transformation API can overlay text and graphics on a base template via URL parameters. Puppeteer or Playwright can screenshot a styled HTML template to create images in a build step. Each approach lets you generate unique, branded OG images for hundreds or thousands of pages without manually creating each one in a design tool. A practical OG image design checklist: Start with a 1200x630 pixel canvas. Place your brand logo in a corner (not too large, about 100px). Use a bold, readable font for the page title, sized at 48-72px so it is legible even when the image is displayed at 300px wide (a common thumbnail size). Keep text within the inner 80% of the image (120px margin on all sides) to account for cropping on different platforms. Use your brand colors for the background or a subtle pattern. Include your domain name in small text at the bottom. Test the image at both full size and at a 400px wide thumbnail to ensure readability at both scales. A/B testing OG tags can significantly improve your social traffic. Create two versions of your og:title or og:image for a page, serve version A for one week and version B for the next, and compare click-through rates from social referrals in your analytics. Even small changes, like rewriting a title from passive voice to active voice or changing the OG image from a stock photo to a custom branded graphic, can produce measurable differences in engagement. OG tags for different page types require different strategies. Your homepage should have broad, brand-level OG content: a tagline as the title, a brand-level description, and your primary brand image. Blog posts should have article-specific titles, excerpt-based descriptions, and the post's hero image. Product pages should show the product name, a benefit-focused description, and a clean product photo on a white or branded background. Tool pages should show the tool name, what it does in one sentence, and a screenshot or illustration of the tool in use. Landing pages should use campaign-specific titles and images that match the ad creative driving traffic to them. Monitoring OG tag performance across platforms helps you optimize over time. Facebook Insights shows engagement metrics for links shared from your domain. LinkedIn Analytics shows impression and click data for company page posts. Twitter Analytics provides engagement rates for tweets containing your links. Track which pages get the most social engagement and study what their OG tags have in common. Patterns will emerge around title length, description style, and image composition that you can apply to underperforming pages. The OG previewer generates both visual previews and the complete HTML meta tag block. Enter your values, verify the previews match your expectations, copy the HTML, and paste it into your page head. Test every major page template on your site (homepage, blog posts, product pages, tool pages, category pages, landing pages) to ensure each has unique, compelling OG tags. Social sharing is a significant traffic source, and the quality of your link previews directly impacts whether people click. Getting your OG tags right is one of the highest-ROI tasks in web development.

Frequently asked questions

What are Open Graph tags?

OG tags control how your link appears when shared on social media - the title, image, and description people see.

Why does my shared link look wrong?

Usually missing or incorrect OG tags. This tool helps you set them up and preview before publishing.