Utf-8 is the latest version of a unicode character set, the purpose of the character set is to replace with existing character set to the form utf ( uniform transformation format ) version.
In html5, utf-8 can be specified with <meta> tag
<meta charset = “utf-8”>
Identify the meta character set using webpage source code viewer tool
Viewport controls a webpage to be displayed on the mobile devices by scaling the device to the page width. In HTML version5, the meta viewport takes the control of webpage to be displayed by giving instruction to the browser.
Setting Meta viewport code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width= device - width this command tells the page to follow the screen width of device.
initial-scale=1.0 this command prevent user from scaling the page and display correctly regarding to the page.
Chrome is a smart web browser developed by Google, it is an open source web browser with advanced security against vulnerabilities and malware blocking.
In worldwide the total number of google chrome users estimates around 64% share of web browser against all other browsers
Setting compatibility for chrome browser
So meta tag is very important for X-UA-Compatible to chrome browser, the meta tag tells the web browser to choose a particular version of internet explorer should be rendered to chrome=1.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The title meta tag is very important in an on-page factor for both search engine optimization and user experience. The title tag is used in every webpage to main in SERP’s, relevancy and understandability.
Title tags are actually the base of a webpage, that is to be accurate page contents. According to Google guidelines, the title character should be around 55 characters to get maximum visibility on the google page.
It is done using <html> code that tells the title of the webpage.
The format of meta title is
<title>Not a Meta Tag Title, but required anyway </title>
Check out the Best: 7 important SEO plugins for WordPress
After title tag, next most important on page seo factor is meta description tag. According to Google guidelines, the description length should be around 170-300 characters. The rule says it can be longer or shorter or definite, but it should maintain to be relevant according to webpage content.
Key benefits of the description tag is
Easy user understandability and visibility.
Attracts more clicks to the page.
Helps in ranking to a small fraction
More social visibility on promoting.
Meta description html format.
<meta name="description" content="Awesome Description Here">
What is the purpose of meta author tag?
The purpose of meta author is to give credit for a web page contents or site contents as responsible for editing a particular web page. It can be added to all pages with same author or different for other page according to the website owner. Search engines like Google, Yahoo and Bing does not help you in search engine keyword rankings page, but it is recognized as one of standard meta tags to be used on the webpage or site.
As it is completely optional to use on the site, in certain cases like guest blogging you can define different author name who have written the post and track easily.
The html format of meta author tag is
<meta name="author" content="text">
The aim of robots meta tag is to tell search engine spider, allow the site to crawl and index the whole website or webpage. If robots tag is added to any page you can specify that the page is to be crawled and indexed, or just to follow the page. Because a wrong tag will completely turn off the search engines like Google, Yahoo and Bing to visible of web pages.
4 variations of robot meta tag
<meta name="robots" content="index, follow">
The search engine spider will index and follows the pages which are linked to it.
<meta name="robots" content="index, nofollow">
The search engine spider will index and does not follows the pages which are linked to it.
<meta name="robots" content="noindex, follow">
The search engine spider will not index and only follows the pages which are linked to it.
<meta name="robots" content="noindex, nofollow">
The search engine spider will not index and does not follows the pages which are linked to it.
Robots meta tag and robots.txt are completely different in terms of serarch engines.
I think most of them are not aware of social media tags, becauses it plays a key role in social media traffic. Even Facebook, Twitter, Google+ has own tags called open graph, twitter card, google+ tag that will help to share your page on social media easily and increase traffic.
Important social meta tag
Google+ rich schema tag
Open graph is a rich facebook meta tag that is integrated into web page that includes all special tags like title, sitename, type, description, image, url, admins to boost facebook traffic.
<meta property=”og:title” content=” “/>
<meta property=”og:site_name” content=””/>
<meta property=”og:type” content=””/>
<meta property=”og:description” content=””/>
<meta property=”og:image” content=””/>
<meta property=”og:url” content=””/>
<meta property=”fb:admins” content=””/>
There are many open graph objects, just to turn webpage into open graph objects using meta tags as shown above.
og:title - The title will be same as your standard title.
og:site_name: Site name is nothing but website name that specifies complete overall website.
og:type - The type specifies depending on the site like blog, video, movies or simply a website.
og:description – It represents 2 lines of description object and it is same as standard meta description.
og:image - Image URL represents the thumbnail of the webpage image graph object.
og:url - The graph URL of the object indicates same url of the webpage.
Fb:admins - It is a numeric facebook id, It will access your facebook insights and tells how many times has been shared and liked your site. It will also serve fb comments to be moderated by admins, so the tag has many functionalities to take on.
Twitter card is a rich meta tag that will attract rich data like videos and photos depending upon your web page Information that is implemented in site.
The benefit of twitter card is enable to share easily on twitter with just url, automatically it will grab the meta content from the webpage to promote or share on twitter platform.
Card, site, title, description, creator, url, image.
Twitter:card - It defines card type, the default of twitter:card is “summary”.
Twitter:site & Twitter:creator - It defines the twitter account page or the profile page.
Twitter:title - The twitter title is same as standard meta title for the webpage.
Twitter:description - It is same as standard meta description, but the limit is 200 characters after that it is not shown while sharing page on twitter,.
Twitter:url - This specifies url of webpage or the post.
Twitter:image - Twitter image is unique image of the webpage
Google+ is a rich schema tag which is similar to standard meta tag and facebook open graph tag. The best advantage of Google+ tag is able to share in other social media platforms like Pinterest and LinkedIn. You just need to implement 3 basic tags of Google+ for more social visibility.
itemprop=”name” - It is a rich schema snippet and it is similar to standard meta title with a limit of 140 characters
itemprop=”description” - Next is the description which is similar to meta description with a character limit of 185 characters.
itemprop=”image” - It is thumbnail of webpage image to be displayed on site that helps to share easily on google+