Lesson 3: Metadata

The document head contains metadata like titles, stylesheet links, scripts, and base configurations. We also use <meta> tags to declare details that do not fit into these specific tags.

The required meta tags#

The character set and viewport tags are necessary for every page. Regular meta tags use attributes like name or http-equiv to define different types of settings.

Officially defined meta tags#

Standard meta tags use either the name attribute or the http-equiv attribute to tell the browser what kind of setting is being declared. Both require a content attribute to hold the actual value of that setting.

Browser instructions#

Some meta tags use http-equiv. This stands for “HTTP equivalent,” and it is used to give the browser specific instructions.

For example, the refresh directive reloads the page or redirects it after a set amount of time. Avoid using this, because automatically refreshing pages can confuse users and screen readers.

<meta
  http-equiv="refresh"
  content="60; https://machinelearningworkshop.com/regTimeout"
/>

The most useful one is content-security-policy (CSP), which helps secure your site by telling the browser which sources are allowed to run code on your page.

<meta http-equiv="content-security-policy" content="default-src https:" />

Named meta tags#

Named meta tags define custom metadata properties. Along with the viewport tag, you will want to include description and theme-color tags.

Keywords#

Search engines do not use the keywords meta tag anymore, so do not waste time adding it.

Description#

The description tag is important for search engine optimization (SEO). Search engines like Google often display this text directly under your page title in search results.

<meta
  name="description"
  content="Machine learning workshop for machines who want to do other stuff good too"
/>

Robots#

If you want to prevent search engine bots from indexing a page or following its links, add the robots meta tag.

<meta name="robots" content="noindex, nofollow" />

Theme color#

The theme-color tag tells mobile web browsers what color to use for their borders and address bar.

<meta name="theme-color" content="#226DAA" />

You can set media queries on theme colors to specify different values for light and dark modes.

Open Graph#

Open Graph meta tags control how social networks like Facebook and LinkedIn format links when shared.

Open Graph tags use property attributes instead of name attributes to hold their metadata keys.

<meta property="og:title" content="Machine Learning Workshop" />
<meta
  property="og:description"
  content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too"
/>
<meta
  property="og:image"
  content="http://www.machinelearningworkshop.com/image/all.png"
/>
<meta
  property="og:image:alt"
  content="Line drawing of refrigerator, range, washer, fan, microwave, vacuum, and air conditioner"
/>

These tags display cards with images, titles, and descriptions when links are shared on social platforms.

Twitter cards use a similar syntax but prefix their name attributes with twitter: instead.

<meta name="twitter:title" content="Machine Learning Workshop" />
<meta
  name="twitter:description"
  content="School for machines who can't learn good and want to do other stuff good too"
/>
<meta
  name="twitter:url"
  content="https://www.machinelearningworkshop.com/?src=twitter"
/>
<meta
  name="twitter:image:src"
  content="http://www.machinelearningworkshop.com/image/all.png"
/>
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />

Other useful meta information#

You can configure app startup icons for mobile home screens using <link> tags with media queries.

<link
  rel="apple-touch-startup-image"
  href="icons/ios-portrait.png"
  media="orientation: portrait"
/>

If you want your website to act like an app on a mobile home screen, you can declare mobile compatibility flags.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />

Rather than filling your head with dozens of mobile meta tags, you should use a web app manifest file instead.

<link rel="manifest" href="/mlwmanifest.json" />

This keeps your document head clean.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).