Open Graph & Meta Tag Preview Analyzer
Audit HTML header meta tags and generate real-time social card preview renders for Facebook, Twitter/X, LinkedIn, and WhatsApp. Identify missing tags instantly.
Analyze Domain Metadata
Social Media Card Previews
Card Title Placeholder
This is where the Open Graph page description is populated dynamically from og:description.
WhatsApp Title
Description text snippet.
Header Meta Tags Audit
| Tag / Property | Value |
|---|---|
Title (<title>) | — |
Description (meta description) | — |
Canonical Link (rel="canonical") | — |
Robots Directives (meta robots) | — |
Viewport Settings (meta viewport) | — |
| Declared Language | — |
| Character Set | — |
Images Accessibility Audit
| Image URL | Alternative Text Status (Alt) |
|---|
Recommendations to Improve Metadata
The Complete Developer's Guide to Open Graph & Meta Tags
When users share links to your website on social networks—such as Facebook, Twitter/X, LinkedIn, WhatsApp, or Slack—the platform doesn't just show a plain text hyperlink. Instead, it generates a visual preview box containing an image, a title, a description, and the domain name. These preview cards are known as **Social Snippets** or **Rich Cards**.
These previews are generated based on specific HTML meta tags published inside the `
` tag of your page. If these tags are missing, misconfigured, or have incorrect dimensions, platforms are forced to scan the page and guess what image or description to display, often returning generic, broken, or unformatted results that harm user click-through rates.1. Understanding the Open Graph Protocol (og: tags)
Originally introduced by Facebook, the **Open Graph Protocol** is now universally supported by Facebook, LinkedIn, Pinterest, WhatsApp, Discord, and Slack. It turns any webpage into a rich media object in a social graph:
<meta property="og:title" content="Page Title">: The primary bold title displayed in the social snippet card. Keep it under 55 characters.<meta property="og:description" content="Snippet description">: A concise summary of the page content. Keep it between 100 to 150 characters.<meta property="og:image" content="https://site.com/image.jpg">: The absolute URL of the preview image. Aspect ratio should ideally be **1.91:1** with recommended dimensions of **1200 x 630 pixels** to prevent truncation.<meta property="og:url" content="https://site.com/page">: The canonical URL of the page. Helps merge likes and share counts across different duplicates.
2. Twitter Card Integration (twitter: tags)
While Twitter/X can fall back to standard Open Graph tags if Twitter-specific tags are missing, declaring them allows you to control the exact card layout style:
<meta name="twitter:card" content="summary_large_image">: Directs Twitter to display a large, prominent image above the title (highly recommended for high engagement). Alternatively, usesummaryfor a small square thumbnail.<meta name="twitter:title" content="Page Title">: The card title.<meta name="twitter:image" content="https://site.com/image.jpg">: The preview image.
3. Image Accessibility and alt Attributes
Including image files inside your webpage is not only about layout design; it directly impacts technical SEO and digital accessibility. Search engine bots cannot see images in the human sense; they read the **Alternative Text (alt attribute)** to understand what the image represents.
Adding descriptive, keyword-aligned `alt` values to all `` tags helps search engines index your assets inside Google Images search, driving organic traffic. More importantly, it allows screen reader software used by visually impaired visitors to read and describe your page elements, complying with accessibility guidelines (WCAG).
Card Aspect Ratio
Always configure the absolute URL in og:image. Relative paths (like /images/og.png) will fail validation checks.