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.
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.
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.
Jun 18, 2010.description: summarize the page for search engines #
---
…
description: How to debug SEO issues on individual pages or across an entire site.
…
---
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.
glitch: indicate which Glitch should be presented next to codelab content #
---
…
glitch: gif-to-video
…
---
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.
layout: change the overall layout of your content #
---
…
layout: post|codelab
…
---
layout: post.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.
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.
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.
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:
Tags show up in a few places across the site. The first three tags of a page are shown on the blog homepage:
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:
Supported keywords #
Make sure tags added to the page are listed in tags.yaml.
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.
title: increase SEO with a keyword-rich title #
---
…
title: Web developer tools for debugging JavaScript issues in Google Search
…
---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.
May 8, 2020.editors: give credit to content editors #
---
…
editors:
- petelepage
- kaycebasques
…Links to the author profiles of the editors appear beneath the content area.
credits: add credits for images and videos used in the post #
---
…
credits:
- name: Denys Nevozhai
href: https://unsplash.com/images/nature/winter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
…Links with media credits appear appear beneath the content area.
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.