Meta Tag

HTML meta tags or metadata are used to add metadata to a webpage. Usually meta tags are defined in <head> tag as these data are for search engines. Meta Tags were earlier known as meta tags, but in HTML5, the new name is metadata.

Meta tags are used in head to add meta charset, meta description, meta viewport, meta open graph etc.

Meta Tag example


<meta>            
        

Meta Charset

meta charset is used to specify the character encoding of webpage. It is compulsory to declare meta charset in a webpage.

For Windows OS, the default value for meta charset is windows-1252.

UTF-8 or Unicode Transformation Format is the the most popular charset. UTF-8 can render almost all characters like alphabets, numbers, greek, devnagri, spanish, french, chinese etc. UTF-8 is also the default charset of Chrome Browser.

Meta charset


<meta charset="utf-8">            
        

As per W3C, meta charset is compulsory in a webpage.



Meta Description

Meta description is the metadata used to declare description for search engines. Almost all search engines used meta description to know description of a webpage.

It is recommended to used meta description in head for search engines. The recommended character length for meta description is 160 characters.

Meta Description example


<meta name="description" content="type your description here">            
        

Meta description on google search engine

meta description
meta description on google search

Meta Viewport

Meta Viewport is used in head. Viewport means the visible part of screen on any device.

Meta viewport is used in Responsive Web Design to control the width, scaling and user scablility.

Without viewport, browser display a webpage as per the actual screen size. But meta viewport adjust the screen fonts as per the device pixel ratio. This means, we can see same desktop font on mobile device without zooming.

meta viewport
meta viewport

Meta Viewport Examaple

Viewport for most of the sites


<meta name="viewport" content="width=device-width, initial-scale=1.0">    

Viewport for the sites with no zoom


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    

Viewport Width Vs Actual Width

Viewport Width Vs Actual Width
Device Viewport Size Actual Size
Iphone X 375*812 1125*2436
Iphone 8 Plus 414*736 1080*1920
Iphone 8 375*667 750*1334
Ipad (9.7 inch) 768*1024 1536*2048
Samsung Galaxy S8, S9 360*740 1440*2960
Macbook Pro (13 inch) 1280*800 2560*1600