🔥 April's Final Countdown Sale:

Informative

10 Must-Use Meta Tags for SEO: A Beginner-friendly Guide

Dive into the world of SEO with our beginner's guide on Meta tags for SEO. Learn how to craft meta tags that get your site noticed by search engines.

By

Githu Ravikkumar

Published Date:

Mar 18, 2024

|

Last Modified:

Apr 22, 2024

An image presenting a blog feature graphic titled 'The ABCs of SEO: Meta Tags for Beginners', a guide to SEO essentials.
An image presenting a blog feature graphic titled 'The ABCs of SEO: Meta Tags for Beginners', a guide to SEO essentials.

Introduction to meta tags for SEO

Did you know that meta tags are like your website’s identity card? It's true! These tags are placed on your website's code to tell search engines exactly what's on those pages. Imagine your website is a big box of toys, and each meta tag is a label telling you what toy is inside without opening the box. This way, Google knows exactly where to find the right you (or web page) someone is looking for.

Meta tags are invisible to visitors; they live in the code of your website. But they're super important because they tell Google the name of your page, what’s on it, and even if it should show up when people search. 

Let’s make your website easy for Google to find and love in this blog. ⭐

What are the meta tags supported by Google?

Google supports a lot of meta tags to understand your web content better. While some tags are essential and taken into consideration, others can be omitted as Google no longer considers them critical. 

Check out the complete list of supported meta tags at the link below: 👇

https://developers.google.com/search/docs/crawling-indexing/special-tags

In this blog, I'm going to tell you all about the meta tags supported by Google

NOTE: Google regularly updates its search algorithms, so the rules for meta tags can change. Keep an eye on updates when adjusting your meta tags.

So, without further ado, let’s dive in! 🚀

1. Meta title

i) What is a meta title?

The meta title is a brief and concise title for a webpage. It appears in search engine results and browser tabs and is the first thing your audience sees. It's crucial for giving users and search engines a quick insight into the page's content.

An image of a Google search results page showing the meta title for 'hook generators' in a live example for effective SEO use.

ii) Why is it important for SEO?

It's the first impression users have of your site in search results. A well-crafted title can influence click-through rates, directly impacting SEO performance. Search engines use it to understand the subject of the content, contributing to page ranking. It's a major factor in user decision-making on whether to visit a site.

iii) Meta title best practices

  • Keep it under 60 characters to ensure it displays fully in search results.

  • Include primary keywords towards the beginning.

  • Make it relevant and descriptive of the page content.

  • Avoid keyword stuffing.

  • Use unique titles for each page.

  • Incorporate the brand name, preferably at the end.

  • Reflect the user's search intent.

iv) How to add a meta title to your page?

  1. Not using a CMS

    Find your HTML code and paste code in the below <head> section of your page.

    <title>Your meta title title goes here</title>

  2. Using a CMS

    Yoast SEO lets you add a meta title easily if you are using WordPress. It is beginner-friendly, and using the tool requires no SEO knowledge. 


    You can easily input and edit the meta title on any page of your website. 

    Just download, install, and activate the plugin. Refer to this blog for step-by-step instructions.


    https://www.sociummedia.com/blog/wordpress-seo/


    NOTE:
    Keep an eye on the green bar below while writing your meta title; if the bar turns green, you have hit the optimal limit.   

v) How to find and fix common title tag mistakes

Common mistakes often include having duplicate titles, titles that are either too long or too short, and titles that are missing altogether.

  1. Using tools 


    I use a tool called SEOOptimer to check if websites have a title tag or not. Simply enter your URL and hit 'check.'

    A screenshot from SEOOptimer indicating GravityWrite's website has an SEO-optimized meta title within the recommended length.


    If your website doesn't have a title tag, you will get a message saying: 'Your page does not appear to have a title tag.' This means you need to add a title tag to the website you checked.

  2. Using the inspect option from your browser

    You can also check for a title tag using the inspect option in your browser. Simply right-click on the webpage you want to check, and a dialogue box will appear. Scroll through it to find the 'inspect' option and click on it. Then, press Ctrl + F, enter the word 'title' in the search field, and look for something that resembles: <title> </title>. If you can't find a title tag, it indicates that your website needs one.

    A snapshot using Chrome's inspect element feature to check the meta title for GravityWrite's page, useful for SEO demonstrations.

