Meta Tag Definition: What Are Meta Tags?

Meta tags are part of the HTML tags that describe your page content to search engines and website visitors. The Meta tags appear only in the page’s code and anyone can check them via source code (Ctrl+U).

In short, Meta tags are key things for all search engines that appear in the HTML code of a website page and tells the search engine what the page is about, and they are the first impression and point of contact for all search engines.

Meta tags added in the <head> section of an HTML web page and they are the “Legally” Hide Words on Your Pages for Search Engines.

Every platform has different solutions for adding Meta tags, just like WordPress has free plugins to choose from. I personally recommend the All in One SEO Pack and Yoast SEO plugins. Both are popular and you can choose any according to your need.

Do Meta Tags matter for SEO in 2022?

Yes, they do, but not all Meta tags can help you in 2022.

In my experience, if you want to rank high in Google in 2022 then you also need to focus on high-quality content and user satisfaction. The main goal of this post is to explain which Meta tags are good to go with and which are simply dead and have no use.

(See below: There are a few tags, we can call them the bad Meta tags and we should simply ignore them.)

Meta Tags can affect the way that users see your site in the search results and whether or not they actually click through to your site.

John Mueller, 2017

How to check Meta tags on a site

If you want to check the Meta tags for any page, just right-click anywhere on the page and select “View Page Source”. You can also use tools like SEMrush (specifically the SEMrush Audit Tool), and Screaming Frog to check the Meta tags on any site.

The Most Important Meta Tags For SEO in 2022

I personally focus on the 8 major Meta tags which can improve the optimization of your startup business or running website.

I am sharing my opinions about them all below:

  1. Title tag
  2. Meta description
  3. Canonical Tag
  4. Alternative text (Alt) Tag
  5. Robots meta tag
  6. Social Media Meta Tags (Open Graph and Twitter Cards)
  7. Responsive Design Meta Tag

Title tag

The Title tag is the very first HTML element that specifies your web page for search engines and to visitors. The Title element supports all browsers including Chrome, Firefox, Safari etc.

Always add your Title tag in the <head> section of your site.

<head>
<title>This is Title Sample</title>
</head>

Optimal length for the Title tag: Google typically shows 55-64 characters (keep it under 60).

Title tag optimization is important for search engines and visitors. It shows up in the SERP and in Browser Tabs.

Browser Tab Title Tag shown below for Templatemonster post:

Screenshot showing how the page title appears in the browser.

SERP Title Tag shown below for Moti Hamou – Online Marketing Expert:

Screenshot showing how page titles appear in Google search results.

Title tags are the second most important on-page factor for SEO, after content. – Source: MOZ

You cannot add more than one <title> element in your web page.  – Source: w3schools

Key Points to write a good Title tag:

  • Add “modifiers” to your title tag (How to |The current year | Review |Best | Tips | Top |Find | Buy | Easy)
  • Embed long tail keywords in title tags
  • Add numbers to your title (9 Important HTML tags for your website to improve your SEO)
  • Start your title tag with your main targeted keyword
  • Don’t stuff your keywords
  • Every page should have a unique title tag

Meta description

A Meta Description is an HTML element that summarizes your web page. Search engines typically show the Meta description in search results below your Title tag.

Code sample

<head>
<meta name="description" content="This is a meta description sample. We can add up to 160 characters.">
</head>

Google does not use the Meta description as a ranking signal; still, it has a massive effect on your page CTR because it shows up in search results.

In December 2017, Google increased the length of snippets in search results. Now Google confirms it shortened search results snippets after expanding them last December.

What will be the optimum length for Meta Description?

“There is no fixed length for snippets. Length varies based on what our systems deem to be most useful.” He added, “Google will not state a new maximum length for the snippets because the snippets are generated dynamically.”

Source, Danny Sullivan

The new average length of the description snippet field on desktop is at around 160 characters, down from around 300+ characters.

Mobile characters for the search results snippets are now down to an average of 130 characters.

Google-generated Description in search results

Screenshot with search result snippets.

Key Points to write a good Meta Description tag:

  • Don’t put emphasis on the number of characters, as Google might pull Meta description text from your content based on a user’s query.
  • Do not add duplicate Meta Descriptions
  • Add clear Call-to-action (CTA) in your descriptions like Apply today, Check-out, Contact us today etc. See these CTA keywords for marketing campaigns
  • Add your targeted keywords in descriptions
  • Strategically provide solutions to a problem
  • Write for your users and encourage them to click with specific and relevant content
  • Add any discounts or offers you’ve going on
  • Show empathy while writing your Meta Descriptions

    Canonical Tag

