Documentation — Table of Contents

Custom Social Previews

Add custom Open Graph and Twitter meta using Baseline. You’ll set site-wide defaults and override per page, then verify the rendered <head>. Uses npm, Node 20.15.0+, and the same Baseline setup as earlier tutorials.

What you’ll build

Site-wide OG/Twitter defaults (title/description/image).
A page that overrides the social title/description/image.
A checklist to confirm rendered tags.

Prerequisites

Baseline installed and loaded.

package.json with "type": "module" and scripts:

{
  "type": "module",
  "scripts": {
    "dev": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy"
  }
}

Set site.url to your production URL when you deploy (localhost is fine while testing).

1) Ensure Baseline is loaded

eleventy.config.js:

import baseline, { config as baselineConfig } from "@apleasantview/eleventy-plugin-baseline";

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default function (eleventyConfig) {
  eleventyConfig.addPlugin(baseline());
}

export const config = baselineConfig;

2) Set site-wide social defaults

In src/_data/head.js, use openGraph and twitter objects:

export default {
  link: [{ rel: "stylesheet", href: "/assets/css/index.css" }],
  script: [{ src: "/assets/js/index.js", defer: true }],
  openGraph: {
    "og:title": "Baseline Starter",
    "og:description": "An Eleventy site using Baseline",
    "og:type": "website",
    "og:image": "https://example.com/assets/social/default-og.jpg"
  },
  twitter: {
    "twitter:card": "summary_large_image",
    "twitter:title": "Baseline Starter",
    "twitter:description": "An Eleventy site using Baseline",
    "twitter:image": "",
    "twitter:site": "@yoursite",
    "twitter:creator": "@yoursite"
  },
};

3) Create a page with overrides

Create src/content/pages/social-demo.md:

---
title: "Custom Social Preview"
description: "This page overrides social meta."
permalink: "/social-demo/"
layout: "layouts/base.njk"
head:
  openGraph:
    "og:title": "Custom OG Title"
    "og:description": "Custom OG description for this page."
    "og:image": "https://example.com/assets/social/custom-og.jpg"
  twitter:
    "twitter:card": "summary_large_image"
    "twitter:title": "Custom Twitter Title"
    "twitter:description": "Custom Twitter description."
    "twitter:image": "https://example.com/assets/social/custom-twitter.jpg"
---

This page sets its own OG/Twitter meta instead of using the defaults.

4) Run and verify

npx rimraf dist/ && npm run dev

Open /social-demo/, view source, and confirm:
- <meta property="og:title" ...> / og:description / og:image match the page overrides.
- <meta name="twitter:card" ...> plus twitter:title / twitter:description / twitter:image are present.
Build to double-check:

npx rimraf dist/ && npm run build

Inspect dist/social-demo/index.html to confirm the overrides are rendered.

5) Tips

Use absolute URLs for social images (site.url + path in production).
Keep image dimensions suitable for social sharing (e.g., ~1200×630).
If you skip per-page fields, Baseline falls back to site-wide defaults from _data/head.js.

Previous: Sitemaps & Drafts

Next: Deployment URL Checks