101 Guide to the MetaTags in 2021 | SEOTips | Digital marketing

101 Guide to the MetaTags in 2021. | SEOTips | Digital marketing

When it comes to MetaTags, Meta Description, and Digital Marketing, Everyone likes quick and easy wins. To get your website ranked on the internet, you need to take advantage of as many SEO tricks. Creating a MetaTag is one technique that will definitely help improve your SEO strategy.

What are MetaTags?

Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page. They are part of a web page’s head section. Multiple Meta elements with different attributes can be used on the same page.

According to the official site

What is the Main Purpose of MetaTags?

Search engines increasingly value a good user experience, and that includes making sure that your site satisfies a user’s query as best as it possibly can. Meta tags help with this by making sure that the information searchers need to know about your site is displayed upfront in a concise and useful fashion. 

How MetaTag can help you with SEO?

Metatags offer more details about your site to search engines and website visitors who encounter your site in the SERP. MetaTags can be optimized to highlight your content’s most important elements and make your website stand out in search results. Some types of meta tags relate to page structure and ensure that your site is easy to navigate, while others tell search engines which parts of your page are important and which to overlook. 

“No-js” Class in HTML

<! --Syntex -->
<htmlclass="no-js" lang= "en">
  • The primary purpose of the no-js class is to allow the use of CSS to style JavaScript-free pages, i.e. defining CSS styles for JavaScript-enabled browsers as well as for JavaScript-disabled browsers.
  • Thus, the “no-js” class will only be present if JavaScript has been disabled. This enables styling a pure HTML and CSS page without the use of any client side-scripting.
  • if JavaScript is enabled, it removes the “no-js” class automatically.
  • “no-js” class is available in the markup by default.
  • The “no-js” class is basically a way to be able to style things with or without using JavaScript.
  • “no-js” class is added to the topmost HTML element which serves as an instruction for Modernizr.

Title tag

While the title tag doesn’t start with “meta” or is a MetaTags. It is in the header and contains information that’s very important to SEO. You should always have a unique title tag on every page that describes the page.

Title Tag Example
How to add a title tag to your page

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

<! --Syntex -->
 <title>
101 Guide to the Sitemaps in 2021. | SEOTips | Digital marketing
</title>

If you’re using WordPress, install an SEO plugin like Yoast. You should see a place to set the title tag on the page or post editor.

title tag Example
How to find and fix common title tag mistakes:
  1. Too long/short. Google says to “avoid unnecessarily long or verbose titles” while keeping them “descriptive and concise.”
  2. Doesn’t exist. Google says that every page should have a title tag.
  3. Multiple title tags on one page. Search engines may display an undesirable title tag if there is more than one on a page.
  4. Duplicate titles across multiple pages. Google says that “it’s important to have distinct, descriptive titles for each page on your site.”

Meta Description

The meta description is part of MetaTags which summarizes the page’s content & is MVP in Digital Marketing. Search engines often use it for the snippet in search results.

A meta description tag should generally inform and interest users with a short, relevant summary of what a particular page is about. They are like a pitch that convinces the user that the page is exactly what they’re looking for.

Meta description Example

SIDENOTE. Google doesn’t always show the meta description you set. Sometimes they show a different snippet.

How to add a meta description to your page

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

<! --Syntex -->
<meta name="description" content="Place the meta description text here."/>

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

meta-description
How to find and fix common meta description mistakes:
  1. Too long/short. Google says “there’s no limit on how long a meta description can be, but the search result snippets are truncated as needed, typically to fit the device width.”
  2. Doesn’t exist. Google says to “make sure that every page on your site 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. Google says that you should “differentiate the descriptions for different pages.”

Meta keywords

these  are a specific type of Metatags that appears in the HTML code of a Web page and help tell search engines what the topic of the page is.

Meta keywords are distinguished from regular keywords because they appear “behind the scenes,” in the source code of your page, rather than on the live, visible page itself.

According to the official site
How to add a meta description to your page

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

<! --Syntex -->
<meta name="keywords"
 content=" sitemap,sitemaps,Digital marketing"/>

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

how to set up keywords in wordpress tags
how to setup keywords

Meta robots

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

<! -- Syntax -->
<meta name=”robots” content="index, follow">

