Metatags 101: A Simple Guide for Designers

Suzanne Scacca.
December 27, 2019

One of my mottos in life, and in business is this: If Google tells you to do something, you better get it done.”

And when it comes to using HTML meta tags for SEO, none of us should be messing around.

That said, you know how it is with Google search. The algorithms are always changing and what Google deems important one year easily falls by the wayside the next. Which is why some of the meta tags you might run into are nothing more than legacy remnants of what Google used to care about.

This guide will help you focus on the meta tags you absolutely need to use and what you can do with them.

What Are HTML Meta Tags?

The head of a web page contains a lot of information about the content found there. This is where you’ll find your HTML meta tags along with any CSS or JavaScript links that apply to the page.

Here’s an example of how the looks for a recent WebDesigner Depot post about CSS libraries:

WebDesigner Depot - HTML Meta Tags

You can glean a few important details about the page just from this snippet:

  • The (meta) title
  • The meta description
  • The meta content type and viewport

These are all meta tags. Most of the time, they’re written in HTML as a name/​value pair. For instance

<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />

Essentially, meta tags are nothing more than data about your web page’s data. They never show up on the page. They’re just in the background, waiting for search bots to detect the HTML and use it to improve the page’s search result. They’re also useful for browsers, RSS feeds, and social media platforms that feed these details (and display the content) to users.

Which Meta Tags Do You Need to Use?

One could argue that all meta tags recognized by Google and other search engines are worth using. But like with everything you do in web design and development, you should pick your battles wisely.

So, rather than spend your time filling your web pages with every meta tag possible, familiarize yourself with which ones are available and which of them are worth using.


HTML sample

<title>5 Ways to Beef Up Your WordPress Security Today</title>

What does it do?

This indicates the name of the page.

Do you really need it?

Yes, this one is non-negotiable as it tells search engines what the name of the page is.

This tag comes in handy if you want to tailor your title specifically for search results, too. So, let’s say you wrote a clickbait title so that visitors who see it on the site are compelled to click. Something like:

How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend

That title string is 98 characters long and there’s no way Google would ever display it in full. Rather than rewrite the title for your site, you can use the title tag to give Google one that’s more up to its standards, like:

<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>

That’s 56 characters, within Google’s title limit, and works just as well as the original


HTML sample

<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">

What does it do?

This is a brief summary of what’s to be found on the page. In search, this is the page description that appears beneath the page title and URL.

Do you really need it?

Yep, this is another essential meta tag.

If you leave it up to Google to craft a description for the page, it will more than likely be nothing more than the first 160 characters of what it finds there. And if you have ads at the top of the page, image alt text, or anything else its machines can read, you might get stuck with a crappy meta description.

So, take the time to write one up.

Character Set

HTML sample

<meta charset="UTF-8">

What does it do?

This meta tag defines which character set the browser should use to interpret the content.

Do you really need it?

UTF8 isn’t the only character set nor is it universally acceptable. So, make sure you’ve defined the default character set for your website using this meta tag.

If you’re unsure if your website needs a different character one, refer to this list. It’s safe to say that if the website is to be translated for an international audience, you’ll definitely need to use a different charset tag than UTF8.


HTML sample

<link rel="alternate" href="" hreflang="en-au" />

What does it do?

This tag tells Google which language or regional dialect the content of the page is written in, so it can show it to the right users.

Do you really need it?

There are a few reasons to use this meta tag:

  1. When you’ve built an international website with different translated versions;
  2. When you’ve written the content in a specific dialect, like en-us vs. en-gb;
  3. When your page contains a mix of languages or dialects and you want each of them to be detected.


HTML sample

<meta name="viewport" content="width=device-width, initial-scale=1">

What does it do?

It provides direction on how Google should render your page on all devices, but it’s especially important in this mobile-first world.

Do you really need it?

