Meta tags are the most discussed topic in the context of the website. Meta tags are not for end-user, it’s always hidden from the end-user. Meta tags are used by search engines to identify what is a site about and use this information to rank your website, But all meta tags are not useful for search engine optimization, so its very important to identify which meta tags are important and which one we can just let it go why to increase our code length.
Note: All meta tags should be writtern in head section. Check example below
<html>
<head>
<title> Website title </title>
<meta name=”description” content=”Description for page”>
</head>
<body></body>
</html>Must have meta tags
Title: Title tag is a very important part of your webpage because it denotes the title of your web page. The title will be displayed as a headline in SERP. Make sure your important keyword cover in title to help SEO and title length should not be greater than 50 to 60 characters otherwise title will truncate while displaying on SERP. Title tag doesn’t come with meta tag syntax it started with title tag. See example below
<title>Example Title</title>Don’t do keyword stuffing in the title tag, means don’t add a number of keywords in title otherwise google gives you a penalty.
example of keyword stuffing in title tag which should be avoided
In above image you able to see how keywords stuffing is done which is not advisable by google.
Description: Description meta tag use for describing your web page which comes below the title on SERP but not always it depends on how your meta description relevance to user query otherwise description will pickup from page content itself. Keywords in the description will not consider for SEO ranking and make sure description character length should be up to 156 characters. Please see example below
<meta name=”description” content=”Description for page”>Character Encoding: Content is a combination of character and symbols where it converts to sequence of bytes for machine readability in which same character can be represent by different bytes that’s why we need to tell the browser encode characters using particular format so browser will know which encoding need to use so browser will render HTML properly.
You can represent character encoding using meta tag like below
<meta charset="UTF-8">or by using pragma directive
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>NOTE: Make sure you setting character encoding in http header also because http-header has higher precendency than meta tag like below
Content-Type: text/html; charset=UTF-8Viewport: viewport metatag is very useful for rendering content as per the devices. Before webpage are meant for desktop devices only where webpage renders as per desktop size and width but nowadays people using mobile, tablets and desktop simultaneoulsy so its very important for web developer to maintain size ration for each devices for this viewport meta tag helps a lot. It tells the browser to render html content as per device screen width and height and also zoom it to its initial level.
This is very helpful for SEO also because google also giving more attention to the responsive website, mobile-friendly websites. If your website not mobile friendy then it can narrow down your ranking.
Below tag is used for setting viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width tell the browser to follow device screen width and initial-scale sets initial level of zooming when browser loaded the first time.
Optional meta tags
Robot: Robot meta tag advice search engine for crawling and indexing. By default robot meta tag values are index and follow which means page should be indexed and links from the page should be followed.
robot meta can be written like below
<meta name="robots" content="index,follow" />Some possible values for robot meta tag
- index – allow page to be indexed
- follow – follow the links from page while crawling
- noindex – dont allow page to be indexed
- nofollow – dont follow the links from page while crawling
- noarchive – Dont show cached links in search results
- unavailable_after:[date] – Its help to specify the date from where page should not indexed and crawled
- none – It’s same as nofollow and noindex
- all – It’s same as follow and index
There are some tags which are specific to google only like ( googlebot, nositelinkssearchbox, notranslate, google-site-verification, rating) to know more about it please refer this link
Not to use meta tags
Keywords: Keyword meta tag, not at all useful for search engine optimization. Google not consider keywords in the keyword meta tag for ranking. If you are using the keyword metatag it’s not harmful but why to increase code length and if you are using the keyword metatag then don’t do keyword stuffing.
Author: It is used to mention the author of the webpage. Search engine does not consider author meta tag for SEO so we can simply remove it.
Refresh content: This meta tag is used for sending user to new URL after a specific time, which is confusing for the user also and W3C also said not to use this meta tag instead of it we can use server-side 301 redirect
How meta tags help for sharing on social media
Until now we saw how meta tags are used for search engine optimization. There is one more aspect of meta tags which help to create a preview of your content while sharing on any social media platform.
Consider if you are sharing something on social media and we are not showing a preview of your content then chances of CTR will decrease because user is not able to understand what link you are sharing.
So, there are some tags which meant for social media like open graph tag, twitter card tags. Please go through this link which gives you details about meta tags for the social media platform.
