Meta Tags In HTML: What Are The Uses Of Meta Tags For SEO

  • Post category:HTML
  • Post author:
  • Post last modified:April 3, 2022
  • Reading time:13 mins read
You are currently viewing Meta Tags In HTML: What Are The Uses Of Meta Tags For SEO

Meta tags in HTML represent data about the data. When you are building a website have you ever think how search engines interact with your website? How do search engines collect information about your website? Here meta tags come into play. Meta tags in HTML provide information to the search engines.

Meta tags are placed inside the head element, you can add one or more meta tags to your document. But remember do not use more than ten meta tags in a single web document. Meta tag not only contains information about your website but also contains website viewport settings.

Meta tag does not display on a Web Browser. This means Website visitors are unable to see the content of this tag. It can visible only on document source code. This tag is mostly used by Search Engines and Web Browsers to collect extra information. Website description, author information, keywords, viewport setting, and more.

What Is Meta Tag?

Meta tags in HTML represent data about the data. Search engines collect information from the meta tag. It provides additional information about your web page.

Meta tag in HTML is an empty Element, Which contains website additional information using its attributes. Those are shown in Search Engine Result Pages.

HTML Meta represents a web page’s content information like character set, Description, Page Keywords, Author Information, Robots Information, and other information also. This tag is placed under the HTML head tag in a web document.

<head>
<meta charset="UTF-8"
<meta name="description" content="short description about the web page">
<meta name="author" content="author_name">
<meta name="robots" content="noindex">
<meta name = "revised" content = "sitecodings, 07/08/2020" />
<meta http-equiv="refresh" content="10;url=https://www.google.com">
<head/>

Uses Of Meta Tag

meta tags in html

Meta tags in HTML are used for various purposes. It is used to define the character set, which character set is used to design the document. And the meta tag is used to define other short information related to the website content.

  1. Define Character Set
  2. Define Short Description
  3. Author Information
  4. Ranking Keywords
  5. Viewport Setting
  6. Robots Information
  7. Web Application Details

Meta Tag for SEO

MetaTags For SEO

The Meta tag in HTML is playing such an important role in SEO purposes. SEO means Search Engine Optimization. Meta tags contain additional information related to a webpage which is displayed on the Search Engine Result Page.

Also, meta tags contain some important information, (meta keywords) that are used by search engines to rank a web page in SERP.

  1. Meta Description
  2. Meta Keywords
  3. Author Information
<meta name="description" content="Short_description">
<meta name="keywords" content="keyword1, keyword2">
<meta name="author" content="john doe">

Meta Tag – Syntax

Meta tag in HTML is an empty tag, It has only the opening tag. It does not have the closing Tag. It contains extra information using its attributes.

<meta attribute="value" another_attribute="value">

Meta Tag All Attributes

There are basically four attributes in the HTML meta tag and the attributes have different values for different types of uses.

Meta tag also supports the HTML global attribute.

  1. Charset – The charset attribute defines the character set that will be encoded in this document.
  2. Name – The name attribute specifies a name for the metadata.
  3. Content – The content attribute contains the value or information for the name and the http-equiv attribute.
  4. http-equiv – The http-equiv attribute represents an HTTP header.

The Charset – Attribute

The Charset attribute defines what character set encoding in this document. This means what character set will use to write the document data. So this attribute value can be any charter set.

The “UTF-8” is the most common charter set used in the HTML document.

<meta charset="UTF-8">

The Name – Attribute

The name attribute specifies a name for the metadata. That means it defines a name what type of data (like description, author information, keywords) contains this meta tag.

The name attribute value

  1. Description – define a short description of the document.
  2. Author – specifies the author’s information about the page.
  3. Keywords – specifies the keyword of the page it helps in SEO.
  4. Robots – instructions to search engines.
  5. Revised – specifies when the page has been last updated.
  6. Viewport – the name attribute value viewport defines the viewport setting.
  7. Application-name – specifies the application name if the web page represents any application.
  8. Generator – specifies if any automation tool is used to generate the page content.

Description

Define a short description that defines the page in detail. the meta description is a very important part of SEO. Users can’t see the meta description but search engines used the meta description to collect information about the page. Search engines show the description of search result pages. Do not use more than 160 characters in the meta description.

<meta name="description" content="write a short description">

Author

It defines the author information of this page content. Means who write the content of this document.

<meta name="author" content="author name">

Keywords

The keyword contains page-related keywords which help you in SEO for better ranking on search engines. That indicates a search engine set of possible keywords the website can be ranked for.

<meta name="keywords" content="keyword1, keyword2, keyword3">

Robots

The robot’s value gives instructions to search engines that the web page should be indexed or not.

<meta name="robots" content="noindex">

Revised

The name attribute value revised specifies when your page content has been last updated.

<meta name = "revised" content = "sitecodings, 07/08/2020" />

Viewport

The viewport gives instructions to the browsers on how to control document dimensions on different screen sizes.

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

The Application name specifies the name of the application that the web page represents.

<meta name="application-name" content="name of the aplication">
Generator

The name attribute value Generator specifies the name of the program you used to create your dynamic web page.

<meta name="generator" content"programe name">

The content – Attribute

The content attribute contains the information of the name attribute and the HTTP-Equiv attribute.

<meta name="description" content="write a short description...">
<meta name="author" content="author name">
<meta name="keywords" content="keyword1, keyword2, keyword3">

The http-equiv attribute

The HTTP-Equiv attribute represents an HTTP header

  • refresh – the http-equiv attribute value refresh will refresh the document after successfully loaded.
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="10;url=https://www.google.com">

The above example refreshes your document every 10 seconds. Actually, it is used to redirect a page to another web page.

Example of Meta Tag

Here are all the meta tags that a normal HTML document requires.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Short description 
in less than 160 character">
<meta name="author" content="author name">
<meta name="keywords" content="keyword1, keyword2, keyword3">

Custom Meta tag

Mostly the meta tags contain one or more attributes, these attributes represent information about the web page. These meta tags are not validated by W3C.

Custom meta tags are those meta tags that are not validated by HTML Standards. These meta tags are used by third-party companies like Google, Bing to verify property, and other services.

<meta name="twitter:card" content="summary_large_image" />

Chapter Summary

  • Meta tags in HTML represent data about the data.
  • Meta tags are placed inside the head tag.
  • Meta tags are used to give additional information to search engines.
  • Custom meta tags are used to verify website property.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply