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 important meta tags that are relevant in 2021, 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.
Crucial Meta Tags for 2021 (or Basic Meta Tags)
<meta charset="utf-8">
Meta charset specifies the character encoding of the website.
<title>Page Title</title>
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.
<base href="//cdn.example.com/">
Serves as a base URL for referencing external files such as CSS, JavaScript and images. It's not the world's most useful meta tag, but it does reduce the amount of source code and saves a headache when switching to a new domain.
<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.
Recommended
<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.
Google Stuff
<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:
<html lang="es">.
RSS
<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.
Favicon
<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">
Preloading and prefetching, in a nutshell, is about loading resources from another webpage, so that when (or rather...if) the visitor visits that webpage, the assets (CSS, JavaScript, images, etc) are already loaded — there are performance considerations here, so I'd heavily suggest reading up about it first.
Conclusion
Meta tags are generally split into three categories.
- Required meta tags (which we've covered here)
- Very useful and/or common meta tags (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 if you have a question "which meta tags shouls I use" 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!
Note: cache-control and redirect meta tags are deprecated. Here are two resources that explain how to do 301 redirects and cache-control the correct way.
