Subscribe

What exactly is Frontmatter?

✍️

What is Frontmatter and how can you use it in Markdown files

16 May, 2022 Β· 3 min read

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Enhancing images with srcset and picture

2 Jul, 2022 Β· 5 min read

Enhancing images with srcset and picture

Make the web fast again

1 Jul, 2022 Β· 4 min read

Make the web fast again

Join 1509 devs and subscribe to my newsletter