pyk’s blog

Adding Article Schema Markup to Your Eleventy Blog

pyk's photo
pyk
·

2 min read

Adding Article Schema Markup to Your Eleventy Blog

Table of contents

Introduction

Implementing Article Schema Markup on an Eleventy blog enhances its discoverability and presentation in search results. This tutorial will guide you through adding structured data to your Eleventy blog using the eleventy-plugin-schema plugin.

Understanding Eleventy and Article Schema Markup

Eleventy Overview

Eleventy is a Node.js-based static site generator, known for its simplicity and flexibility. It transforms content and templates into HTML, making it ideal for blog creation and hosting on any platform that supports static sites.

Article Schema Markup

Article Schema Markup helps search engines like Google better understand and display your content. It enhances search results with more detailed information, such as titles, images, and publication dates.

Adding Structured Data to Your Eleventy Blog

Step 1: Install the Plugin

Install @quasibit/eleventy-plugin-schema:

npm install --save-exact @quasibit/eleventy-plugin-schema
# or
pnpm add --save-exact @quasibit/eleventy-plugin-schema

Step 2: Update Eleventy Configuration

In your .eleventy.js file, add the plugin and a filter for date formatting:

const schema = require("@quasibit/eleventy-plugin-schema");
const { DateTime } = require("luxon");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(schema);
  eleventyConfig.addFilter("toISO8601", (date) => DateTime.fromJSDate(date, { zone: "utc" }).toISO());
};

Step 3: Modify Base Layout

In _includes/base.njk, add shared metadata and the JSON-LD script:

---
meta:
  language: 'en-US'
  site:
    name: 'Site Title'
    description: 'Site Description'
    url: 'https://site.com'
    logo:
      src: 'https://site.com/image.png'
      width: 1000
      height: 1000
  author:
    name: 'Your name'
  image:
    src: 'https://site.com/image.png'
eleventyComputed:
  meta:
    url: 'site.com/{{ page.url }}'
    title: '{{ title }}'
    description: '{{ description }}'
    published: '{% if publishedAt %}{{ publishedAt | toISO8601 }}{% endif %}'
    modified: '{{ page.date | toISO8601 }}'
---
<!doctype html>
<html lang="en">
<head>
  {%- jsonLdScript meta, type, tags -%}
</head>

Step 4: Add Data to Pages and Posts

For pages:

---
type: 'page'
title: 'My page'
description: 'My page description'
---

For blog posts:

---
type: 'post'
title: 'My post'
description: 'My post description'
date: 'Last Modified'
publishedAt: '2022-09-28'
---

Step 5: Verify Schema Markup

Use Google's Rich Results Test to verify the schema markup.

Conclusion

By integrating Article Schema Markup with your Eleventy blog, you enhance its search engine presence and readability. This approach ensures that each page and blog post automatically generates structured data in the HTML head, improving your content's visibility and searchability.

For more details, visit the plugin's GitHub repository: eleventy-plugin-schema.

eleventy11ty