Meta tags are a part of the HTML code (HTML tags) for your website and describe any page's content to the search engine crawlers.  Meta tags are essential to all search engines such as Google, Yahoo, Yandex, Duck Duck Go, and Bing.

Meta tags help the search engines understand, and index your web pages better and can improve your organic search rankings. Some tags, like the title and meta description, also help users understand your page's content better and can improve your click rates via the SERP.

Overall, meta tags form the first impression about your web page and its content and are essential both for SEO and user experience.

However, not all meta tags are useful, and very few have an impact on SEO. You don't need to know about every meta tag to boost your SEO.

Here are the most important meta tags, with tips on how to write meta tags for SEO.

Title Tag

This is the first HTML element in your HTML code and specifies the title of the page. It helps the search engines, like Google Chrome, Firefox, and Safari, understand what your page's content is all about.

Title tags are added to the "head" section of the HTML in the below sample format:

<head>
<title>Sample Title</title>
</head>

Title tags are probably the most important meta tags as they can have a direct impact on your search rankings. These are one of the most important on-page SEO ranking factors, and an absence of one can significantly affect your search rankings.

Titles display on the SERPs(search engine results page) and on the browser tabs when browsing a website.  Title tags play a huge role in describing what a page is all about. Title tags are especially helpful when a user is shuffling between multiple tabs, as they can see the page title right on the browser tab.

How to Write Title Meta Tags for SEO

Here are some best practices to write title meta tags for your web pages.

  • Do not write title meta tags longer than 60 characters.
  • Add modifiers—such as how-to, tips, buy, find, top, etc.—to your title tag.
  • Titles with numbers work better, same is true for title tags as well.
  • Insert your primary keyword in the title tag, preferably right at the beginning.
  • Write a unique title tag for each page.
  • If you have a well-known brand, then you can add your brand name to your title tags to get more clicks. See the example below from Moz:

Meta Description

A meta description is a meta tag placed in the HTML code that describes the content of a page. Meta descriptions also appear on the search engine results pages, just below the title tags.

The meta description summarizes your page's content and is the first thing users look at to decide whether or not they want to visit your page. Therefore, it is very important to write a crisp and relevant meta description that makes people want to click on your page.

Moreover, meta descriptions don't just help users decide what your page content covers, but also helps the search engines understand and index your page better.

The meta description meta tag is also added in the "head" section of your HTML.

Here's a sample code:

<head>
<meta name="description" content="sample meta description.">
</head>

While meta descriptions are not a direct Google ranking factor, the can affect a page's click-through rate and thus improve search rankings. So when you write meta descriptions, you need to optimize them properly to get the best results.

How to Write Meta Descriptions for SEO

Follow these tips to write description meta tags for your web pages.

  • Do not write meta descriptions of more than 160 character length and to optimize for mobile, keep it limited to 130 characters.
  • Include your primary keyword and other important keywords as naturally as possible.
  • Clearly explain what users can expect from a page if they click on it.
  • You can even highlight your main keywords by making them bold so that they stand out and draw viewers' attention.
  • Write unique meta descriptions for each page on your website.
  • Do not include any non-alphanumeric characters in your meta descriptions.

Viewport

It has become more important than ever to optimize for mobile devices as a majority of online searches are initiated from mobile devices. A viewport is the visible part of a web page and is smaller for mobile devices than for desktops.

A viewport meta tag helps you make your website more mobile responsive and is used to manage the layout of your web pages when opened on mobile browsers. This meta tag is also added on the "head" section of your HTML with a syntax as shown below:

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

So, a viewport meta tag allows your web page to scale as per the dimensions of the mobile device being used.

Not using the viewport meta tag will load the page in a way that is not compatible with mobile devices and will negatively affect the user experience. Thus, not using a viewport tag can adversely affect your search rankings.

Robots

This is a meta tag that tells search engine crawlers whether they should index a page or not.

There are four important values of a robots.txt meta tag:

Follow - this instructs the crawlers to follow all links on a web page.
Nofollow - this instructs the crawlers not to follow the page and any links on that page.
Index - this instructs the crawlers to index a web page.
Noindex - this instructs the crawlers not to index a web page.

Following are the syntax for robot meta tags:

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

These tags are also placed in the "heads" section of the HTML code.

By default, search engines follow and index all pages unless specified otherwise. Therefore, robots tags do not need to be added to all pages, but only when you want don't want a page indexed and links followed.

Headers

Headers are basically the H1, H2, H3, and other subheadings on any page. Header meta tags are used to create different heading sections with different font sizes.

Headings help to structure your content better and help both your website visitors and search engines to make sense of your page. Header meta tags don't have a direct impact on SEO, but improve the user experience and can indirectly impact your rankings.

It is a good practice to include keywords in your header meta tags if they can be inserted naturally.

Canonical Tag

A canonical meta tag is most commonly used by e-commerce websites when they have multiple pages with the same product but different variants (but can be used by all sites). In such cases, they use a canonical tag to tell the search engines which one is the main page. However, a canonical tag is not a directive. It's only a suggestion, and Google can and will ignore your canonicals in certain situations.

Here is an example of the canonical tag syntax:

<link rel=”canonical” href=”http://websitename.com/” />

There are some other cases where a page could have multiple URLs, so canonical tags should be used to specify the main page and avoid indexing duplicate pages.

Alt Text Tag

An alternative text tag is added to images to help search engines read those, as they can't read images. So, add alt text tags for all the images on your web pages to help search engines read your page content better.

Here is the syntax for a typical alt text tag:

<img src=”http://websitename/xyz.jpg” alt=”xyz” />

How to Write Alt Text Meta Tags for SEO


Here are some best practices to follow when you write alt text meta tags for SEO.

  • These should be short and to-the-point.
  • Alt text should describe the image be relevant.
  • Keep the length between 50 and 55 characters.
  • It's always a good practice to create an image sitemap to make it easier for search engine crawlers to read and index images.

Social Media Meta Tags

These don't impact SEO but there are two important social media meta tags that you need to know about—Twitter cards and open graph tags.

Twitter Cards

These are specialized meta tags that are used only for Twitter. These tags improve the page display on Twitter.

Here is an example of a Twitter card tag:

<meta name=”twitter:title” content=”Page/Post Title”>

Open Graph Tags

When sharing links sometimes an image and brief post description is automatically added. Open graph tags make that possible. These are useful when sharing content, but do not have any direct impact on SEO. So, these tags are useful, but not necessary.

Here’s an example of an open graph tag syntax:

<meta property=”og:title” content=”Page/Post Title” />

Conclusion

These are some of the most useful meta tags that you should know about, to optimize your website and improve your search rankings. We have also provided tips on how to write meta tags for SEO to get the best results.