Meta Tags & Open Graph Guide
A master resource on Open Graph specifications, meta tags, naming conventions, and platform scraping rules.
Copy for LLM button to copy the entire guide formatted in pristine Markdown. Paste it directly into your AI assistant or coder chat to generate structurally sound, compliant meta tags in seconds.1Core Meta Tags
Standard search metadata remains the bedrock of search visibility. Aligning search and social tags ensures consistent preview cards.
Title Tag
Keep titles under 60 characters.
This is the primary headline clicked in Google SERPs. Make it brand-aligned and descriptive.
Meta Description
Aim for 50 to 160 characters.
Write engaging, action-oriented summaries. Over 160 characters will be truncated by search scrapers.
Meta Consistency
Maintain mirror consistency.
Ensure your og:title mirrors your page <title> and twitter:title to establish consistent indexing and brand trust.
2OG Image Specifications
Aspect Ratio
1.91:1 (Landscape)This is the standard horizontal layout. Since different platforms display or crop edges differently, keep primary titles and graphics centered.
Resolution
1200 × 630 px (Recommended)Provides a high-definition preview across modern high-DPI displays. If using small typography in your canvas, scale to 1600px width.
Image Format
JPEG or PNGJPEG is best for photograph-based graphics; PNG is preferred for illustrations or high-contrast UI screens. Avoid primary WebP due to spotty support in older legacy scrapers.
File Size Limit
500 KBSmaller files fetch substantially faster and eliminate loading/timeout failures on mobile data or slow server connection times.
3Technical HTML Tags
Verify these metadata configurations reside inside the <head> block of your website markup:
<!-- Open Graph --> <meta property="og:image" content="https://example.com/og/brand-topic-og.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:alt" content="Concise description of the image content" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og/brand-topic-og.jpg" />
https://...). Scraper engines do not parse relative URLs and will fail to fetch your preview graphics.4Platform-Specific Auditing
While major feeds honor baseline Open Graph parameters, understanding individual scraper behaviors prevents unexpected card cropping.
X (Twitter)
Requires twitter:card defined as summary_large_image to trigger full-width card presentations. SVGs are not supported. Make sure critical text stays in the center 80% to protect from edge trims.
Facebook / Instagram
Strict adherence to Open Graph schemas. Requires height and width tags to index instantly without lag during a user's initial share. Maximize reliability by declaring og:type as article or website.
Relies fully on standard OG definitions, but aggressively truncates long header titles. Ensure preview text is concise and keep absolute HTTPS image links updated to prevent empty grey placeholders.
Slack / Discord
Prefers standard OG values. To satisfy access requirements for screen readers, provide a descriptive og:image:alt value. Discord caches heavily; use high-performance CDNs.
Fetches OG tags but is highly sensitive to total image file sizes. Maintain standard JPG assets under ~300 KB to guarantee instant, high-quality, inline chat bubbles.
iMessage / Apple
Renders beautifully formatted bubbles. Pulls directly from primary OG tags. Enforces standard SSL security: images fetched via insecure HTTP links will be ignored.
5Naming Conventions & Hygiene
Standardized, descriptive, hyphenated, lowercase filenames reflect a professional layout design and promote structured indexing across asset repositories.
Clean Examples
- Homepage: brand-og-default.jpg
- Article: react-router-guide-og.jpg
- Product: classic-car-kit-og.jpg
Avoid These Patterns
- Generic: og.jpg or preview.png
- Opaque Hashes: as2415ab1.jpg
- No Versioning: ?v=2 on query strings
6Dynamic Open Graph Image URLs
To make Open Graph and Twitter image tags reliable across all environments, avoid hardcoding your production domain directly into meta tags. Instead, use the incoming server request to determine the current origin dynamically at runtime.
1. Detect the Current Origin Server-Side
Use your framework’s server-side request handling layer to read the incoming request URL. Parse the URL using the standard URL API and extract the current origin dynamically. This allows your application to automatically adapt to local environments, preview deployments, and production domains.
2. Pass the Origin Into Your Rendering Layer
Expose the detected origin through your framework’s route loader, server context, or data-loading mechanism so it is available during page rendering. Your layout or metadata layer should be able to access this value globally when constructing meta tags.
3. Include a Safe Production Fallback
Always provide a fallback production URL in case runtime request data becomes unavailable during unexpected rendering states or error boundaries. This prevents broken og:image and twitter:image tags.
4. Construct OG Image URLs Dynamically
Generate absolute Open Graph image URLs using the active runtime origin instead of hardcoded strings:
5. Keep the Implementation Framework-Agnostic
Whether using React Router, Remix, Next.js, Astro, or Express, the recommended pattern is the same: Detect the origin from the incoming request, pass it into the rendering layer, construct absolute URLs dynamically, and provide graceful fallbacks.
7Caching & Validation
Social scraper servers enforce aggressive cache-control rules. If you modify an Open Graph image asset but preserve its original filename, it can take up to several weeks for social feeds to refresh their caches.
Version Filenames
Always update the actual filename to invalidate scraper cache CDNs immediately:
Scraper Validators
Manually push updates to individual scraper networks by targeting live URLs through official validator interfaces: