Beginner’s Guide to Using HTML Meta Tags for Better SEO

A meta tag is a piece of code that is added to the head section of an HTML webpage. It provides additional information about the webpage and its content and is typically used by search engines and other web-based tools to understand and index the webpage more effectively.

Meta tags are not visible to users when they visit a webpage, but they can be viewed by looking at the source code of the page. They are typically added to the head section of the HTML code.

Meta tags can be used to provide a variety of information about a webpage, including its title, description, keywords, author, language, and more. Some common meta tags include the title tag, which provides a brief, accurate, and descriptive title for the webpage; the meta description tag, which provides a brief summary of the webpage’s content; and the meta keywords tag, which provides a list of keywords that are relevant to the webpage’s content.

How Meta Tags are useful in SEO

Meta tags used to read by search engine robots and provide a brief summary of the webpage’s content, a list of keywords that are relevant to the webpage’s content, author name, date of publishing etc helps robots to understand and index the page in a better way.

They can also be used to improve the way a webpage is displayed on social media platforms, and to provide other useful information to web-based tools and services.

meta tags, html meta tags, meta tags for SEO

Classification of Meta Tag

HTML meta tags are not standardized categorized, however they may typically be divided into groups based on what they are used for and what information they convey. Meta tag categories that are typical include:

Title and Description Tags

These meta tags provide information about the webpage’s title and description and are often used by search engines to understand and index the webpage’s content. Examples of these meta tags include the title tag, and the meta description tag, which provides a brief summary of the webpage’s content.

The <title> tag is an HTML tag that is used to define the title of a web page. The title is the text that appears in the title bar of a web browser, and it is also used as the title of the page in search engine results.

The <title> tag is placed in the <head> section of an HTML document, and it should be placed between the <head> and </head> tags.

Here is an example of the <title> tag in action:

<head>
  <title>My Page Title</title>
</head>

Here is an example of the <meta> tag is used to provide a description of a webpage:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <meta name="description" content="This is my personal website where I share information about myself and my interests.">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my personal website where I share information about myself and my interests.</p>
</body>
</html>

In the above examples, the <meta> tags are used with the name=”description” attribute to provide a description of the webpage. This description will not be displayed on the page itself, but it will be used by search engines to understand the content of the page and to display a brief summary of search results.

Other Important Meta tag which is widely used :

  1. <meta name="author">: This meta tag is used to provide the name of the author of the page. This information can be useful for search engines and other platforms that need to credit the author of the page.
  2. <meta name="date">: This meta tag is used to provide the date when the page was published. This information can be useful for search engines and other platforms that need to know when the page was created or last updated.

Keyword Tags

Keywords meta tags provide a list of keywords that are relevant to the webpage’s content and are often used by search engines to understand the topic of the webpage and improve its search engine ranking.

Here is an example of the <meta> tag being used with the name="keywords" attribute to provide a list of keywords:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <meta name="keywords" content="personal, website, interests, hobbies, blog">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my personal website where I share information about myself and my interests.</p>
</body>
</html>

In this example, the <meta> tag is used with the name="keywords" attribute to provide a list of keywords that describe the content of the webpage. This list of keywords include “personal”, “website”, “interests”, “hobbies”, and “blog”. These keywords will be used by search engines to understand the content of the page and to help index and rank the page in search results.

Robots Tags

Robots’ meta tags provide instructions to search engine robots, telling them whether or not to index a webpage and how to handle the webpage’s content.

Here is an example of the <meta> tag being used with the name="robots" attribute to prevent search engines from indexing a webpage.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <meta name="robots" content="noindex">
</head>
<body>
  <h1>Under Construction</h1>
  <p>Sorry, this page is currently under construction and is not available for public viewing.</p>
</body>
</html>

In this example, the <meta> tag is used with the name="robots" attribute and the value "noindex" to prevent search engines from indexing the webpage. This means that the page will not appear in search results and will not be accessible to search engine crawlers.

