Meta tags are those HTML tags that appear in the
<head> section of HTML documents, and they act as behind-the-scenes settings that can be interpreted by the web browser to help render the website correctly, or by search engines to help them process certain information that aids your ranking (SEO).
Let's take a look at all of the meta tags that are relevant in 2017, as you'd be quite surprised at how many of them have been deprecated. If there's a meta tag you don't see here, it's highly likely that you don't need it, or don't need it anymore.
Required Meta Tags (or Basic Meta Tags)
Meta charset specifies the character encoding of the website.
Defines the title of the webpage, and acts as the title of the search result that's displayed in search engines such as Google, Bing and Yahoo. I'd recommend using no more than 70 characters, as anything over will be cut-off.
<meta name="description" content="Page description">
A short snippet of text describing what the webpage is about — this snippet appears as the description of the webpage in search results, and should be no more than 150 characters. Like with the title, characters over 150 will be cut-off.
<meta name="viewport" content="width=device-width, initial-scale=1">
Known as the responsive design meta tag, Meta viewport describes how the layout and content adapts to the mobile viewport — the
content= attribute accepts many different values, however the snippet above is relatively standard.
<meta name="application-name" content="Application Name">
Specifies an "app name" so that the website can be used like a web-app — this name appears underneath the app icon on mobile devices when the user selects the "Add to Home Screen" function in their web browser.
<meta name="referrer" content="unsafe-url">
HTTPS blocks referrer data by default, which aids security, but screws up referral data for websites using web analytics. Meta referrer specifies whether or not your website sends the full referrer URL to webpages — the
content= attribute accepts many values, so you may want to read up on which is right for you.
<link rel="stylesheet" href="https://example.com/styles.css">
We were taught that inserting your CSS into an external CSS file and referencing it with the
<link> tag makes webpages load faster, but as we've discovered in recent years, this isn't necessarily true in all cases. While this practice does increase page performance in the long run, it increases the TTFB (Time to First Byte), which has been known to impact SEO. By inserting critical CSS inside
<style> tags, we can load the above-the-fold content using CSS that works straight away, and anything that can wait, can be inserted into the external CSS.
<meta name="robots" content="index,follow,noodp">
<meta name="googlebot" content="index,follow">
Sometimes we don't want certain webpages to rank in search engines at all. Enter, robots — the top snippet controls the behavior of search engine crawling and indexing, whereas the lower snippet specifically applies to the Google Bot only.
<meta name="google-site-verification" content="verification_token">
Verifies your website for access to Google Webmaster Tools.
<meta name="google" content="nositelinkssearchbox">
Disables the sitelinks search box in Google.
<meta name="google" content="notranslate">
Prevents Google Chrome from translating the webpage into other languages.
Duplicate Content Prevention
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
When you have two different versions of the same webpage, each existing at different URLs, Google will enforce a ranking penalty for "duplicate content". By using the
canonical value, you're essentially saying to search engines: "Hey, we did this by design!", and thus, no penalty will be incurred.
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
References an alternative AMP version of the webpage.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
Gives a reference to a version of the webpage that may be in another language — you can also specify the language of the current webpage like this:
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
By using a similar snippet to the language snippet above, we can also define an alternative RSS-feed-version for the webpage.
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
Same thing, but with an Atom feed.
<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="favicon-192.png" sizes="192x192" type="image/png">
Newer browsers have a different syntax for loading multiple favicon sizes—we actually covered this in detail on our blog a few months ago.
Preloading, Prefetching, Prerendering
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="subresource" href="styles.css">
<link rel="preload" href="image.png">
Meta tags are generally split into three categories.
- Required (which we've covered here)
- Very useful and/or common (which we've also covered)
- Deprecated (replaced with alt. method — partially covered)
- 100% useless (its original purpose was not implemented)
- Social meta tags (Facebook, Twitter, etc — next week)
Here in this cheatsheet you should have almost everything you need to start defining meta tags in your HTML documents. If you have a feeling that something should be here, but it isn't, let me know (my author box is below). Deprecated meta tags were intentionally left out of this resource, as were meta tags that don't really do anything. For social meta tags…well…that's coming next week!