Which Meta Tags Should You Be Using in 2017?
A review of the required and most important meta tags that every web developer should be using in their HTML. Read on for more!
Join the DZone community and get the full member experience.Join For Free
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 anymore.
Required Meta Tags (or Basic Meta Tags)
Meta charset specifies the character encoding of the website.
Defines the title of the web page, 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 web page is about — this snippet appears as the description of the web page 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 web pages — 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 web pages 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 web pages 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 site links search box in Google.
<meta name="google" content="notranslate">
Prevents Google Chrome from translating the web page 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 web page, 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 web page.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
Gives a reference to a version of the web page that may be in another language — you can also specify the language of the current web page 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 web page.
<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 cheat sheet, 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. 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 soon!
Published at DZone with permission of Jay Chapel. See the original article here.
Opinions expressed by DZone contributors are their own.