What is YAML metadata and how to use it?

Since 2023-06-20 (GMT+8), HackMD does not accept YAML frontmatter as metadata. All metadata defined in YAML frontmatter has been migrated to HackMD and stored there, after which HackMD ignores all changes in the YAML frontmatter section.

This tutorial will close on 2023-08-20. Before then, you may want to review each section to see where the metadata goes.

YAML is a human-readable data-serialization language. It is commonly used for configuration files and in applications where data is being stored or transmitted ^[1]. It is a common practice to use YAML to add metadata, such as title, tags, and descriptions, to Markdown documents.

HackMD defines certain properties that you can use for various aims, for example, controlling behaviors in slide mode. First of all, you have to add the following contents at the first line of a note.

---
YAML metas
---

Replace YAML metas with the properties below. The source code of this note can be your reference.

title

Please refer to the tutorial: How to edit title and tags.

Set the title of the note, overrides the first Header.

Default: not defined.

Example

title: meta title

description

Please refer to the tutorial: How to edit metadata of a note

Set description for the note.

Default: not defined.

Example

description: meta description

image

Please refer to the tutorial: How to edit metadata of a note

Set the default image for the note, which will be used as preview image for the link.

Default: HackMD default preview image

Example

image: https://hackmd.io/screenshot.png

Twitter only displays images that meet the ratio of 1200 to 675.

type

Please refer to the tutorial: How to create a slide deck

Set the type of the note. If you'd like to preview slides in Edit Mode, please set this property to slide.

Example

type: slide

robots

You will be able to set this again soon.

By adding this property, HackMD will add the following HTML tag to the <head> section:

<meta name="robots" content="your_meta">

You can set the content property to noindex, nofollow to prevent search engines from indexing your note.

Default: not set.

Example

robots: noindex, nofollow

lang

Please refer to the tutorial: Edit note metadata.

Set note language. Please use ISO 639-1 codes:
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

Default: not defined (en)

Example

lang: ja-jp

dir

Please refer to the tutorial: Edit note metadata.

Set the direction of words. Use rtl for languages written from right to left, and ltr for those written from left to right.

Learn more →
http://www.w3.org/International/questions/qa-html-dir

Default: not defined (ltr)

Example

dir: rtl

breaks

Please refer to the tutorial: Edit note metadata.

Tells HackMD to translate a new line into a new line or to be ignored. In original Markdown guideline, you have to add two spaces to make a new line.

This property can only be set to true or false.

Default: note defined (true)

Example

breaks: false

GA

You will be able to set GA again soon

Set Google Analytics ID

Default: not set (disabled)

Example

GA: UA-12345667-8

disqus

Please refer to the tutorial: Edit note metadata.

HackMD will provide its own way of commenting on the whole note and is sunsetting disqus.

Enable Disqus with your shortname.

Default: not set (disabled)

Example

disqus: hackmd

slideOptions

Please refer to the tutorial: How to create a slide deck

Configure presentation behaviors in slide mode. For details, please consult:
https://revealjs.com/config/#reconfiguring

You can set a theme for the slides. Please consult:
https://revealjs.com/themes/

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Please indent with two spaces in YAML.

Default: not defined

Example

slideOptions:
  transition: fade
  theme: white

lintConfig

You will be able to configure lint soon.

This option is the vaules for markdownlint. For details, please consult .markdownlint.yaml.

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Please indent with two spaces in YAML.

Example

---
lintConfig:
  MD004:
    style: "consistent"
  MD006: false
---

# Your other markdown content

https://en.wikipedia.org/wiki/YAML ↩︎

Guest Strickland2019/10/09 09:04:38

sdf (Edited)

Guest Barrett2020/07/27 08:13:34

cool

eapo

2020/11/09 00:40:45

:::warning Please refer to the tutorial: [How to edit title

Sadly isn't working with the new MEASUREMENT ID. (Edited)

Shaun Mitchell

2021/04/24 02:51:06

ew slides in Edit Mode, please set this property to

outdated. use this: https://revealjs.com/config/ (Edited)

Keng Lin

2021/06/16 18:28:39

The comment section seems very useful! (Edited)

Djamma1986

2021/09/25 02:16:09

io of 1200 to 675. :::

true (Edited)

2021/09/25 02:16:33

breaks: true

Alexander Wade

2023/07/06 19:39:48

Good to see that even the HackMD team has double titles on some of their pages. I don't understand this confusing new feature, either. (Edited)

Tilman Schieber

2024/02/22 12:53:52

does not work for me

Miffy Fat

2024/11/08 05:38:16

When will GA feature be available again ：（

rick890101

2025/01/13 05:24:31

It's now 2025. Is the feature available?

Chien Phạm ngọc

2024/11/16 19:00:52

Gfk f

What is YAML metadata and how to use it?

title

description

image

Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More → Twitter Social Cards

tags

type

robots

lang

dir

breaks

GA

disqus

slideOptions

lintConfig

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

Twitter Social Cards