2. Meta Description

i) What is a meta description?

A meta description is a summary of a page's content that shows up in search engine results pages (SERPs) below the page's title. It delivers a summary of what the page is about to your target audience.

ii) Why is it important for SEO?

While it has no direct impact on search engine rankings, it influences click-through rates by offering searchers a quick preview of what to expect on your website. A compelling description can make your page stand out in SERPs, encouraging more clicks and potentially improving your page's perceived value by search engines.

An image of Google search results presenting how a meta description for 'hook generators' appears, demonstrating SEO impact.


NOTE:
Google may display a different meta description than the one you initially provided if it finds the new description more relevant.

iii) Best practices

  • Keep it between 150-160 characters to avoid being cut off in SERPs.

  • Include targeted keywords naturally.

  • Write unique descriptions for each page.

  • Make it action-oriented to encourage clicks.

  • Provide a clear value proposition.

  • Reflect the content of the page accurately.

  • Use an active voice for clarity and engagement.

iv) How to add a meta description to your page?

  1. Not using a CMS

    It is the same process as adding your meta title.

    Find your HTML code and paste code in the below <head> section of your page.

    <meta name="description" content="Your description here">


  2. Using a CMS

    If you are using a CMS like WordPress, Yoast SEO lets you add a meta description as well in a few steps. 


    Just download, install, and activate the plugin. Refer to this blog for step-by-step instructions.


    NOTE:
    Keep an eye on the green bar below while writing your meta description; if the bar turns green, you have hit the optimal limit.   

v) How to find and fix common description tag mistakes?

Common SEO mistakes include not writing short and unique meta descriptions for each webpage, which can affect how well your site appears in search results.

  1. Using tools

    You can use tools like SEOOptimer to check your meta description or any tool you wish. The idea is to ensure that your site has a unique, engaging, and SEO-friendly meta description.

    A screenshot from SEOOptimer displaying GravityWrite's website meta description, confirming it meets SEO best practices length.


    If your website doesn't have a description tag, you will get a message saying: 'Your page does not appear to have a title tag.' This means you need to add a title tag to the website you checked.

    1. Using the inspect option from your browser

    You can also check for a description tag using the inspect option in your browser. Simply right-click on the webpage you want to check, and a dialogue box will appear. Scroll through it to find the 'inspect' option and click on it. Then, press Ctrl + F, enter the word 'title' in the search field, and look for something that resembles: <meta name="description" content="Your description here">

    If you can't find a description tag, it indicates that your website needs one.

    An image of Chrome's inspect element function verifying the presence of GravityWrite's meta description for SEO tutorials.

    Meta description example:

    <meta name="description" content="Want to improve your search rankings? Check out these AI SEO tools compared and reviewed by our experts and elevate your online presence.">


    I have included the primary keyword naturally, according to the best SEO practices in the above example.

    vi) How to generate meta titles and descriptions using AI?

    Meta tags are crucial for your ranking. Creating them has become simple with free AI tools available on the market, such as GravityWrite. The days of struggling to write SEO-friendly meta titles are over. Now, with sophisticated tools, you can effortlessly generate meta titles in seconds.

    A screenshot of GravityWrite's homepage showcasing AI-powered content creation tools, relevant for discussing SEO strategy.

    Here is how:

    • Step 1: Go to GravityWrite and click 'Start for free'.

    • Step 2: Sign up and create your account using your Google account.

    • Step 3: Launch the tool and search for 'Meta Title and Description Generator'.

    • Step 4: Enter your primary keyword and choose a language if needed (it supports over 30 languages).

    • Step 5: Generate and select your preferred meta titles and descriptions.

    • Step 6: Apply your chosen meta tags to your CMS.

    A snapshot from GravityWrite's meta title and description generation tool, providing AI-crafted options for 'vegan dog foods'.

