What exactly is Frontmatter?

#markdown

When I'm writing my articles that include Markdown files or data, I often refer to Frontmatter.

What is Frontmatter?

But what is this Frontmatter exactly?

Frontmatter is a way to identify metadata in Markdown files.
Metadata can literally be anything you want it to be, but often it's used for data elements your page needs and you don't want to show directly.

Some examples of common metadata are:

Title of the post
Description for SEO purposes
Tags that belong to a document
Or the date it was written

These are only some examples, and you can make it as crazy as you want with Frontmatter.

How to add Frontmatter?

To add Frontmatter to a Markdown document, you have to start by writing a three-dotted block at the top of your file.

---
title: "Frontmatter section"
---

# Markdown section

You can see the three dots as an example in the above example. Everything in there will be seen as metadata.

Below the second three dots is where our default Markdown file will begin.

Some basic Frontmatter options

It's important to note that Frontmatter is parsed as YAML blocks, so the indentation is important.

For instance, we can set regular variables with a colon setup:

---
title: 'The document title'
---

Or we can convert them into an array of objects:

---
tags:
    - JavaScript
    - Markdown
---

Alternatively, you can even use the bracket way of defining arrays.

---
tags: ["JavaScript", "Markdown"]
---

In extreme cases, you might even want to have multidimensional object arrays.

---
tech:
    - frontend
        stack: Remix
    - backend
        stack: Go
---

Besides arrays, you might want to use multi-line text blocks.

The first way to add this is only visually in your code editor. This will not add newlines in the outputted code.

---
description: >
    this is a
    multiline
    string
---

Which will output: this is a multi-line string

However, if you want to add new lines, use the pipe method.

---
description: |
    this is a
    multiline
    string
---

Which will output:

this is a
multi-line
string

Conclusion

Frontmatter is a super intuitive way of making your Markdown files contain some metadata.

It can enhance your SEO, Website data and even render proper MDX properties.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (5)

Renan Franca • May 16 '22

Thanks for sharing ❤
I use it a lot on my blog made with Github pages! I didn't know about the pipe option '|' ! And I got confused when using '>' because it means quote block when using markdown 🥴