DEV Community

Cover image for Meta Tags
Kiran Raj R
Kiran Raj R

Posted on • Updated on

Meta Tags

Meta tags are code that exists in the head of the html, the <head>'s content is not displayed on the page. Meta tags contains information about the web page but the data is not for the clients(user), its for the browser, search engines, web crawlers etc.. The search engines use the data to get an idea about the content and purpose of the page, the data is also used in search engine optimization .

<head>
  <title>My web title</title>
  <meta charset="utf-8">
  <meta name="author" content="kiranraj">
  <meta name=”keywords” content=”meta, tags, dev/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Enter fullscreen mode Exit fullscreen mode

Some of the useful meta tags are explained below.

  1. Charset <meta charset="utf-8">
    Specifies the character encoding of the document, in the above code is says that the encoding to use is utf-8.

  2. Description <meta name="description" content="page description">The description tag contains short description or summary of the content of the web page under 160 characters, character after the limit is truncated (Google).

  3. Keywords <meta name=”keywords” content=”meta, tags, dev”/>The keywords tag is used to specify the important keywords of your web page. It help the search engine to understand the content/topic of the page quickly. Keywords where once the key player in determining the ranking of the page, now keywords are no longer part of the Google ranking algorithm.

  4. Title <title>Web Title</title> Title tag is not a meta tag but it is considered as one due to its importance. Title tag is expected to contain relevant phrases/keywords that describes the page content and purpose. Title is visible to the user, they are displayed on the top of the browser and as the title text in a search result listing. Its best to keep Title under 60 characters.

  5. Author <meta name="author" content="kiranraj">The author meta tag tells who the author of the page is.

  6. Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">Helps the browser to set the page's width and scaling. In the above code the width is set to device width and the zoom level is set to 1 when the page is loaded, no zoom.

Top comments (0)