3. Meta robots

i) What are Meta robots tag?

Meta robot tags provide instructions to search engine crawlers about how to index or follow links on a specific webpage. It controls the visibility of your website's content in search engines.

ii) Why is it important for SEO?

Using meta robot tags, you can prevent search engines from indexing duplicate content, specify pages not to follow, and manage the indexing of your site's content more effectively, improving SEO performance.

iii) Syntaxes:

  • index: Tells Google crawlers to index the page 

  • noindex:  Tells Google crawlers 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.

iv) Usages:

  1. How to use the nofollow tag
  • For a single link: Add rel="nofollow" inside the link tag. This tells search engines not to follow this specific link. For example, if you're linking to a site you don't fully trust or an ad, you'd write it like this in HTML: <a href="http://example.com" rel="nofollow">Example Site</a>.

  • For all links on a page: You can tell search engines to treat all links on a page this way by adding a meta tag in the header of your HTML document. Like this: <meta name="robots" content="nofollow">. This is like saying, "Please ignore all links on this page for ranking purposes."

  1. How to use the follow tag
  • For a single link: You don't usually need to add anything because search engines automatically follow links. But if you're overriding a previous nofollow or want to be extra clear, you could technically add rel="follow" (though it's not standard practice and not necessary).

  • For all links on a page: Again, you don't need to do anything special for search engines to follow links on your page since it's their default behavior. But if you have previously set your page to nofollow and want to change it back to allow all links to be followed, you could use a meta tag in the header like <meta name="robots" content="follow">. However, just removing any nofollow tags would have the same effect since follow is the default state.

In simple terms, you use "nofollow" when you want to link to something without helping its ranking. You don't need to use "follow" because search engines already follow links unless you've told them not to.

v) Best practices

  • Use `index, follow` for pages you want indexed and links followed.

  • Apply `noindex, follow` to prevent a page from being indexed while still allowing link crawling.

  • Use `noindex, nofollow` for pages that should remain completely private.

  • Be cautious when using these tags to avoid accidentally blocking important content.

  • Regularly audit your use of robots tags to ensure they're correctly applied.

How to add the robots tags to your page?

  1. Not using CMS:

    Copy and paste the code given below in the <head> section of your HTML document. The tag should look something like this:

  • <meta name="robots" content="index, follow"> - Tells the search engines to index the page and follow links 

  • <meta name="robots" content="noindex, follow"> - Tells the search engines to index the page but still allow following links

  • <meta name="robots" content="index, nofollow"> - Tells the crawlers to index the page but prevent search engines from following links

  • <meta name="robots" content="noindex, nofollow"> - Tells the crawlers not to index and follow the links of the page.

  1. Using a CMS:

Looking to boost your website's visibility on search engines? The Yoast SEO plugin is here to help! With its advanced features, you can fine-tune how search engines display your content. 

In the plugin's advanced settings, 

  • You can decide whether you want your website or page to appear in search results.

  • You also have the option to instruct search engines on whether they should follow the links within your posts.

Using these features, you can optimize your website's visibility and ensure that your content reaches the right audience effectively. 

4. Meta Refresh Redirect

i) What is a meta refresh redirect?

Meta refresh is an HTML tag used to redirect a user from one page to another after a specified number of seconds. It is often utilized client-side, meaning it happens in your browser rather than on your server.

ii) Is it good or bad for SEO?

It's not recommended for SEO as it can confuse search engines and users. Search engines might not index the content correctly, and users may have a poor experience. If necessary, use HTTP status codes for redirects instead.

iii) Best practices

  • Avoid using meta-refresh redirects if possible.

  • Use HTTP 301 redirects for permanent moves, as they are more SEO-friendly.

  • If you must use meta refresh, set a delay long enough for users to read any message on the page.

  • Communicate to the user that they will be redirected.

