Open Graph images and meta tags: sizes and tags for every platform

The tags you need

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Short, specific title" />
<meta property="og:description" content="One or two sentences." />
<meta property="og:image" content="https://example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="What the image shows" />
<meta name="twitter:card" content="summary_large_image" />

• Use an absolute URL for og:image. Relative paths fail on most platforms.
• Width and height tags help some platforms render the preview on the very first share.
• The tags must be in the server HTML. Crawlers for social apps do not run JavaScript.

Sizes by platform

Designing an image that gets clicks

• Big, short headline: 3 to 8 words, readable at thumbnail size.
• Brand mark and a consistent layout so people recognize your links in a feed.
• High contrast between text and background; feeds are noisy.
• Keep text away from the outer ~60 pixels; some apps crop or round corners.
• Do not repeat the title exactly; many platforms already show the title next to the image.

Caching and debugging

Every platform caches previews, sometimes for a week. If you fix a tag after sharing, the old preview can stick. Re-scrape with Facebook's Sharing Debugger or LinkedIn's Post Inspector, or change the image URL. Before you share, check the HTML your server actually returns, which is exactly what our meta tag checker reads.

Generating images per page

Blogs, docs, and directories benefit from a unique image per page with the page title on it. Frameworks make this easy: Next.js has the opengraph-image file convention and ImageResponse, and services such as Vercel OG or Cloudinary can render images from a template. Generate them at build time when possible so they are fast and cacheable.