12 must-have Meta tags for your website in 2019

Meta tags have always been an important factor for SEO.

And they still are.

What are Meta tags?

They are a small piece or snippets of code added on a page to represent what the page is all about.

Why do you need Meta tags?

Meta tags, in short, tell search engines about the content of your page.

Why is that important?

The search engines crawl your site/page and store it in their database.

Whenever a user searches a query that matches the content of that page, it will be eligible to show up in the search results.

Whether or not it will be on page 1 will be determined by many other factors.

Meta tags are also one of the main SEO ranking factors.

Let us take an example of an e-commerce product page.

You have the product title, image, description, price etc

But for the search engines to find out what the product attributes are, you need to use Meta tags to convey the data on the content.

The better the data, richer would be the content of the Meta tags and higher will be the chance of ranking on page 1.

Where do you add Meta tags?

Meta tags are added to the backend source page of a webpage.

Take the below page on Amazon.

It is a Canon camera page.

canon camera page

You won’t see the Meta tags here.

Right-click and select “view source page”.

You will see the source page which has nothing but codes.

camera page source

Don’t worry about the codes. You just need to check for meta tags.

Search for ”Meta name” on this page.

And you will see the below.

meta camera page

If you use WordPress then many of these will already be there when you use Yoast Plugin.

For other custom-template sites, you can check with your developer to add the tags.

Where, on the code page, should you add Meta tags?

Every HTML version will have head tags like below

<head></head>

The first one is the opening tag, and the second one is the closing tag.

Meta tags should be added in the head section within these tags.

In this post, I’ll cover Metas and other related tags also.

Now, coming to Meta tag lists,

Here are the first 6:

Must-have meta 1

1. Title tag

page title

Search engines crawl a page from top to bottom.

Hence the first thing they will face is the page title.

On a page, the title will appear when you hover at the top of the page as below.

page title

On the above camera page, if you hover at the top of the page on that tab, you will see the page title.

Now, Meta tags have character limits and title tag is no exception.

The title tag should be between 50-60 characters in length.

What happens if the limit is exceeded?

The portion that is exceeded will be truncated or cut-off.

Which will not be good for you as well as for search engines.

Hence keep it within the limits.

Ideally, all meta tags should change with pages.

Every page should have unique tags.

For the title tag, for a product page, add the page title along with the category and website name.

Each separated by a pipe symbol  – “ | ”.

Like:

Canon EOS camera | Cameras & Photography | Amazon

Of course, with the addition of the full title (the name, brand, model number, colour, etc), the tag is bound to cross the limit.

It is up to you to work on that.

2. Keywords

keywords banner

Meta keywords, earlier, were quite important.

But recently, they have been downgraded by Google.

If you use WordPress, you will see that Meta keywords feature is missing.

Does that mean that you should not add these?

Not exactly.

Adding them won’t hurt your site rankings.

If you have a custom-template website, you can still add the keywords.

Ideally, a page should have not more than 10 keywords.

So, currently, it is your choice.

For an eCommerce product (say the Canon camera from above), the keywords could be

Buy Canon EOS camera online, Best Canon camera, Canon EOS camera reviews, Canon EOS price in {country}, Camera and photography,

3. Description

description

Now this one is still quite important.

Within a limit of 150-175 characters, you should explain what the page is all about with rich keywords.

This is the part that is usually displayed on the search result.

Like the below:

meta description in search

In the second search result, if you click on the link and view the source page, you will see the meta description.

meta description in code

Think of this as a teaser for your page.

4. Language

language

You may think that if your page is described in the English language, you don’t actually have to specify it.

But it is always better to do so.

Yes, search engine bots will identify the page language.

But you will make it easier for them to do so, by adding the tag.

The same rule goes for all “implied” Metas.

Now, if your website is targeted towards bilingual audience, then you MUST add the language tag.

Meaning, if your page has to options to display.

Like below.

meta language on site

This is noon.com. An eCommerce company in the Gulf.

They have the site in English and Arabic, which users can switch to, according to their convenience.

In the English version, in the source code, you will see the below Meta language tag.

meta language english

Likewise, in the Arabic version, you will see the below.

meta language Arabic

There is another way to add Meta language tags.

Take the below site of Namshi.

Namshi

This is again another site with multiple locations and languages.

In the source page, you will see that they have added all the language tags one below another.

meta language methods

So as per needs, you can add the language tags.

You add the language tag at the top of the page as shown above.

5. Viewport

viewport

This Meta tag is for page responsiveness.

You know how important mobile currently is, for marketing or anything for that matter 😊.

Responsiveness is also an important Google ranking factor.

So, today, you HAVE to add this tag to all your pages.

The tag looks like below.

meta viewport

The width here refers to the size of the device.

It can be set to a specific number like width=600 (in pixels).

But usually, it is safer to keep it at the above “device-width” value.

There is also a height and device-height values that you can add to correspond to the device height.

“Initial-scale” refers to the zoom level when the page first loads.

You can add “maximum-scale”, “minimum-scale” properties to control how users can zoom the page in or out.

6. No-snippet

nosnippet

Using this tag, you can now control which text should and should not appear in the featured snippet on SERP.

This is how it works.

Say, you have a statement like below.

“Charlie Chaplin is, without a doubt, the most famous comedian ever.”

You can add the no-snippet tag like below

“<p span data-nosnippet>Charlie Chaplin</span> is, without a doubt, the most famous comedian ever.</p>”

This will only affect the search snippet and not the rankings.

This tag is not a hint or a suggestion.

Google will abide by it, fully.

