Meta Tags for SEO: A Complete Beginners Guide

meta-tags-seo

Meta tags are snippets of code that tells search engines about important information of your website, for example, how they should display your pages in the search results. They also tell web browsers how to show it to visitors.

Each site page has meta tags, but they are visible only in the HTML code.

In this guide, you will figure out how to use, and not to use, the 6 most important meta tags for SEO:

  1. Meta title
  2. Meta description
  3. Meta robots
  4. Meta charset
  5. Meta viewport

Meta title

This is the page title that Google and other search engines show in their search results.

meta-title

Titles are crucial to giving visitors a quick insight into the content of a result and why it is relevant to their query. It is often the primary information used to decide which result to click on, so it is important to use great titles on your website pages.

Best practices

  • Write a unique title tag for each page;
  • Be brief, but descriptive;
  • Avoid generic and vague titles;
  • Use sentence case or title case;
  • Create something click-worthy—not clickbait;
  • Match search intent;
  • Include your target keyword where it makes sense;
  • Keep it under 60 characters.

How to add a title tag to your page

Paste the below code into the <head> section of your web page:

<title>This is the title of the page.</title>

If you are using WordPress then install a plugin such as Yoast for SEO. You should see a place to set the title tag on all the web pages or post editor.

2-title-tag-yoast

How to find and fix common title tag mistakes

There are four common issues with title tags:

  1. Too long/short. Avoid unnecessarily long or wordy titles while keeping them “short and descriptive.”
  2. Doesn’t exist. Google says that every web page should have a title tag.
  3. Multiple title tags on one page. If there is more than one title tag on a page then search engines may display an undesirable title tag. 
  4. Duplicate titles across multiple pages. It is important to have different, descriptive titles for each page on your website.

To check a page for the first two issues, plug the URL into a free tool like SERPSim.

If it does not pull a title back, then you need to add one.

3-title-empty

If the pixel length count is red, then it needs shortening.

4-title-too-long

Meta description

The meta description is a summary of what a page is all about. Search engines often use it in search results. While it does not have a direct impact on a page’s ranking that does not mean it lack SEO value.

meta-description

Why it’s important for SEO

Meta description tag is a short, relevant summary of page content. It helps to convince the visitors that the page is exactly what they are looking for.

Best practices

  • Write a unique description for each page;
  • Try to summarize content accurately;
  • Avoid generic descriptions;
  • Use sentence case;
  • Create something click-worthy, not clickbait;
  • Match search intent;
  • Include your target keyword where it makes sense;
  • Keep it under 160 characters

How to add a meta description to your page

Paste the code below into the <head> section of your page:

<meta name=”description” content=”Place the meta description text here.”>

If you’re using WordPress, you can do this easily in Yoast.

9-meta-description-yoast-1

How to find and fix common meta description mistakes

The four common issues with meta descriptions are same as meta titles:

  1. Too long/short. There is no limit on how long a meta description can be, but it only shows the 160 characters as needed, typically to fit the device width.
  2. Doesn’t exist. Make sure that every web page has a meta description.
  3. Multiple meta descriptions on one page. More than one tag may confuse search engines.
  4. Duplicate meta descriptions across multiple pages. Always “differentiate the descriptions for different pages.”

Check for the first two errors on a page-by-page basis with SERPSim or Yoast.

Meta robots

The meta robots tag tells search engines if and how they should crawl your website pages.

Syntax

<meta name=”robots” content=”index, follow”>

Why it’s important for SEO

Using the wrong attributes in the meta robots tag can have a fatal impact on your website’s presence in the search results. Understand this tag and use it effectively because your SEO efforts rely on that.

Here are the values you can use in meta robots tag:

  • index: tells bots to index the page;
  • noindex: tells bots not to index the page;
  • follow: tells bots to crawl links on the web page, and that you also vouch for them;
  • nofollow: tells bots not to crawl links on the web page, and that no endorsement is implied.

You can combine these in any of the following ways:

