Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Which Meta Tags Should You Be Using in 2017?

DZone's Guide to

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!

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

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="utf-8">

Meta charset specifies the character encoding of the website.

<title>Page Title</title>

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.

<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 the dev 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 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.

Google Stuff

<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:

<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 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.

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 web page, so that when (or rather...if) the visitor visits that web page, 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.

  1. Required (which we've covered here).
  2. Very useful and/or common (which we've also covered).
  3. Deprecated (replaced with alt. method — partially covered).
  4. 100% useless (its original purpose was not implemented).
  5. 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!

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.

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:
meta tags ,ux design ,html ,web dev

Published at DZone with permission of Tim Keough. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}