Documentation — Table of Contents

Social Previews Checklist

Set Open Graph and Twitter meta with global defaults and per-page overrides. Keep social images absolute (use site.url or your CDN) to avoid localhost in previews. This is a quick checklist; for the full walkthrough, see the tutorial “Custom Social Previews.”

Prerequisites

Baseline installed and loaded; site.url set via .env/environment for builds.
package.json with "type": "module" and scripts (dev, build); @11ty/eleventy-img already installed if you generate images separately.

Steps

Set global defaults in src/_data/head.js (OG/Twitter title, description, image).
Override per page in front matter under head.openGraph / head.twitter.
Use absolute URLs for images (combine site.url + path).
Verify: dev/build, view source for og:* and twitter:*, confirm canonical origin.

Notes

Keep titles/descriptions concise; supply card-appropriate image dimensions (e.g., ~1200×630).
Per-page head overrides win over _data/head.js; use absolute URLs for images.

Previous: How-To’s

Next: Custom PostCSS Config