HTML <Meta> Tags

On-Page "SEO" (Search Engine Optimisation ) for Website Ranking & Improvement techniques using meta tags.

What is SEO aka Search Engine optimisation?

What is Search Engine optimisation?

Search engine optimization (SEO) are the techniques used for the improvement of the quality and quantity of website traffic flow towards a particular website or a web page from search engines. SEO targets unpaid traffic (known as "natural" or "organic" results) rather than direct traffic or paid traffic. Unpaid (natural) traffic may originate from different kinds of searches, including image search, video search, academic search, news search, and industry-specific vertical search engines.

Also we can say that "Search Engine Optimization" is a process of making a website more visible in search results, also termed improving search rankings. Search engines crawl the web, following links from page to page, and index the content found. When you search, the search engine displays the indexed content.

Crawlers always follows absolute rules, so if you follow those rules properly and closely while implementing SEO for a website, then in that case we can say, you are providing your website the best chances of showing up among the first results, as well as increasing traffic and possibly revenue (for e-commerce and ads). Search engines give some guidelines for SEO, but big search engines keep result ranking as a trade secret. SEO combines official search engine guidelines, empirical knowledge, and theoretical knowledge from science papers or patents. Visit given links to learn more about seo.

As an Internet marketing strategy, SEO considers how search engines work, the computer-programmed algorithms that dictate search engine behavior, what people search for, the actual search terms or keywords typed into search engines, and which search engines are preferred by their targeted audience. SEO is performed because a website will receive more visitors from a search engine when websites rank higher on the search engine results page (SERP). These visitors can then potentially be converted into customers. Source-1, Source-2, Source-3, Source-4.


Definition and Usage of On-Page SEO <meta> tags

Definition & Usage of <meta>

<meta> defines metadata of the HTML document. Metadata is a detailed information about any specific data. <meta> tags always go inside the <head> element of HTML document, and they're oftenly used for specifying the character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the html output page on browser, but it is machine parsable.

Metadata is used by browsers for (determining how to display the content or how to load the page), meta's are also used by search engines for finding website title, keywords, as well as other web services. There is a method to let web designers take control over the viewport (the user's visible interface area of a web page), by using <meta> tags. (See "Setting The Viewport" example below). Visit given links to learn more about meta. Source-1, Source-2, Source-3, Source-4, Source-5, Source-6, Source-7.

 Meta Syntax :


*imp!  <title> </title> tag is the top most priority <head> Entity tag in any website's HTML document html DOM, title tag provides a very crucial information about your website identity to show it on title bar of the browser, it facilitates and allows serach engines as well as the browser to understand the identity as well as various other parameters of your website like catagory, type, purpose, and objectives of the website.



01)  <meta charset="utf-8"> *imp!

Charset Info  

UTF-8 is a character encoding system. UTF-8 lets you represent characters as ASCII text, while still allowing for international characters, such as Chinese characters. As of the mid 2020s, UTF-8 is one of the most popular encoding systems. for more info Source.


02)  <meta name="viewport" content="width=device-width, initial-scale=1"> *imp!

Viewport Details 

Viewport is a meta tag located in the <head> of the HTML document. It's the visible part of a web page that a user can see from their device or monitor. Incorrect viewports will result in users having to side-scroll while browsing the website instead of the site fitting perfectly on their device screens. For more details Source.


03)  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">

Meta Info 

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. The X-UA-Compatible meta tag used on web pages where you suspect that Internet Explorer 8 will attempt to render the page in an incorrect view. Such as when you have an XHTML document with an XML declaration. "IE=edge" specifies that IE should run in the highest mode available to that version of IE.

What is chrome=1? It specifies that Google Chrome frame should start if the user has it installed. Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser.

Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage. For more details Source.


04)  <meta name="description" content="type your website decription here inside double quotes"> *imp!

Description Details 

Description of your website should be in such a manner that it can able to explain the website type, website purpose, website agenda & the topic of your website so that the browser and server can easily able to understand and determine the category and objectives of your website. As per google's recommendation, Try to keep description of the website strictly within 50 to 160 characters. For more details Source.


05)  <meta name="keywords" content="seo, website indexing, meta tags, meta, on page seo, web development"> *imp!

Keywords Info 

A keyword is a word or phrase that describes content. "Meta keywords" are used as queries for "Search-Engines" to identify content types of any website. When you use a search engine, you use keywords to specify what you are looking for, and the search engine returns relevant webpages.

