ZippyStarter logo

Structured data

Built in markup schema supported by major search engines that provides richer search results.

Schema markup, also known as structured data, is a powerful tool in SEO that helps search engines understand the content on your website. By adding specific code (in JSON-LD, Microdata, or RDFa formats) to your website's HTML, you can provide explicit clues about the meaning of a page and its content.

This clarity not only helps search engines index your website more effectively but also enhances the way your site appears in search engine results pages (SERPs) through rich snippets, which are visually enhanced results.

Here’s a simple JSON-LD example for a blog post:

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BlogPosting",
  "headline":"Creating posts with ZippyStarter",
  "datePublished":"2023-11-15T00:00:00.000Z",
  "dateModified":"2023-11-15T00:00:00.000Z",
  "description":"I wanted the authoring experience with ZippyStarter to be frictionless, so I included a CLI which prompts for information, creates a category, and the necessary files, unless the category already exists. Otherwise it's a manual process.",
  "image":"https://images.unsplash.com/photo-1531256379416-9f000e90aacc?w=2400&h=1260&fit=crop&auto=format","url":"https://zippystarter.com/blog/mdx/creating-posts-with-zippystarter",
  "author":{
    "@type":"Person",
    "name":"Morgan Feeney"
  }
}
</script>

Manually adding this is a pain, so ZippyStarter will automatically generate it based on the values passed into each blog post's frontmatter, see below example for context.

---
title: "Creating posts with ZippyStarter"
date: 2023-11-15
description: "I wanted the authoring experience with ZippyStarter to be frictionless, so I included a CLI which prompts for information, creates a category, and the necessary files, unless the category already exists. Otherwise it's a manual process."
featured_image:
  url: https://images.unsplash.com/photo-1531256379416-9f000e90aacc
  alt: "Writing materials"
  width: 1232
  height: 620

author:
  name: Morgan Feeney
  avatar: /authors/morgan.webp
---

All you have to do is add the meta data you would already be adding, job done.

To alter a configuration, you can locate the schema here: /src/contentlayer/*