Eleventy Plugin Baseline

A magic carpet ride

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 async 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.