The Canonical tag is an HTML link tag with “rel=canonical” attribute that is used if you have a single page URL that has the same content with other multiple page URLs.

By implementing the Canonical tag in the code, we are telling search engines that this URL is the main page and avoid indexing other duplicate page URLs.

A canonical tag Syntax:

<link rel="canonical" href="http://example.com/" />

Where should we choose a canonical URL?

Multiple URLs:

  • http://www.example.com
  • https://www.example.com
  • http://example.com
  • http://example.com/index.php

Google sees all the above URLs as duplicate versions of the Homepage. And to fix this problem, the canonical tag (rel=canonical) was invented.

Session ID URLs:

These are the automatic system-generated URLs and commonly generated due to the tracking URLs, breadcrumb links and permalinks in CMS

http://example.com/properties/villa-331-luxury-rental?partnerID=18
http://example.com/target.php?session_id=rj3ids98dhpa0mcf3jc89mq1t0

Mobile URL:

When using a special URL (m. example.com) for the mobile version of your website.

SEMrush itself has 2 versions – one is a mobile version and the other is a desktop version. For the mobile and desktop version, SEMrush is using the following canonical tag:

<link rel="canonical" href="https://www.semrush.com/" />
Screenshot from page HTML source that shows the canonical tag.

Alternative text (Alt) Tag

The Alt tag is important for any images, as search engines cannot read them, so you need to add proper Alt text to the images so the search engine can consider them.

Syntax for Alt Text:

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

Key points to consider while creating alt-tags for images:

  • All images should have informative filenames
  • Alt text needs to be short clear and to the point
  • Always use the original, right type of image, as this is an essential step towards success
  • Create an image sitemap
  • Use 50-55 characters (up to 16 words) in the alt text
  • Use an optimal file size without degrading its quality for faster page loading speed

“Adding an alt tag is very easy to do and you should pretty much do it on all of your images. It helps your accessibility and it can help us understand what’s going on in your image.”

Source

Robots Meta tag

The Robots Meta tag is an HTML tag that provides instructions to web crawlers on whether to index or noindex a web page.

The Robots Meta tag has four main values for search engine crawlers:

  • FOLLOW –The search engine crawler will follow all the links in that web page
  • INDEX –The search engine crawler will index the whole web page
  • NOFOLLOW – The search engine crawler will NOT follow the page and any links in that web page
  • NOINDEX – The search engine crawler will NOT index that web page

The Robots Meta tag syntax:

<meta name=”robots” content=”noindex, nofollow”> - Means not to index or not to follow this web page.
<meta name=”robots” content=”index, follow”> - Means index and follow this web page.

Note: The robots Meta tag should be placed in the <head> section of your web page.

Social Media Meta Tags (Open Graph and Twitter Cards)

Open Graph Tags:

Open Graph Meta tags are designed to promote integration between Facebook, LinkedIn, Google and the website URLs that you shared on these platforms.

Here is a sample of how Open Graph tags look like in standard HTML:

<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />

Twitter Cards:

Twitter cards work in a similar way to Open Graph, except you add these special Meta tags only for Twitter. Twitter will use these tags to enhance the display of your page when shared on their platform.

Here is a sample of how a Twitter card looks like in standard HTML:

<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">

How both Social Media Meta Tags look like:

Screenshot with how Twitter cards appear in the webpages' HTML source.

Head over to this post if you want to know everything about these tags.

Header tags

A Header tag is used for headings creations, i.e. by using these we can apply font changes.

The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

Here is an example of how we can use header tags taken from SEMrush:

<h1> 9 Tips for Boosting the Speed of your Shopify Website </h1>
<p>Paragraph of content</p>
<p>another paragraph of content</p>
<h2>Performance Analysis</h2>
<p>Paragraph of content</p>
<h3>Analyzes the Mobile and Desktop Performance with PageSpeed Insights</h3>

Important Point to consider: Use as Many H1 Tags as You Want

Source: Search Engine Roundtable

Responsive Design Meta Tag