iv) How to add it to your page?

  1. Not using CMS:

    Add this piece of code in the head section of your HTML code 


    <meta http-equiv="refresh" content="time;url=http://www.example.com/"> 


    NOTE:
    Generally, an interval of 5 seconds is used, so you have to replace the number ‘5’ in the time section, which will redirect users to a new URL after 5 seconds.


  2. Using a CMS 


    CMS like WordPress: Directly editing the HTML of a page or using plugins that allow redirects.

v) How to find and fix common mistakes?

The main mistake is overusing it or using it for the wrong reasons. Regularly review your site to ensure redirects are implemented correctly and switch to HTTP redirects where possible.

vi) Real-time examples

In this example, the URL mentioned will be redirected in 5 seconds.

Here is the snippet:

<meta http-equiv="refresh" content="5; URL='http://www.example.com/new-page.html'">

5. Meta Viewport

i) What is a meta viewport tag?

The meta viewport tag tells the browser how to control the page's dimensions and scaling on different devices, especially mobile phones. It's crucial for creating responsive designs that work on all screen sizes.

ii) Why is it important for SEO?

A mobile-responsive site is a must for SEO, as Google says more than 50% of the total traffic comes from mobile users only. Moreover, a responsive design improves usability and accessibility, factors that search engines consider when ranking sites. It ensures a good user experience across all devices, which can decrease bounce rates and increase dwell time.

iii) Best practices

  • Always include the viewport meta tag in your HTML documents.

  • Use width=device-width to match the screen's width in device-independent pixels.

  • Set initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.

  • Avoid setting large values for maximum scale to ensure content is accessible and legible.

  • Test your site on various devices to ensure the viewport is set correctly.

iv) How to add it to your page

  1. Not using CMS:


    Place this code in the HTML code in the <head> section

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


  2. Using a CMS:

    In CMS like WordPress, most themes are responsive and include this tag by default. Check the theme's documentation or the header.php file to confirm.

v) How to find and fix common mistakes?

  • Common errors include missing viewport tags or incorrectly set properties. 

  • Use mobile usability tests provided by tools like Google's Mobile-Friendly Test to identify and fix issues.

vi) Real-time examples

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

What does it mean? The meta tag optimizes web pages for mobile devices by setting the viewport width to match the device's width and the initial zoom level to 1.

6. Meta Charset

i) What is a meta charset?

The meta charset tag specifies the character encoding for the HTML document. This ensures that all characters in the document are displayed correctly across different browsers and platforms.

There are a bunch of character sets but there are only 2 common and widely used ones.

  • UTF-8 - Character encoding for Unicode;

  • ISO-8859-1 - Character encoding for the Latin alphabet.

You can check out the complete list here: https://www.iana.org/assignments/character-sets/character-sets.xhtml

ii) Why is it important for SEO?

Correct character encoding helps prevent issues with the display of content, ensuring that search engines accurately interpret and index your site's content. This contributes to a better user experience and site performance. 

It can lead to some serious consequences like 

  • Reduced website authority and lower search engine rankings due to a lack of backlinks.

  • Lower conversion rates and search engine rankings from high bounce rates and low engagement.

  • Poor visibility in search results due to search engines struggling to index and understand content.

iii) Best practices

  • Use UTF-8 encoding as it covers most characters and symbols you'll need.

  • Declare the charset at the beginning of your HTML document within the <head> section.

  • Regularly check your pages for encoding issues, especially if they contain special characters.

iv) How to add it to your page

  1. Not using CMS:


    Place the below code at the top of the <head> section as it is applicable for the entire site—it is universal.

    <meta charset="UTF-8"> at the top of the <head> section.


    By chance, if you are using HTML4, you have to use the code given below


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


  2. Using a CMS:

    While using CMS like WordPress, most modern themes and CMS platforms automatically use UTF-8. If required, you can check and adjust this setting in the theme's header.php file if necessary.

