Meta Tags In HTML & Why They Are Important?

HTML Tag in html

Meta Tags in HTML

The title and description are the two most important meta tags in html, which Google pulls from your website. In Search Engine Optimization [SEO] meta tags plays an important role. The meta tags are placed between the opening & closing <head> </head> tags. The metadata is used by browsers, Google, Yahoo, Bing other search engines, and other web services, and its result not displayed on the web page.

The <meta> tag includes  metadata : title, document decription, keywords, author, Social Media Meta Tags etc

1. Title Tag

The HTML <title> tag is used for declaring the title, or short name of the HTML document. In SEO (Search Engine Optimization) we call it as "meta title tag". The title is usually displayed in the browser's title bar. It is the very first HTML element that specifies your web page for search engines and to visitors. The Title element supports all browsers. It shows up in blue, in bigger font in search results than everything else, and is hyperlinked back to your website.


<title>Your Page Title Goes Here</title>

Title tags are used in three key places:

  • Search engine results pages (SERPs)
  • Web browsers
  • Social networks

Some of the important key points need to take while writing a title of a webpage

  1. Google and other search engines will display 50-60 characters of a title tag in the search results before cutting it off, so you should generally aim for title tags that are around 50 characters or less.html-Meta-Title
  2. Always Give every page a unique title Keep important valuable words. Title tags are a short and therefore deceptive simple part of SEO and avoid duplicate titles as Google may think that you have duplicate content and penalize your website.
  3. Put important keywords first it’s a good opportunity for you to include the main keyword or keywords you’re targeting for that page. That makes it clear to Google that this page is relevant for anyone searching for that specific term. Just make sure not to fall for keyword stuffing and also try to embed long tail keywords in title tags
  4. Don't use too many SEO keywords. Avoid titles that are just a list of keywords or repeat variations of the same keyword over and over.Meta-tilte-example

2. Meta Description Tag

It define the website description or summarizes your web page. Search engines typically show the Meta description in search results below your Title tag. The meta description length had to be about 160 characters while mobile characters for the search results snippets are around average of 130 characters. Length varies based on what the search engines systems seem to be most useful. And avoid duplicate descriptions: search engines may think that you have duplicate content on your website. By adding a relevant description in the meta tag you can help the visitors to find what they can expecting to find on your webpage.


<meta name="description" content="website description will be here">

3. Meta Author Tag

It define the author of the document or the web page. It just like to give credit to the person of company or developer that made your website. It doesn't have any impact on the website ranking. But if you like to add, it make easy to find the right person who is responsible for a web page. The author tag is now used as a Facebook meta tag.


<meta name="author" content="Person Company or Developer Name">

2. Meta Robots Tag

It’s a simple meta tag code that gives you the power to decide about what pages you want to hide from search engine crawlers and what pages you want them to index and look at by the search engine. It also suggest the spider of search engines crawlers what links to follow and what links to stop with. Always add the Robots tag in the HEAD section of your site. By default, the search engine spider crawlers will index your site and Will follow your site links.

The meta robots tag can be used in FOUR ways:

  1. FOLLOW – It hels the search search engine crawler to follow the links in that webpage
  2. INDEX – It hels the search search engine crawler to index that webpage
  3. NOFOLLOW – It hels the search search engine crawler NOT to follow the links in that webpage
  4. NOINDEX – It hels the search search engine crawler NOT to index that webpage


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

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

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

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

You can create a multi-instruction by combining robots meta tag directives with commas: 

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

The robots meta tag instructs web crawlers to not index the page and to not crawl any of the links on the page

4. Social Media Tags (Open Graph tags)

These tags provide structured information about the page such as the title, description, and preview image to the social media like Facebook, Twitter, LinkedIn etc. Using meta Open Graph tags, you can customize the way your website appears in tweets and FB posts and is the standard way to implement social media tags. Social media profiles rank high in the results in search listings for business names. The OG tags are added to the HTML code in the header section of the web page.

Syntax: Twitter Cards

<meta name="twitter:card" content="summary">

<meta name="twitter:title" content="Your Web Page Title Name">

<meta name="twitter:description" content="Your Web Page Description">

<meta name="twitter:image" content="Image Url">

<meta name="twitter:site" content="@mxthemes">

<meta name="twitter:creator" content="@mxthemes">

Syntax: Open Graph general (Facebook, Pinterest & LinkedIn) 

<meta name="og:title" content="Your Web Page Title Name">

<meta name="og:description" content="Your Web Page Description">

<meta name="og:type" content="website">

<meta property="og:image" content="Photo url" />

5. Meta Refresh Tag

It will refresh the document every two minute (120 seconds):


<meta http-equiv="refresh" content="120">