Other Popular Tags in This Category Are :

  • none: Combines the noindex and nofollow tags.
  • noydir: Tells search engines not to use the page in the Yahoo! directory.
  • noarchive: Tells search engines not to show a cached version of the page in their search results.
  • nosnippet: Tells search engines not to show a snippet or description of the page in their search results.

These are just a few examples of robot meta tags that you can use on your website. There are many more meta tags available, each with its own specific purpose. For a complete list and more information, you can visit the Webmaster Central Blog.

Social Media Tags

These meta tags provide information about how a webpage should be displayed when it is shared on social media platforms and can help improve the way the webpage looks on social media and increase its chances of being shared and engaged with by users. Examples of these meta tags include the meta og: title tag, which provides a title for the webpage when it is shared on social media, and the meta og: description tag, which provides a description for the webpage when it is shared on social media.

<meta property="og:title" content="The title of the page"/>

This tag is used to specify the title of the page when it is shared on social media platforms. This title is often used by platforms to generate a rich preview of the page that includes the title and a brief description.

<meta property="og:description" content="Page description"/>

This tag is used to specify the description of the page. which is used when the page is shared on social media.

<meta property="og:image" content="https://example.com/image.jpg"/>

This tag is used to specify the URL of an image that represents the page. This image is often used by social media platforms to generate a rich preview of the page that includes the image.

meta property="og:url" content="https://example.com/page"/>

This tag is used to specify the URL of the page. This URL is often used by social media platforms to generate a rich preview of the page that includes a link to the page.

<meta property="og:type" content="website"/>

This tag is used to specify the type of content on your page. which is used when the page is shared on social media.

These are standard but there are many other social media meta tags specifically for Facebook and Twitter.

Facebook Meta Tags

  1. og:title: The title of your content, which will be used as the title of the link preview on Facebook.
  2. og:description: The description of your content, which will be used as the description in the link preview on Facebook.
  3. og:image: The URL of the image you want to use as the thumbnail image in the link preview on Facebook.
  4. og:url: The URL of your website, which will be used as the link in the link preview on Facebook.
  5. og:type: The type of content on your page, such as article for an article or video for a video.
  6. fb:app_id: Your Facebook app ID, which you can use to enable Facebook functionality on your website, such as the ability to like and share content.
  7. og:locale: The locale of your content, which will determine the language and region in which the link preview is shown on Facebook.

These are just a few examples of Facebook meta tags that you can use on your website. There are many more meta tags available, each with its own specific purpose. For a complete list and more information, you can visit the Open Graph Protocol website.

Twitter Meta Tags

Here is a list of common Twitter meta tags that you can use on your website:

  1. twitter:card: The type of card to be used for the link preview on Twitter, such as summary for a text-based preview or summary_large_image for a preview with a large image.
  2. twitter:title: The title of your content, which will be used as the title of the link preview on Twitter.
  3. twitter:description: The description of your content, which will be used as the description in the link preview on Twitter.
  4. twitter:image: The URL of the image you want to use as the thumbnail image in the link preview on Twitter.
  5. twitter:url: The URL of your website, which will be used as the link in the link preview on Twitter.
  6. twitter:site: The Twitter username of the website, which will be used to credit the content in the link preview on Twitter.
  7. twitter:creator: The Twitter username of the content creator, which will be used to credit the content in the link preview on Twitter.

These are just a few examples of Twitter meta tags that you can use on your website. There are many more meta tags available, each with its own specific purpose. For a complete list and more information, you can visit the Twitter Developers website.

Linkedin Meta Tags

Here is a list of common LinkedIn meta tags that you can use on your website:

  1. og:title: The title of your content, which will be used as the title of the link preview on LinkedIn.
  2. og:description: The description of your content, which will be used as the description in the link preview on LinkedIn.
  3. og:image: The URL of the image you want to use as the thumbnail image in the link preview on LinkedIn.
  4. og:url: The URL of your website, which will be used as the link in the link preview on LinkedIn.

These are just a few examples of LinkedIn meta tags that you can use on your website. There may be other meta tags available for LinkedIn, so it’s important to check the platform’s documentation for a complete list. You can visit the LinkedIn developer website for more information.

Instagram Meta tags