For more accurate results, try more specific keywords, such as "Blue Mustang GTO" instead of "Mustang". Webpages also use keywords in a meta tag (in the head section) to describe page content, so search engines can better identify and organize webpages. Try to include 10 keyword phrases (or 100 to 160 characters) that can able to explains your website purpose & topic to the browser and server. For more details Source.


06)  <meta name='language' content='EN'>  or  <meta http-equiv="content-language" content="en">

Meta Details 

name='language' content='EN' says that the document is intended (made/created) specifically for English language speakers. However, it doesn't mean that the HTML-Document is written in English; it could. If no language is declared on the html tag, most of the common mainstream browsers like "Mozila Firefox, or Google Chrome" can recognize the value declared in the HTTP header to set the default language of the text in the page.

The HTML5 specification says that if there is no lang attribute on the html tag (like this: <html lang="en-US">), and if there is no meta element with the "http-equiv" attribute set to Content-Language, and if there is only a single language tag in the HTTP header declaration, then a browser must use that information to guess at the default language of the text in the page. For more details Source.


07)  <meta property="og:url" content="https://www.TypeYourWebsiteURL.com">

Meta Info 

Open graph or og: is a protocol firstly created by Facebook in 2010 for extracting the title, images, URL, and meta-information from a webpage and displaying it in a social media post. Today, Facebook, Twitter, and LinkedIn all use open graph protocol (og) to help publishers include more content on the front of their social media posts.

<meta property="og:image" content="URL OF IMAGE ONLY"> <meta property="og:title" content="TITLE OF WEBPAGE"> <meta property="og:url" content="URL OF WEBPAGE"> <meta property="og:description" content="DESCRIPTION OF PAGE"> Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. They're part of Facebook's Open-Graph-Protocol technology and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent). You can find them in the <head> section of a webpage. For more details Source-1, Source-2, Source-3, Open Graph Generator.


08)  <link rel="canonical" href="your website url"> *imp!

Canonical details 

Canonical Tag is used for telling search engines that your specific URL is the master copy of a page. It prevents caused by duplicate content. Canonical Tags are the most important and basic part of Search Engine Optimization. rel=”canonical” link tag (canonical tag) is a tag used in the head section of HTML to indicate that a page overlaps another page. What is canonical text in SEO? In SEO, canonical tags are used to let Google know which version of the page you want to appear in search results, to consolidate link equity from the duplicate pages as well as to improve crawling and indexing of your website.

A canonical URL is the URL of the page that Google thinks is most representative from a set of duplicate pages on your site. For example, if you have URLs for the same page (example.com?dress=1234 and example.com/dresses/1234), Google chooses one as canonical. The pages don't need to be absolutely identical; minor changes in sorting or filtering of list pages don't make the page unique (for example, sorting by price or filtering by item color). The canonical URL can be in a different domain/server than a duplicate URL.

What is the main difference between a canonical tag and a redirect? Redirect is a directive (it literally directs you to another page) a canonical tag is only a hint to search engines. That's a key difference that explains when to use one vs the other. It's worth considering that whenever you use a canonical tag, a search engine may choose to ignore it. Source-1, Source-2, Source-3, Source-4.


09)  <meta name='copyright' content='name of the owner company or copyright owners name'>

Meta Info 

“Copyright” meta tags are used for recording the information such as who built the corresponding website and to whom the copyright ownership belongs to. The author tag is automatically inserted in some content management systems (CMS), and always it gives the name of the last person who edited the webpage or articles. The advantage of this is meta is that the administrators in the source directory can ascertain who has edited which page. However, the use of these HTML meta tags is optional. How do you tell that the photos and the text on your website are protected? You use the so called COPYRIGHT meta tag. The Copyright tag records information of who copyright ownership belongs to. For more details click on the given link Source.


10)  <meta name='robots' content='index,follow'> *imp!

Meta Info 

Robots meta tags are used for controlling the behavior of search engine crawling and indexing. Crawling is a process which is done by search engine bots (crawlers/spiders which are nothing but automated programme or code that that always looks for the mentions of a particular website link in other websites) to discover publicly available web pages. Indexing means when search engine bots (aka automated AI code) crawl the web pages and saves a copy of all information on index servers and search engines show the relevant results on search engine when a user performs a search query.

Crawling is the discovery of pages and links that lead to more pages. Indexing is storing, analyzing, and organizing the content and connections between pages.A robots meta tag is an HTML snippet that tells search engine robots what they can and cannot do on a certain page. It lets you control crawling, indexing and how information from that page is displayed in the search results.