v) How to find and fix common mistakes?

  1. Using tools:

    Common issues include incorrect or missing character declarations.

    While UTF-8 is a common chat set, mentioning that might probably solve your issue.

    If the issue persists and you want to ensure that your site is free from such errors, you can validate it by running a simple site audit from Ahrefs, and in the page explorer settings, you can modify the settings.


  2. Using your web browser:
  • Go to your website in a browser.

  • Right-click and choose "View Page Source" or press Ctrl+U (Windows/Linux) or Command+Option+U (macOS).

  • Press Ctrl+F (or Command+F on Mac) and type <meta charset> to find it.

  • Make sure it's near the top, and it says <meta charset="UTF-8">.

  • There should only be one, and no spelling mistakes.

  • If anything's wrong, correct it, save it, and then update your website.

  • After fixing, refresh your page to check the changes. Use online tools if needed to ensure no errors.

7. Googlebot meta tag

The googlebot meta tag is used to provide specific instructions to Google's web crawler, Googlebot, about how to index or follow links on a page. This tag is part of the broader family of meta tags in HTML that can control the behavior of search engine crawlers and affect how web pages are processed and represented in search engine results.

Syntax:

<meta name="googlebot" content="directive1, directive2">

Here's a breakdown of how you can use the tag:

  • name="googlebot": This specifies that the instructions are meant specifically for Googlebot.

  • content="directive1, directive2" 

Here, you can include one or more directives, separated by commas, to control Googlebot's behavior. Common directives include:

  • noindex: Tells Googlebot not to index the page.

  • nofollow: Tells Googlebot not to follow any links on the page.

  • noarchive: Prevents Google from showing a cached link to this page in search results.

  • nosnippet: This prevents Google from showing a snippet (a description or preview) for this page in search results.

  • noimageindex: Tells Googlebot not to index images on the page.

  • none: Equivalent to using noindex, nofollow.

  • all: Allows indexing and following of links. This is the default behavior if no googlebot meta tag is present.

Examples:

  1. To tell Googlebot not to index a page and not to follow any links on that page:

    <meta name="googlebot" content="noindex, nofollow">

  2. To prevent Google from storing a cached copy of the page:

    <meta name="googlebot" content="noarchive">

8. Meta nositelinkssearchbox

The HTML meta tag <meta name="google" content="nositelinkssearchbox"> tells Google not to display a sitelinks search box within the search results for your website. In other words, a search box directly in the search results that allows users to search within a specific website.

Syntax:

<meta name="google" content="nositelinkssearchbox">

Impact:

  • The sitelinks search box improves user experience by allowing content searches directly from search results pages.

  • If your site's design or user experience strategy doesn't fit with a sitelinks search box, use the nositelinkssearchbox directive.

  • The nositelinkssearchbox directive helps customize your site's presentation in Google search results.

Factors:

The presence of the search box in Google's search results for certain websites can vary based on several factors, including but not limited to:

  • The website's directives via meta tags.

  • Google's algorithms and policies, may override or ignore meta tag directives in some cases.

  • The perceived utility or relevance of the search box for users is determined by Google.

Google has guidelines and algorithms that determine when and where a sitelinks search box will appear. Not all sites will display a sitelinks search box even if they don't use the nositelinkssearchbox meta tag. It’s a feature that Google typically reserves for sites that it considers to be notably authoritative and useful for a particular query.

Real-time examples:

YouTube: You can see a search box below the meta description, it could mean that Google has added a search box thinking that it will be beneficial for the users or YouTube has not added the nositelinkssearchbox

A screenshot showing a Google search engine page with a search box, ready for queries, here featuring the keyword 'YouTube'.

9. Meta notranslate

The notranslate tag is used to tell Google's crawler not to offer a translation for a web page in search results. 

  • When Google detects that the content of a page is in a language different from the user's Google interface language, it sometimes offers a link to translate the page.

By including this meta tag in the HTML of a page, a webmaster can opt out of this automatic translation feature for that page.

Syntax

<meta name="googlebot" content="notranslate">

