Head tags

Special tags for branding, SEO, and PWA purposes

Demo

Look at your browser tabs and favorites page, home screen icon, search engine results, and more to see how these tags are working for this site.
Your app would simply replace these values with assets for your app.

API

Tag Purpose
<meta name="description" content="{Your description here.}"> Used to summarize a page and is the text that shows up in search engine results and smart links.
<meta name="viewport" content="width=device-width, initial-scale=1"> Configures device viewport to support responsive designs
<link rel="apple-touch-icon" sizes="180x180" href="path/to/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon.png"> Browsers use these as tab and app icons.
<meta name="theme-color" content="#ffffff"> Browsers use this is some areas to help your brand feel more embedded.
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="path/to/ms-icon-144x144.png">
Windows uses these to help your brand feel more embedded.
<link rel="manifest" href="path/to/manifest.json" crossorigin="use-credentials"> Downloads the application manifest, which includes helpful information for browsers to optimize the user experience.

Guidelines

Polish matters

Don't underestimate the details. Browsers are more able to embed your website into the OS experience when these tags are found in your site. They add a level of polish that's quite noticeable, so take a minute to add them.

Unfurling

When you share a link in a social product like Twitter, LinkedIn, iMessage, or Slack, it "unfurls" into a preview, like this:

Slack

M- preview in Slack

iMessage

M- preview in Slack

These head tags and many others are required for a good unfurling. Slack has an in-depth article about this topic if you'd like to learn more.