Meta Tags Preview

Open Graph (OG) meta tags are HTML tags that control how your page appears when shared on social platforms like Twitter/X, Facebook, LinkedIn, and iMessage. Without them, social networks scrape random text and images — often poorly. With proper OG tags, you control the title, description, image, and URL preview. A good OG preview dramatically increases click-through rates on shared links.

At minimum: og:title (max ~60 chars), og:description (max ~200 chars), og:image (1200×630px recommended), og:url (canonical URL). For Twitter/X: twitter:card set to 'summary_large_image' for full-width image previews. For search engines: <title> (50–60 chars) and <meta name='description'> (150–160 chars). Also add og:type (usually 'website' or 'article') and og:site_name.

Use 1200×630 pixels (1.91:1 ratio) — this works on all major platforms. Twitter/X minimum is 300×157px (summary_large_image). Facebook recommends 1200×630px. LinkedIn renders best at 1200×627px. Keep image file size under 8MB. Use JPG or PNG — avoid GIFs. Use an absolute URL (starting with https://) — relative paths don't work for og:image.

'summary' shows a small square thumbnail with text (good for general pages). 'summary_large_image' shows a large landscape image above the text (best for articles and content). 'app' is for app store links. 'player' is for video/audio embeds. Most sites should use summary_large_image for all content pages to maximize visual impact in feeds.

Common causes: (1) Image URL is relative, not absolute. Use the full https:// URL. (2) Image is behind authentication or returns 4xx/5xx. (3) Image is too small — platforms may ignore images below 200×200px. (4) Platform cached the old preview — use Facebook's Sharing Debugger or Twitter's Card Validator to force re-scrape. (5) og:image tag is missing from the <head> section. (6) Robots.txt blocks the crawler from fetching the image URL.

Next.js 13+ App Router: export const metadata = { openGraph: { title: '...', images: ['...'] } } in layout.tsx. Next.js Pages: use <Head> component from next/head. Astro: set them in the layout's <head> or use the built-in SEO props. Gatsby: use react-helmet or gatsby-plugin-react-helmet. React (SPA): use react-helmet-async. All frameworks ultimately output <meta property='og:...'> tags in the <head>.