Here, the directive tells Googlebot to not provide automatic translation for this page.

Use cases:

This tag is particularly useful for pages where translation might not be desirable or necessary. For example:

  • Pages where the content is already provided in multiple languages by the website.

  • Pages that contain specialized or technical language that automated translations might not handle well.

  • Content that is meant for a specific audience in a specific language, and where translation might alter the intended meaning.

10. Meta nopagereadaloud

The nopagereadaloud tag tells Google not to provide the 'Read Aloud' feature for the page. The 'Read Aloud' function is an accessibility feature that can read the text on a webpage out loud to the user, which is particularly useful for those with visual impairments or for users who prefer auditory learning.

Syntax:

<meta name="google" content="nopagereadaloud">

Here, the directive, content="nopagereadaloud" lets Google know that the page should not be available for the 'Read Aloud' feature.

Use cases:

  • The content may not be suited for audio playback (e.g., it's graphical or interactive in a way that doesn't translate well to speech).

  • The website may already provide its version of audio playback that's tailored to the content.

  • There may be licensing or copyright considerations that restrict audio reproduction of the content.

  • The website content might not work align with automated text-to-speech translation.

Importance of Meta Tags for SEO

Meta tags are important for SEO because they help search engines understand what your website's pages are about. 

  • Boost Clicks: The title and description you see in search results are the first impressions of your brand. Make them catchy, and more people will click on your site.

  • Help Google Find You: Meta tags tell Google what your page is about, helping your site show up in the right searches.

  • No Duplicate Content: Some tags tell Google which version of similar pages is the main one, avoiding mix-ups.

  • Makes Your Content Clearer: Special meta tags help Google understand your page better (like if it’s selling something or reviewing a product), making your site more likely to stand out.

  • Guide Google: With robot meta tags, you can tell Google which pages to look at and link to, giving you more say in how your site is shown in searches.

Wrapping Up: Mastering the Art of Meta Tags

I hope this blog has provided you with a clear understanding of the meta tags for SEO and their importance. Remember, following best practices and crafting compelling meta tags is crucial for drawing search engines and users to your website.

Key Takeaways:

  • Meta tags function as brief introductions to your web pages, informing search engines about the content they hold.

  • Effective meta tags have the potential to significantly improve your website's ranking and visibility in search results.

  • When crafting meta tags, prioritize clear, concise, and informative language that accurately reflects the content on your page.

  • Strategic use of meta tags can enhance the ability of search engines to understand your content.

It is important to remember that achieving long-term SEO success requires consistent effort and steady optimization. While tools like GravityWrite can provide valuable assistance in content generation, prioritizing the delivery of valuable information to your audience remains critical.

By following these guidelines and dedicating the necessary effort, you can create meta tags that not only resonate with search engines but also entice users to click through and delve deeper into your website's offerings.

FAQ on Meta Tags for SEO

  1. What are meta tags for SEO?

    Meta tags are pieces of code that describe a page's content to search engines and website visitors. They don't appear on the page itself but in the page's code, helping search engines understand what the page is about.


  2. Does GravityWrite generate meta tags?

    Meta tags are crucial for SEO as they directly affect how search engines index and rank your blog posts. Properly used, they can improve your blog's visibility and click-through rates from search results.


  3. What are the most important meta tags I can use?

    The most critical meta tags for a blog are the title tag, which serves as the title of your page in search results; the meta description, which offers a brief description of your page's content; and the meta keywords tag, though less important now, can still sometimes be useful for SEO.


  4. How long should my meta title and description be?

    A meta title should be under 60 characters for the best SEO performance to ensure it displays fully in search results. Meta descriptions should be about 150-160 characters long for similar reasons.


  5. Can meta tags affect my site’s click-through rate (CTR)?

    Yes, a well-written meta description can entice users to click on your page in search results, potentially increasing your site's CTR. This suggests to search engines that your page is valuable, possibly enhancing your rankings.

stay in the loop

Subscribe for more inspiration.