Introduction to meta tags in HTML

Have you ever wondered that how the search engine finds our content?

Q. What <meta> tags actually are?

Meta tags are the tags or snippets to describe the page’s content and don’t appear in the body of the webpage, normal user can’t see them, well it just describes some stuff about the page.

Different attributes in <meta> tag.

let’s take an example:

E.g 1: <meta charset=”UTF-8">

The charset attribute specifies the character encoding of the page. So UTF-8 is actually by default and it’s a character encoding for Unicode. The UTF-8 covers almost all characters, punctuation, symbols, etc.

E.g 2: <meta name=”viewport” content=”width=device-width, initial-scale=1.0">

• This is very much important and it is responsible for the Responsive design which is mainly done by attribute name and property called viewport. The viewport is responsible for making your website responsive or user interface responsive to different screen sizes.
• So now you want your website to look good on Laptop, Desktop, Mobile, etc, there are different strategies available we mostly do it with the CSS on making the site look good on these devices. But on the things, you have to do that you have to add the viewport and you have to set the content value, note you have to set a couple of things in content, and one of those is width=device-width and its scale should be set to 1.0

E.g 3: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

This tag and attribute http-equiv are mainly responsible for browser compatibility. The content="IE=edge" is referring to the old Internet Explorer browser which is not mostly used anymore (this attributes helps websites to load on old browsers/ old computers, windows nows ships with a new redefined browser called Microsoft Edge.

Q. How <meta> tags help in search engines?

The very important is tag <title> helps to really describe what the webpage about is. You can also put keywords that you want to rank for well in the search engines. Note the title of the page is in the tab of the browser.

<title> — helps to decribe the what the webpage about is.

E.g Search Result by Google

<meta name=”description” content=”This is my website description”>

whenever the user searches the content on the search engine, this description is available on search results, which helps to improve the SEO of websites. Let’s understand it by example:

In the content we can specify our relevant description there or add keywords accordingly. This is very much important for

<meta name=”keywords” content=”web development, web design, “>

This helps to describe the page's content. Generally, it is better to have keywords, not more than 8 to 12 keywords for SEO purposes.

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

If you don’t want your site to show your site in search engines like Google, Bing, etc, so we can use robots' meta tag.
noindex: It will not index your webpage anymore.
nofollow: It will not follow any links on the page (e.g backlinks)