changed 2 years ago  
Linked with GitHub

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

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

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

tags

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

Set tags for the note. overrides tags set with ######tags:

Default: not defined.

Example

tags: features, cool, updated

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

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

Select a repo