index,follow = index the page as well as follow the links. noindex,follow = dont index the page but follow the links index,nofollow = index the page but dont follow the links. noindex,nofollow = dont index page, dont follow the links. all = same as index. follow none = same as noindex. nofollow It's placed into the <head> section of a webpage.

"Robots.txt" This file contains address of directories which should not be scanned by search engines. The meta name="robots" tag applies to all search engines, while the meta name="googlebot" tag is specific to Google. In the case of conflicting robots (or googlebot) meta tags, the more restrictive tag applies. For example, if a page has both the max-snippet:50 and nosnippet tags, the nosnippet tag will apply. The default values are index, follow and don't need to be specified.

Indexing is how search engines organize the information and the websites that they know about. Indexing is part of a normal search engine process – arguably the most important, because content that is not in the index has no possibility of ranking for a search result. For more details click on the given links Source-1, Source-2, Source-3, Source-4.


11)  <meta name="author" content="Vishalpuri A Gosawi"> *imp!

Author Attribute Info 

"author" is an attribute of a special meta tag that provides an important inforamtion to the browser and the search engine about name of the document creator of the webpage or the author/writer of the articles inside a webpage. Specifying an author in website's html document is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes. For more details click on the given link Source.


12)  <meta http-equiv='x-dns-prefetch-control' content='off'> *imp!

Meta Info 

A DNS prefetch is a resource hint to make a DNS lookup for a domain the browser has not yet determined needs to be made. This can improve performance because when the browser does need to make a request for a resource, the DNS lookup for that domain has already occurred. The dns-prefetch keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin. For more details Click Here.


13)  <meta rel='dns-prefetch' href='//fonts.googleapis.com'> *imp!

Meta Info 

DNS-prefetch is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow. The dns-prefetch keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.

When a browser requests a resource from a (third party) server, that cross-origin's domain name must be resolved to an IP address before the browser can issue the request. This process is known as DNS resolution. While DNS caching can help to reduce this latency, DNS resolution can add significant latency to requests. For websites that open connections to many third parties, this latency can significantly reduce loading performance.

The X-DNS-Prefetch-Control is an HTTP response type header that informs the browser whether DNS prefetch to be executed or not. Turning it on may not work as many browsers may not support it in all the situations. Turning it off should disable in all supported browsers. Most of the browsers will ignore this header as they don’t do DNS prefetching. File objects like style sheets, images, JavaScript, etc are pre-fetched in the background. Pre-fetching is done in the background as it is possible that the DNS will be handled by the time the specified items are needed or the user clicks a URL, this reduces latency. For more details click on the given link Source-1, Source-2, Source-3, Source-4, Source-5.


14)  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> *imp!

Meta Info 

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.

This helps guard against cross-site scripting attacks. The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.

How does Content Security Policy (CSP) work? How do I use the Content-Security-Policy HTTP header? Specifically, how to allow multiple sources?, how to use different directives?, How to use multiple directives?, How to handle ports?, How to handle different protocols?, How to allow file:// protocol?, How to use inline styles scripts and tags?, How to allow eval()?, What's exactly does 'self' mean? For more details click on the given link Source-01, Source-02, Source-03.


15)  Open Graph Meta Snippets for Social Media & Mobile friendly. *imp!

Meta Info 

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph.

The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional meta tags in the head of your web page. The four required properties for every page are:- og:title - The title of your object as it should appear within the graph, e.g., "The Rock". og:type - The type of your object, e.g., "video.movie".

Depending on the type you specify, other properties may also be required. og:image - An image URL which should represent your object within the graph. og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/". For more details click on the given links Source-1, Source-2, Source-3, Source-4, Source-5, View OG Snippets.


16)  Miscellaneous and Unsupported Meta Tags. *imp!

Meta Details 

Miscellaneous Meta: Difference between meta-name vs meta-property. Difference Between Meta tag and Meta property: Basically meta name is the usual name which is very frequently used in HTML documents. So basically what is meta property? The property attribute comes from the RDFa which is in HTML5. So basically you can use meta property together on the same meta tag for example Meta-Name <meta name="description" content="description about the content">, Meta-Property <meta property="og:description" content="description about the content">. For more details click on the given link Miscellaneous meta tags

Unsupported Meta Tags: In the past few years after HTML5 came, there are many more meta tags that have been introduced but shortly got revoked/removed. That's why we also have a list of meta tags and html tags which are of lesser importance or no longer been functional anymore in todays date. For more details click on the given link Unsupported meta tags.