<meta name=”robots” content=”noindex, nofollow”>
<meta name=”robots” content=”index, follow”>
<meta name=”robots” content=”noindex, follow”>
<meta name=”robots” content=”index, nofollow”>

You can also use , which is the same as index, follow. Not setting a meta robots tag is also equivalent to index, follow.

Best practices

  • Use meta robots tags only when you want to restrict any web page from crawling;
  • Don’t block website pages with meta robots tags in robots.txt;

How to add a meta robots tag to your page

Paste the appropriate code into the <head> section of your web page.

In WordPress, go to Yoast’s advanced settings to set meta robots tags:

Image_2020-01-23_at_1_53_41_am-1

How to diagnose and fix common meta robots mistakes

There are 3 common mistakes with meta robots tag:

  1. Noindexed pages blocked by robots.txt. This keeps Google from seeing the noindex robots tag, so they may still index the URL.
  2. Rogue meta noindex. This keeps Google from indexing the page, so it will get no organic traffic.
  3. Rogue meta nofollow. This keeps Google from crawling the links on the web page, which might prevent the discovery & indexing of significant content. It also keeps the flow of PageRank to those web pages—which may not be useful.

Meta viewport

A viewport is the area of the window where web content can be viewed. A meta viewport tag sets the visible area of page. It instructs the browser to render the page on different screen size and scale, making websites more mobile-friendly (i.e., work area/tablet/portable).

Why it’s important for SEO

Google says that the “having this viewport tag on website means that the page is mobile-friendly.” This matters because Google ranks mobile-friendly websites higher in mobile search results as of 2015.

Here is a quick look on how a page might look on mobile with and without a meta viewport tag:

meta-viewport-with-without-1

Many visitor of your website go back when the desktop version of a site loads on mobile. It is annoying and makes things difficult to read. This may send negative signs to Google and tell them there is something undesirable regarding your page.

Best practices

  • Use meta viewport tag on all website pages
  • Use the “standard” tag unless you know what you are doing (see below)

How to add a meta viewport tag to your page

Paste the code below into the <head> section of your web page:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Note: The content attribute doesn’t have to be set to width=device-width, initial-scale=1.0, but this is the most common implementation and the correct one for most pages.

How to diagnose and fix common meta viewport mistakes

Because most CMS (content management system) and themes set the viewport automatically, tag-related issues are uncommon on most of the websites.

But if you want, you can check for issues with the help of Google Search Console by using the Mobile Usability report.

This shows pages with usability issues on mobile. If this issue is even partly down to the lack of a viewport meta tag, it’ll show the “Viewport not set” error.

15-viewport-not-set

Fix this issue by adding the meta viewport tag to any affected web pages.

Meta charset

The meta charset tag basically specifies which character set a web page is written with. In other words, it tells the browser how the content on your website should be displayed.

There are many different character sets, but the two most common on the web are:

  • UTF‑8 — Character encoding for Unicode;
  • ISO-8859–1 — Character encoding for the Latin alphabet.

Why it’s important for SEO

Using the wrong meta character tag can cause some characters to display incorrectly in the browser.

charset-issue-1

Character formatting issues are bad for your visitors and the website looks quite broken.

That can lead to SEO problems like:

  • People not wanting to link to your website.
  • Low time on page, high bounce rate and low dwell time.
  • Search engines not really understand about your content.

But let’s be real about this:

Unless your web pages are severely broken as a result of meta charset issues, which is unlikely, the impact is be quite minimal.

Still, it is worth noting that Google recommends using Unicode/UTF‑8on your website.

Best practices

  • Use the meta charset tag on all webpages;
  • Use UTF‑8 where possible;
  • Use the correct syntax for your HTML version (see below).

How to add a meta charset tag to your web page

Paste the code below into the <head> section of your webpage:

<meta charset=UTF-8″>

If you’re using HTML4 or below, use this code instead:

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

If you are unsure which version of HTML you are using, check your source code for <!doctype html>. If it’s there, you are using HTML5.

Note: If you don’t set meta charset tag, all the browsers may show garbage text to visitors.

1 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like