Yes. The viewport meta tag is one that Google has gone to great lengths to explain. Basically, if you don’t include it, or it’s used incorrectly, you could disrupt the viewing experience for users on mobile devices.

That’s why Google recommends setting the content to width=device-width, initial-scale=1 every time. If you try to introduce variables like minimum-scale, you could hurt the appearance of your website as it transforms from something as simple as portrait orientation to landscape.

Canonical Link

HTML sample

<link rel="canonical" href="" />

What does it do?

When you have duplicate content on your website, or pages that are very similar to one another, the canonical meta tag tells Google which page is the original and should have traffic driven to it.

Do you really need it?

Google doesn’t take kindly to duplicate content. But let’s say your 5 Ways to Beef Up Your WordPress Security Today” piece is a rewrite of a post called 7 Ways to Beef Up WordPress Security” from 2015.

Rather than let Google penalize you for having lookalike content on your website (and, thus, trying to rank twice for the same thing), you’ll use this meta tag to show Google where the original lives.

This would also come in handy if you changed your URL structure and want to make sure all traffic goes to the most current link.


HTML sample

<meta name="robots" content="noindex,nofollow">


<meta name="googlebot" content="noindex,nofollow">

What does it do?

The robots meta tags tell all search bots (“robots”) or specific crawler bots (“googlebot”, bingbot”, duckduckbot”, etc.) how to treat a page. It usually has to do with how a page should be indexed.

Do you really need it?

By default, search engines are going to index and follow links on every page you create on your website.

There are a few reasons why you might direct the search engines to do otherwise:

  • noindex: Use this when you want to hide a page from search. (Do not rely on this for security, remember: it’s only a suggestion.)
  • nofollow: This is useful for blogs that accept content from contributors but don’t vet the content. That way, if affiliate links are planted on the page, Google won’t follow them.
  • nosnippet or max-snippet: This controls how your text, image, or video snippet appears in search.
  • noarchive: If there are older cached versions of a page, use this to prohibit search engines from showing them.
  • unavailable_after:[date]: This is a good one for a limited promotion, like around Black Friday sales. While you might want to drive traffic to the page from October to December, it makes sense to get it out of search once the holidays are done and the deals are no longer valid.

Google Site Verification

HTML sample

<meta name="google-site-verification" content="" />

What does it do?

This is one of the methods you can use to verify your site ownership for Google Search Console.

Do you really need it?

You don’t need this meta tag if you’ve chosen one of the other options. For instance, you can verify site ownership through your Google Analytics tracking code or by updating your DNS record. If you’d prefer, you can just add the HTML meta tag to your header.

Twitter Cards and Open Graph (Social Media)

HTML sample

<meta property="og:type" content="article" /> <meta property="og:title" content="5 Ways to Beef Up Your WordPress Security Today" /> <meta property=”og:description” content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today." /> <meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property=”og:site_name” content="My Website" />

What does it do?

Open Graph meta tags (like the snippet above) tell Facebook and LinkedIn how to display the metadata for a page or post shared on those social media platforms.

Twitter Card meta tags do the same, except for Twitter and usually ask for your handle (@) as well.

Do you really need it?

It can help, but it’s far from essential. In my experience, when I fill in the basic metadata (i.e. title, meta description, featured image) for a page on my website, that’s exactly what shows up when I promote it on social.


This is by no means an exhaustive list of all of the meta tags that exist.

For instance, you might run into web pages that contain legacy meta tags like the ones that declare the author, copyright, or rating. These are no longer necessary and you shouldn’t waste your time on them.

What this is, is an exhaustive list of the HTML meta tags you should be using when it’s relevant to do so.

So, focus on letting the search engines know exactly what they need to index your page while keeping your HTML docs from getting overrun by unnecessary tags. 

Suzanne Scacca

Suzanne Scacca is a freelance writer by day, specializing in web design, marketing, and technology topics. By night, she writes about, well, pretty much the same thing, only those stories are set under strange and sometimes horrific circumstances.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…