Using the wrong attributes in the meta robots tag can have a catastrophic impact on your site’s presence in the search results & in Digital Marketing. Your SEO efforts rely on you understanding this tag and using it effectively.

With that in mind, here are the values you can use in this tag:

  • index: tells bots to index the page;
  • noindex: tells bots not to index the page;
  • follow: tells bots to crawl links on the page, and that you also vouch for them;
  • nofollow: tells bots not to crawl links on the 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 <meta name=”robots” content="none">, which is the same as index, follow. Not setting a meta robots tag is also equivalent to index, follow.

SIDENOTE. Google sees “no follow” tags as hints, not directives. There are other attributes such as noarchive, noimageindex, nosnippet, etc. But as these are more advanced values, we’re not going to talk about them in this post. 

How to add a meta robots tag to your page

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

<! --Syntex -->
<meta name="googlebot" content="index" />

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

How to add a meta robots tag to your page
How to diagnose and fix common meta robots mistakes
  1. Noindexed pages blocked by robots.txt. This prevents Google from seeing the noindex robots tag, so they may still index the URL.
  2. Rogue meta noindex. This prevents Google from indexing the page, so it’ll get no organic traffic.
  3. Rogue meta nofollow. This prevents Google from crawling the links on the page, which might prevent the discovery and indexing of important content. It also prevents the flow of PageRank to those pages—which may not be desirable.

Meta viewport

A meta viewport tag sets the visible area of a web page. It is used to instruct the browser how to render the page on different screen sizes (i.e., desktop/tablet/mobile) which is a Key Factor for Digital Marketing.

“presence of this tag indicates to Google that the page is mobile-friendly.” This matters because Google ranks mobile-friendly web pages higher in mobile search results as of 2015.

Google says
How to add a meta viewport tag to your page

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

<! --Syntex -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note that 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.

Meta Charset

The meta charset tag sets the character encoding for the web page. In other words, it tells the browser how the text on your web page should be displayed.

There are hundreds of 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.

Character formatting issues are bad for user experience and can cause your pages to look quite broken.

That can lead to SEO problems like:

  • People not wanting to link to your page.
  • High bounce rate, low time on page, and low dwell time.
  • Search engines not understanding your content.

But let’s be real about this:

Unless your page is severely broken as a result of charset issues, which is unlikely, the impact is going to be quite minimal.

Still, it’s worth noting that Google recommends using Unicode/UTF‑8 where possible.

The bad meta tags

Nothing bad will happen to your site if you use these — let me just make that clear. They’re a waste of space though; even Google says so (and that was 12 years ago now!). If you’re ready and willing, it might be time for some spring cleaning of your <head> area as it doesn’t help with DIgital marketing.

  1. Author/web author – This tag is used to name the author of the page. It’s just not necessary on the page.
  2. Revisit after – This meta tag is a command to the robots to return to a page after a specific period of time. It’s not followed by any major search engine.
  3. Rating – This tag is used to denote the maturity rating of content.
  4. Expiration/date – “Expiration” is used to note when the page expires, and “date” is the date the page was made. Are any of your pages going to expire?
  5. Copyright – That Google article debates this with me a bit, but look at the footer of your site. Why say it twice?
  6. Abstract – This tag is sometimes used to place an abstract of the content and used mainly by educational pursuits.
  7. Distribution – The “distribution” value is supposedly used to control who can access the document, typically set to “global.”
  8. Generator – This is used to note what program created the page. Like “author,” it’s useless.
  9. Cache-control – This tag is set in hopes of controlling when and how often a page is cached in the browser.
  10. Resource type – This is used to name the type of resource the page is, like “document.” Save yourself time, as the DTD declaration does it for you.

There are so many meta tags out there, I’d love to hear about any you think need to be added or even removed! Shout out in the comments with suggestions or questions.

So, This was 101 Guide to the Sitemaps in 2021.Also, Check 101 Guide to the Sitemaps in 2021.

If you need help with your Website Development or Digital Marketing, discover our Services.

Ghanshyam jha

Content Writer, Social Media, Marketing, Rainmaker & Digital Marketing Manager Who’ll Help You Paint a Canvas for your Biz & Your Life! when I'm Not Keeping Busy with hyCorve, you can find me @ghanxt.

All author posts
Write a comment