LLM Best Practices

Open Graph Images

Last updated 3 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

Slack, Discord, X, LinkedIn, iMessage, and most LLM chat surfaces render the Open Graph image when a URL is pasted. A page without a tuned OG image shares as a bare link. Generate one image per page, not one per site.

Ship 1200x630 and declare the dimensions

Meta recommends 1200 by 630 pixels (about 1.91:1), accepts 600 by 315 at minimum for the large format, and caps files at 8 MB. Keep files well under 1 MB; platforms skip heavy images. Use PNG for text and JPG for photos; some scrapers still reject WebP and AVIF.

Declare dimensions so the scraper can render without fetching the file to measure it:

<meta property="og:image" content="https://example.com/og/seo-technical.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Technical SEO. The pre-publish checklist." />
<meta name="twitter:card" content="summary_large_image" />

Use an absolute URL and match the canonical

Scrapers read the tag in isolation, so a relative path resolves against the wrong origin. Use the full https:// URL, and keep og:url equal to the page’s canonical (technical) or some platforms drop the card.

Generate one image per page from its frontmatter

A single sitewide image collapses every share into a placeholder. Drive each image from title, summary, and category so it cannot drift from the page.

  • Next.js: the App Router opengraph-image.tsx convention or generateImageMetadata; see nextjs-metadata-api.
  • On Vercel: @vercel/og renders JSX to PNG at the edge.
  • Framework-agnostic: Satori renders JSX to SVG; rasterize with resvg.
  • Static sites: pre-generate at build time into public/og/<slug>.png.

The on-page image rules in image-seo still apply.

Design for a small preview

Feeds show the image around 200 pixels wide on a phone, so design for that size.

  • Large title, two lines at most, with a one-line context below (category, date, or domain).
  • High contrast between text and background, one typeface, and the brand mark in a corner.
  • Match the site’s visual identity so a card reads as your domain at a glance.

Bust the cache on every regeneration

Facebook, X, LinkedIn, and Slack cache OG metadata aggressively, and Meta says to assign a new image URL when you replace an image.

  • Append a content hash to the filename or query string (og/seo-technical.png?v=8f3a) and update the og:image tag in the same deploy.
  • Re-scrape in the Facebook Sharing Debugger and the LinkedIn Post Inspector.

Debug with the platform validators

  • Meta Sharing Debugger (https://developers.facebook.com/tools/debug/).
  • LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/).
  • X: the old Card Validator no longer renders previews, so compose a draft post with the URL to check the card.

If the card renders on these, Slack, Discord, and iMessage usually follow.

Backlinks