The final important Meta tag is the Responsive Design Meta tag, which we call “Viewport Meta Element”. By using the viewport meta tag we can control layout for web pages on mobile browsers.

This viewport element is included in the head section of your web page.

Syntax:

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

If you want to learn more about this responsive design Meta tags, head over to this nicely written post.

Note: Do not use this responsive Meta tag if your website pages are not responsive, as it will make the user experience worse.

Meta Tags to ignore

Finally, there are a few tags – we can call them bad Meta tags and we should simply ignore them:

  • Keywords tag– Google does not use the keywords Meta tag in web ranking. – Source
  • Revisit after – This HTML tag is a command to robots to return to a page after a specific period. This tag is not followed by any major search engine and has no value in SEO. It is better to avoid this tag and leave it to the search engines to decide how to crawl your website. Syntax: <meta name=”revisit-after” content=”7 days” />
  • Expiration/date – This tag defines the expiration date of your page. Personally I would not recommend this, just remove this if you are using it. Syntax: <meta http-equiv=”Expires” content=”Fri, 28 January 2022 23:59:59 GMT”>
  • Site verification– Just ignore this. You can verify your site using Google Search Console and Bing Webmaster tool.
  • Copyright– Every site puts their copyright in the footer, so you don’t need a separate tag. A big NO for this tag.
  • Distribution – The “distribution” value is supposedly used to control who can access the document, typically set to “global”. It’s inherently implied that if the page is open (not password-protected, like on an intranet) that it’s meant for the world. Go with it, and leave the tag off the page. – Source
  • Generator – Useless tag.
  • Cache control –This tag allows web publishers to define how often a page is cached. Generally, these are not required; we can simply use the HTTP header instead of this HTML tag.
  • The ODP Robots Meta Tag – Google no longer follows this Meta tag. –Source
  • Geo Meta Tag – Google does not use Geo Meta tags to rank pages. – Source

So these are the few HTML tags which we should consider or simply ignore. Now you can easily use the relevant HTML Meta tags intelligently.

Don’t forget to comment below and share your views on HTML Tags. Thanks for reading!

Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.

21 comments
  1. Hi Ashok.
    Amazing post. You explained everything that I was searching about meta tag. (I even didn’t knew there is something like bad meta tag ;)) Really helpful. Thank you for sharing. Cheers!!
    Kritesh.

  2. I’ve heard quite a few people say meta description is not important anymore and i disagree entirely. Really glad that you have meta description in there – so important for so many reasons.

    1. Hi Gareth,

      Google does not use the Meta description as a ranking signal but meta description has massive effect on the CTR (click-through-rate) and it can positively impact a page ability to rank.

  3. Hello Ashok, and thank you for detailed explanation about stuff that’s been bothering me. One SEO tool keeps warning me that I’m not using Meta keywords tag, and as I recall from before – it doesn’t matter for Google any more. Does any other search engine (like that matters 🙂 ) have any use of those? And if I include them for others, will Google hold it against me?

    1. The keywords meta tag has negligible (if any) impact on SEO these days. Your time is better spent elsewhere. If your CMS adds it automatically, cool. If not, I wouldn’t waste too much time adding it.

  4. Why are you calling elements and attributes tags?

    Title tag: “ <- useless.
    Title element: `This is my page title` <- useful.

    Alt tag: “ <- no such thing in HTML.
    Alt attribute: “ <- useful.

    Perhaps learning the anatomy of HTML will also help SEO.

  5. This is a great case study. Looks like doing everything right. Let’s hope Google doesn’t come up with any change in algorithms.

  6. Thanks Ashok,
    No-one has really explained metatags the way you have. I needed this information to help me on improving the SEO in my website.

  7. After reading this post I have changed some of my blog post title and descriptions.. Let’s see what happens.. By the way great detailed article with high value.

  8. Hi Ashok!

    The meta example in the social media tag screnshot are not matching neither your description, nor the Twitter meta tag specification. (They should use the “name” attribute of the meta tag.)

    Cheers,
    Gabriel

  9. Thanks for sharing the fantastic post about the importance of Meta tags for websites. Just wondering do AMP pages need title tags and meta descriptions or are they pulled from the canonicalized page?

Comments are closed.

Stay updated

Get email updates on exclusive tips, strategies, and original research that help you boost organic rankings for clients.

You May Also Like