YAML front matter

---
…
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 }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="

An example of a page with authors.", width="800", height="712" %}

codelabs: promote related codelabs {: #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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/d9euImHuQJpMjBaNGllz.jpg", alt="

An example of a codelab callout at the end of a post.", width="800", height="585" %}

date: indicate when the content was originally created {: #date }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="

The date field shows up under the title.", width="800", height="712" %}

description: summarize the page for search engines {: #description }

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

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/DG2ye3DP8hTSeEdBZyz3.jpg", alt="

An example of a description showing up in a search engine result page.", width="800", height="395" %}

draft: mark a page as not ready to publish {: #draft }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/fOznvD7Sd6X7kYSrk5QI.jpg", alt="

An example of a page in draft mode.", width="800", height="482" %}

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

---
…
glitch: gif-to-video
…
---

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqbfe3IWOXclsNUr1a8H.jpg", alt="

A screenshot of a page using the codelab layout.", width="800", height="482" %}

hero: present a large image before post content {: #hero }

---
…
hero: image/admin/tyBs8QP5pbMVpY3yp1dM.jpg
…
---

See Hero images.

layout: change the overall layout of your content {: #layout }

---
…
layout: post|codelab
…
---

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/zkPy8m0ZBVWoCf5qs0EZ.jpg", alt="

A screenshot of a page using the post layout.", width="800", height="482" %}

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/xqbfe3IWOXclsNUr1a8H.jpg", alt="

A screenshot of a page using the codelab layout.", width="800", height="482" %}

related_post: specify which post is related to a codelab {: #related-post }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/nl4fS8RGjVcwUw2Ozk8Z.jpg", alt="

An example of a page with a related post.", width="800", height="482" %}

stack_overflow_tag: add an "Ask on Stack Overflow" note {: #stack_overflow_tag }

---
…
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.

{% Img src="image/8WbTDNrhLsU0El80frMBGE4eMCD3/2yLZ1UAjLELFzlvgVRwx.jpg", alt="An example of a page with a Stack Overflow tag.", width="800", height="490" %}

subhead: add an enticing subtitle {: #subhead }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/5QJtXjihXDKFet1dPUoh.jpg", alt="

An example of a page with a subhead.", width="800", height="592" %}

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/YAbmkgByFYVJ7BbOF11x.jpg", alt="

An example of a subhead on web.dev/blog.", width="800", height="643" %}

tags: increase awareness of related content {: #tags }

---
…
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:

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/IFohRqh8YedZG7iZZOiX.jpg", alt="

A screenshot of https://web.dev/tags/web-vitals", width="800", height="617" %}vitals

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

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/RMA4IVA7bvCaEhY5Nevw.jpg", alt="

A screenshot of https://web.dev/blog", width="800", height="586" %}blog

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

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/p9V8IluserA3J9Og6SuY.jpg", alt="

A screenshot of https://web.dev/covid19", width="800", height="408" %}covid19

Supported keywords {: #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 }

---
…
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 }

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

translation: specify how the page was translated {: #translation }

---
…
updated: none|machine|manual
…

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

updated: indicate when technical information changed {: #updated }

---
…
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.

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dcvkKpSchx1lzJ8Sjtcc.jpg", alt="

The updated field shows up under the title.", width="800", height="712" %}

editors: give credit to content editors {: #editors }

---
…
editors:
  - petelepage
  - kaycebasques
…

Links to the author profiles of the editors appear beneath the content area.

{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/kX8qclZNVltJv1hjQEfx.png", alt="

An example of a page with editors.", width="800", height="712" %}

credits: add credits for images and videos used in the post {: #credits }

---
…
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.

{% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PKYFoCzGwhIqhw6cKejk.png", alt="

An example of a page with credits.", width="800", height="712" %}

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

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.