The Plain-English Guide to Meta Tags & SEO

In 2018, HubSpot found 61% of marketers said improving SEO and growing their organic presence was their top inbound marketing priority.

Undoubtedly, you already know the importance of SEO. SEO enables you to get on page one of Google, and helps you rank for the keywords that matter most for your business.

Good SEO can get you in front of the potential customers who are searching for your products or services -- and great SEO can help those users become long-term customers, and even brand loyalists.

To excel at SEO, it's critical you know how to incorporate meta tags into each one of your web page's. Meta tags can help search engines correctly identify and categorize your pages -- which will ensure higher rankings, and more exposure to the audience you're trying to reach.

If you're anything like me, though, you might be thinking, Wait … what's a meta tag again?

Here, we're going to define meta tags, identify some of the most important meta tags you need to worry about, and provide instructions so that you can begin incorporating meta tags into your HTML, today.

SEO & meta tags

Meta tags help tell search engines what your web page is about -- which is undeniably critical for SEO, as it enables search engines to properly categorize and surface your content for the correct search terms. A meta tag is a snippet of descriptive text you'll include in the web page's code, so it doesn't appear on the page itself. Meta tags can help you rank on the SERP's for the right keywords.

What are meta tags?

At its most basic, meta tags are snippets of text that tell a search engine what a web page is about -- meta tags don't appear in the body of a page, but in the code itself.

Meta tags are undoubtedly useful from an SEO perspective, since they allow search engines to more easily categorize your web page's content. Common examples of meta tags include canonical tags, meta content types, robots meta tags, or title tags.

Let's dive into some of these, now.

1. Canonical tags

If you have a single page with multiple URLs, or different pages with similar content (such as a page with a mobile and desktop version), search engines see these pages as duplicate versions of the same page.

For instance, as a human, you know "www.google.com" and "https://google.com" point to the same page -- if you search for either, you'll land on Google's homepage.

But Google sees "www" and "https://" as duplicate versions of the same page. If you don't specify which page you want to be the "real" or "original" source, Google will choose which source it dubs original, and crawl the other pages less often.

This could mean that Google consistently crawls your mobile version of your homepage, and rarely checks your desktop version.

For this reason, it's often important to include a canonical tag, which simply tells Google, "Hey, if you find this same content elsewhere -- please disregard. This is the source I want you to see, and this is the version I want to appear in the SERP's."

This is especially important for pages like your homepage. To insert a canonical tag, simply put this code in your HTML:

<link rel="canonical" href="http://example.com/hubspot/meta-tags" />

2. Meta content type

The meta content type enables you to specify the media type (i.e. "text/html") and character set for each web page -- you'll want to include this on all of your web pages. This information ensures your pages are displayed correctly on all browsers.

Here's an example of the code you'd use for meta content type:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

3. Robots meta tags

If you don't specify a robot meta tag, search engines will obey the default index,follow command. However, there could be reasons you want to change the robot meta tag to influence the behavior of search engine crawling and indexing.

Here are a few common robot meta tags:

• noindex -- Prevents the page from being indexed.
• nofollow -- Prevents Googlebot from following links from this page.
• nosnippet -- Prevents a text snippet or video preview from being shown in the search results. For video, a static image could be shown instead.
• noarchive -- Prevents Google from showing the Cached link for a page.
• unavailable_after:[date] -- Allows you to specify the exact time and date you want to stop crawling and indexing of this page.

There are various reasons you might use a robots meta tag. You might input the "nofollow" command, for instance, if your web page has a comments section. Since you can't control which links are posted by readers in the comments section (which could be off-topic to your page's content), it might be smart to tell search engines not to follow those links.

Alternatively, "noindex" is a popular tag for a few reasons -- for instance, let's say you're planning to launch a website redesign, but want to test the redesign on a development server that lives in a subdomain on your website. You'll want to use the "noindex" tag to ensure Google won't release the site in search before it's ready.

You might also use "noindex" if you have a gated content offer you don't want users to be able to find on search engines -- since you want them to fill out a form to access it.

Lastly, you might use "noindex" if your website creates unique web pages whenever someone does a site search. Search engines might think those pages are part of your website, which will hurt your SEO. It's best if you incorporate "noindex" to ensure site search results aren't displayed on the SERP's.

To incorporate a robots meta directive, input this code into your HTML:

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

4. Title tags

Title tags help readers initially understand what your content is about, and is also a major factor in helping search engines understand your content's subject matter. Additionally, a title tag can ensure consistency, since the title tag will show up on your web page, on the web browser, and in social networks.

If you don't include a <title> tag, Google will create one for the SERP's for you -- which can hurt your ranking. Ultimately, you want to create a compelling, click-worthy title that will intrigue readers while accurately portraying what your page is about.

Include a title tag on each of your web page's by pasting this code into your HTML:

<head>

<title>Example Title</title>

</head>

Meta tags example

Examples of meta tags include canonical tags, meta content type, robot meta tags, meta descriptions, and title tags. You might use a canonical tag to tell search engines which page is the 'master' one. Alternatively, you might use robot meta tags to ensure search engines don't index a page you don't want on the SERP's, like a search results page on your site.

It's important to note, alt text is technically not a tag -- it's an attribute. However, you've likely heard the term "alt tag", which is why you might think alt text is part of the meta tag family (I know I did …).

Regardless of its categorization, alt text is incredibly important for your overall SEO strategy, particularly since Google places more value on visual search nowadays. When a search engine crawls your page, it's going to look for the alt text of an image as an identifier for what your web page is about -- so it's critical you correctly title your alt text.

Here's a code example for alt text to incorporate in your HTML: <img src="metatag.jpg" alt="Meta tag picture">.

Meta tags vs. meta descriptions

Meta descriptions are one example of a meta tag -- simply put, a meta description is a 160 character-limit snippet of text a user can read on a search engine. A meta description tells the user what they'll find if they click on your content -- which, if done correctly, can greatly increase click-through rates.

The tag doesn't influence ranking directly, but it's nonetheless an important element of SEO -- a good meta description can compel readers to click on your article, and if the meta description accurately describes your content, the user is more likely to stay on the page. Click-through rates do influence search engine ranking, so meta descriptions are important for SEO.

Here's an example of the code you'd use to manually input a meta description into your web page's HTML:

<head>

<meta name="description" content="This is an example of my meta description.">

</head>

While meta descriptions are a subcategory of meta tags, there is a fundamental difference between the two -- purpose. Meta tags are used to help search engines figure out the content of your site, but meta descriptions are used to help a user sort your content.

For instance, consider what happens when I search "what are meta tags":

The meta descriptions for the following two articles are more than likely the primary reason I'll choose one article over the other.

How to use meta tags with HubSpot

1. In your HubSpot account, navigate to your landing pages or website pages.
2. Locate and hover over your landing page and click "Edit".
3. Click the "Settings" tab at the top of the page editor.
4. Click "Advanced Options", and under additional code snippets locate the Head HTML.
5. In the Head HTML editor, paste in <META NAME="Keywords" CONTENT="example1,example2">.
6. Replace "example1" and "example2" with your own meta keywords.

How to add meta tags to WordPress

1. Go to "Settings" and then click "Meta Tag Manager".
2. On the Meta Tag page, insert your meta tags with reference names.
3. Lastly, click the "Save Changes" button.
4. Alternatively, you can add meta tags to the header.php template file in your WordPress Theme -- at the top, you'll see DOCTYPE tag and below you'll see: <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>.
5. Below this line, you can add meta tag information including content, language, author, or contact.
6. You might also try a WordPress meta tag plugin.