Subscribe

What exactly is Frontmatter?

โœ๏ธ

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

3 Mar, 2024 ยท 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 - a cornerstone for SEO. Frontmatter renders MDX properties like tags to enhance your categories & content.

To further enhance your website content, explore SEO tools that provide detailed guidance on what to include and what to avoid in your content.

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 ๐Ÿ“–

I wrote 1000 articles, whatโ€™s next?

22 Dec, 2022 ยท 3 min read

I wrote 1000 articles, whatโ€™s next?

Vendure community and more

21 Dec, 2022 ยท 2 min read

Vendure community and more

Join 2099 devs and subscribe to my newsletter