There are a few more new tags under this category as below – to be added under the “robots” tag.

max-snippet:[number]– to specify a maximum text-length, in characters, of a snippet.

max-video-preview:[number]  – to specify a maximum duration in seconds of an animated video preview.

max-image-preview:[setting]  – to specify a maximum size of image preview to be shown for images on a page using either “none”, “standard”, or “large”.

You can also combine them as below.

<meta name=”robots” content=”max-snippet:75, max-image-preview:standard”>

These tags are not yet live but is expected to be, soon – keep an eye out 😊.

Here are the next 6 tags:

Must-have meta 2

7. Robots

robots

The all-time famous one.

But now its importance has increased even more.

Why?

Google, now, no longer supports robots.txt files with the noindex directive listed within the file.

You have to provide it in the Meta Robots tag.

To be clear,

Robots.txt file provides instruction to bots on websites and entire directories.

It can block a whole website.

Meta robots tag is for individual pages.

You can provide instructions for each page like:

Noindex, Nofollow, Noodp, Dofollow, Nocache, Noarchive etc.

Note: Google has changed the status of “Nofollow” tag to hint and is no longer a directive.

Meaning , if you add a Nofollow tag, it is up to Google to obey it.

8. Canonical

canonical banner

Another important tag for now.

Although Google will not penalize you for duplicate content, it will affect your rankings in the long run.

Hence, remember to add the Canonical tag.

This tag basically tells search engines that the page being crawled is the original source of content.

This will in-turn avoid duplicate page issues.

The tag looks like this.

canonical

Another prominent place where you need to add this tag is during pagination.

What is pagination?

Say, if you have a lot of products in a single category.

You will either have them all on one page with infinite scrolling (like in apps).

Or like below on Limeroad.

limeroad page scroll

Or you will split them into many pages or in other words create pagination.

Like below,

amazon page scroll

No extra tag is required in the first method.

But for the second one, you’ll have to add the tags.

This is how:

You will be using 3 tags as below

1. Canonical

2. Link=”prev” (for the previous page)

3. Link=”next” (for next page)

Say, you have split the products into 5 pages.

On page 1, the tags will be

<link rel=”canonical” href=”www.page1.com”/>

 <link href=”www.page2.com” rel=”next”>

No “prev” tag here as this is the first page.

But on page 2, the tags will be

<link rel=”canonical” href=”www.page1.com”/>

 <link href=”www.page3.com” rel=”next”>

<link href=”www.page1.com” rel=”prev”>

 Page 3, the tags will be

<link rel=”canonical” href=”www.page1.com”/>

 <link href=”www.page4.com” rel=”next”>

<link href=”www.page2.com” rel=”prev”>

Page 4 would be

<link rel=”canonical” href=”www.page1.com”/>

 <link href=”www.page5.com” rel=”next”>

<link href=”www.page3.com” rel=”prev”>

And on Page 5,

<link rel=”canonical” href=”www.page1.com”/>

<link href=”www.page4.com” rel=”prev”>

No “next” page tag here as this is the last page.

Notice that the canonical link for all pages is page one.

Which indicates to bots that, even though there are 5 pages, page 1 is the most important one.

To again avoid duplicate issues.

I hope you got the gist of this? 😊

Moving on,

9. Sponsored & UGC

sponsored ugc

These are new ones again.

“Sponsored” attribute to be used to identify links on your site that were created as part of advertisements, sponsorships or other agreements.

UGC stands for User Generated Content.

This attribute is recommended for links within user generated content, such as comments and forum posts.

10. Social media metas

social media

Wherever you are, you cannot ignore social media today.

So….embrace it!

And help the bots with the respective tags

Twitter

Main Twitter meta tags include

Twitter: title

Twitter: description

Twitter: card

Twitter: site

Twitter: creator

Example as below:

<meta name=’twitter:card’ content=”app”>

                <meta name=”twitter:site” content=”@website name”>

                <meta name=”twitter:creator” content=”@website name”>

                <meta name=”twitter:title” content=”Page title”>

                <meta name=’twitter:description’ content=”Page title or customized one”>

OGs – Open Graph Meta tags – Facebook tags

Major tags include

<meta name=”og:title” content=”Page title”/>

<meta name=”og:type” content=”Product type”/>

<meta name=”og:url” content=”Page URL”/>

<meta name=”og:image” content=”Product image”/>

<meta name=”og:site_name” content=”Site name”/>

<meta name=”og:description” content=”Page/product or customized description”/>

Social media tags are important while sharing page content to the respective media.

11. Apple tags

apple

Apple brand is one of the biggest in the world (Market cap of over $800b).

Iphones are premium selling phones (Over 70 million units expected in 2019).

IOS, is an important platform like Android.

Too important to be ignored.

Hence the tags.

Major ones include (example),

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />

<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />

<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />

<meta name= “viewport” content = “width = 320, initial-scale = 2.3, user-scalable = no”>

<meta name= “viewport” content = “width = device-width”>

<meta name = “viewport” content = “initial-scale = 1.0”>

12. Alternate

alternate

Alternate tag is some alternate representation or version of the current page.

rel=”alternate stylesheet” is how you provide an alternate stylesheet for the document.

 Note: the stylesheet here is not an alternate representation of the current page but for the stylesheet.


Conclusion

Meta tags cannot be ignored.

And they are relatively more dynamic.

You have to fill and update them frequently.

You need to keep working on them especially for your top products.

You have to stay updated with the norms.

So that you can have fresh content that will help you rank higher.

Be First to Comment

Leave a Reply

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