DEV Community

Cover image for What exactly is Frontmatter?
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

What exactly is Frontmatter?

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
Enter fullscreen mode Exit fullscreen mode

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'
---
Enter fullscreen mode Exit fullscreen mode

Or we can convert them into an array of objects:

---
tags:
    - JavaScript
    - Markdown
---
Enter fullscreen mode Exit fullscreen mode

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

---
tags: ["JavaScript", "Markdown"]
---
Enter fullscreen mode Exit fullscreen mode

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

---
tech:
    - frontend
        stack: Remix
    - backend
        stack: Go
---
Enter fullscreen mode Exit fullscreen mode

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
---
Enter fullscreen mode Exit fullscreen mode

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
---
Enter fullscreen mode Exit fullscreen mode

Which will output:

this is a
multi-line
string
Enter fullscreen mode Exit fullscreen mode

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

Discussion (5)

Collapse
renanfranca profile image
Renan Franca

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 🥴

Collapse
dailydevtips1 profile image
Chris Bongers Author

They are a bit confusing at times.
Markdown however is such a bliss these days. Wish I could do all my notes in it 😂

Collapse
renanfranca profile image
Renan Franca

I am trying to live that markdown notes dream 😳🤣

As I've shared on Twitter I am using Obsidian for markdown notes and syncing it using a private GitHub repository 🤩

Collapse
mmuller88 profile image
Martin Muller

thanks

Collapse
dailydevtips1 profile image
Chris Bongers Author

Gald you like it Martin