YAML front matter

YAML front matter

Reference documentation for web.dev's YAML front matter properties.

alt: describe the hero image for screen readers

---

alt: An old-fashioned storage container.

The alt text for the hero image. Required if the hero YAML property is present.

authors: give credit to content creators

---

authors:
- petelepage
- kaycebasques

Author avatars appear underneath the page title. Clicking an author's avatar takes you to a page where you can see all of that author's content. See Pete LePage for an example.

See Author profile to learn how to add a new author.

An example of a page with authors.
The authors of this page were Kayce and Pete.

codelabs: promote related codelabs

---

codelabs:
- codelab-code-splitting

A list of codelabs that are related to the post. All indicated codelabs appear in callouts at the end of the post.

An example of a codelab callout at the end of a post.

date: indicate when the content was originally created

---

date: 2010-06-18

---

The date value should be in YYYY-MM-DD format. This value should never change once the content is published. Use the updated field to indicate content updates.

The date value is presented in human-readable format beneath the page title.

The date field shows up under the title.
This page was originally published on Jun 18, 2010.

description: summarize the page for search engines

---

description: How to debug SEO issues on individual pages or across an entire site.

---
An example of a description showing up in a search engine result page.
An example of a description showing up in a search engine result page.

draft: mark a page as not ready to publish

---

draft: true

---

When a page is in draft mode, it is hidden from homepages (i.e. web.dev and web.dev/blog) and the sitemap. However, the page is still publicly accessible. I.e. anyone who knows the link to the page will be able to see it.

An example of a page in draft mode.
An example of a page in draft mode.

glitch: indicate which Glitch should be presented next to codelab content

---

glitch: gif-to-video

---
A screenshot of a page using the codelab layout.
The gif-to-video Glitch is presented on the right because of the glitch: gif-to-video YAML property in the page's front matter.

hero: present a large image before post content

---

hero: image/admin/tyBs8QP5pbMVpY3yp1dM.jpg

---

See Hero images.

A page with a hero image.

layout: change the overall layout of your content

---

layout: post|codelab

---
A screenshot of a page using the post layout.
An example of layout: post.
A screenshot of a page using the codelab layout.
An example of layout: codelab.

related_post: specify which post is related to a codelab

---

related_post: replace-gifs-with-video

---

Controls the Return to article link at the bottom of codelabs. See Replace GIFs with video for an example.

An example of a page with a related post.

stack_overflow_tag: add an "Ask on Stack Overflow" note

---

stack_overflow_tag: service-worker

---

Sometimes, a post is related to technologies that have "official" tags on Stack Overflow (e.g. service-worker). When used, an "Ask on Stack Overflow" note will be shown at the end of the post.

An example of a page with a Stack Overflow tag.

subhead: add an enticing subtitle

---

subhead: Improve initial load time by skipping the rendering of offscreen content.

---

Sometimes a title can't fully describe a page's contents. Use the subheading (i.e. subtitle) to provide readers more information so that they can quickly decide whether your content is relevant to them.

The subtitle also shows up on web.dev/blog.

An example of a page with a subhead.
An example of a subhead on web.dev/blog.

tags: increase awareness of related content

---

tags:
- performance
- images

---

Tags help web.dev users find all of our content related to a topic. For example, all of our Web Vitals content is available under the Web Vitals tags page:

A screenshot of https://web.dev/tags/web-vitals

Tags show up in a few places across the site. The first three tags of a page are shown on the blog homepage:

A screenshot of https://web.dev/blog
The human interface devices page is tagged with Capabilities and Games, the streaming requests page is tagged with Network and Service Worker, and so on.

A page's full list of tags is shown at the bottom of its main content:

A screenshot of https://web.dev/covid19

Supported keywords

Make sure tags added to the page are listed in tagsData.json.

thumbnail: present a slightly different version of the hero on the homepages

---

thumbnail: image/admin/mYe7bng2PtwB9ohv8vYa.jpg

---

A modified version of the hero image that is displayed on the homepage or the blog homepage. The thumbnail image must be substantially similar to the hero image. Changing the proportions, cropping, or rearranging the hero image's content is OK. Using a completely different image is not OK.

A page with a thumbnail that's different from its hero.
A page with a thumbnail that's different from its hero.
The page's hero image.

title: increase SEO with a keyword-rich title

---

title: Web developer tools for debugging JavaScript issues in Google Search

---
A screenshot of a page's title.

translation: specify how the page was translated

---

updated: none|machine|manual

This property should only be set if the post is a translation.

updated: indicate when technical information changed

---

updated: 2020-05-08

The date when technical information on the page was last changed. This field should not be changed for minor updates, like typo fixes.

The updated value is presented in human-readable format beneath the page title.

The updated field shows up under the title.
This page was updated on May 8, 2020.

web_lighthouse: help web.dev/measure link back to a guide

This property is only relevant for Lighthouse guides.

When creating a Lighthouse guide, add the web_lighthouse property to help web.dev/measure link back to your guide. The value of the property should be the ID of the audit in Lighthouse's source code. For example, the ID for the Lighthouse audit associated to the cross-origin links guide is external-anchors-use-rel-noopener, which is the filename of the audit source code.

Last updated: Improve article