Here is a list of common Instagram meta tags that you can use on your website:

  1. og:title: The title of your content, which will be used as the title of the link preview on Instagram.
  2. og:description: The description of your content, which will be used as the description in the link preview on Instagram.
  3. og:image: The URL of the image you want to use as the thumbnail image in the link preview on Instagram.
  4. og:url: The URL of your website, which will be used as the link in the link preview on Instagram.

These are just a few examples of Instagram meta tags that you can use on your website. There may be other meta tags available for Instagram, so it’s important to check the platform’s documentation for a complete list. You can visit the Instagram developer website for more information.

Pinterest Meta Tags

Here is a list of common Pinterest meta tags that you can use on your website:

  1. og:image: The URL of the image you want to use as the thumbnail image in the link preview on Pinterest.
  2. og:description: The description of your content, which will be used as the description in the link preview on Pinterest.
  3. og:title: The title of your content, which will be used as the title of the link preview on Pinterest.

These are just a few examples of Pinterest meta tags that you can use on your website. There may be other meta tags available for Pinterest, so it’s important to check the platform’s documentation for a complete list. You can visit the Pinterest developer website for more information.

These are just a few examples of social meta tags for different platforms. Each platform may have its own specific set of meta tags, so it’s important to check the documentation for the platform you’re interested in to learn more.

Other Meta Tags

There are many other meta tags that can be used to provide additional information about a webpage, such as meta tags for verifying the website with search engines, specifying the language of the webpage’s content, and more. These meta tags can help improve a webpage’s SEO and user experience, but they should be used wisely and only if they are relevant and useful.

  1. <meta name="viewport">: This meta tag is used to control the behavior of the viewport on mobile devices. The viewport is the area of the screen that is used to display the web page, and this meta tag can be used to specify the width and initial scale of the viewport.
  2. <meta name="robots">: This meta tag is used to control the behavior of search engine bots when they crawl and index a web page. The value of this meta tag can be used to instruct search engines to index or follow the links on the page, or to not index or follow the links on the page.
  3. <meta name="googlebot">: This meta tag is used to provide specific instructions to Googlebot, the web crawler used by Google to index web pages. This meta tag can be used to specify the behavior of Googlebot when it crawls and indexes a page, such as whether to index the page or follow the links on the page.
  4. <meta name="referrer">: This meta tag is used to control the information that is sent in the Referer HTTP header when a user navigates from one page to another. The value of this meta tag can be used to specify the level of information that is sent in the Referer header, such as the full URL of the referring page or just the domain of the referring page.
  5. <meta http-equiv="refresh">: This meta tag is used to automatically refresh the page after a certain amount of time. This can be useful for pages that need to display up-to-date information, such as a live feed or a real-time dashboard.
  6. <meta http-equiv="cache-control">: This meta tag is used to control the caching behavior of the page. The value of this meta tag can be used to specify whether the page should be cached by the browser, and for how long. This can be useful for pages that contain sensitive information or that change frequently.
  7. <meta name="format-detection">: This meta tag is used to control the behavior of the browser when it encounters certain types of content on the page. The value of this meta tag can be used to specify whether the browser should automatically detect and handle phone numbers, email addresses, or other types of content.
  8. <meta name="application-name">: This meta tag is used to provide the name of the web application that is running on the page. This information can be useful for platforms that support web applications, such as the Chrome Web Store or the Microsoft Store.

These are just a few examples of additional HTML meta tags that are available. There are many other meta tags that can be used for different purposes, and the specific meta tags that are available will depend on the platform or system that is consuming the metadata.

Conclusion

In addition to providing information to search engines, meta tags can also be used to specify the character set for the page. This is important for ensuring that the text on the page is displayed properly, regardless of the user’s computer or device.

Overall, meta tags are an important part of optimizing a webpage for search engines and other web services. By providing relevant information and settings, they can help improve a page’s ranking and make it more easily discoverable by users.


Photo of author
Atul Kumar, This blog's creative force, shares expert insights on Google Ads, Meta Ads, Analytics, Tag Manager, Marketing Analytics, E-commerce advertising, and more

Leave a Comment