HTML Meta Tag

Written By: Avinash Malhotra

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 88 reviews
  1. Home
  2. Frontend
  3. Html
  4. Meta Tags
  1. metadata
  2. meta charset
  3. meta description
  4. meta viewport
  5. meta keywords
  6. open graph meta tags

Meta Tag

HTML meta tags or metadata are used to add metadata to a webpage. Usually meta tags are defined in the <head> tag as this data is for search engines and browsers. Meta tags provide information about the webpage that is not visible to users but is crucial for SEO and proper rendering.

Meta tags are used in the head to add meta charset, meta description, meta viewport, meta keywords, and Open Graph tags for social media.

Meta Tag example


<meta>

Meta tag attributes

  1. name
  2. charset
  3. http-equiv
  4. itemprop

Meta Charset

Meta charset is used to specify the character encoding of the 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 most popular charset. UTF-8 can render almost all characters like alphabets, numbers, Greek, Devanagari, Spanish, French, Chinese, etc. UTF-8 is also the default charset of the Chrome Browser.

Meta charset


<meta charset="utf-8">

Meta charset is compulsory for all webpages in a website.

Meta Description

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

It is recommended to use meta description in the 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 scalability.

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.

With and without meta viewport

With Viewport

meta viewport
With Meta Viewport

Without Viewport

meta viewport
Without Meta Viewport

Meta Viewport Example

Viewport default


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

Viewport for the sites with no scaling


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

Viewport for landscape Iphones with notch or pills 


<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Viewport Width Vs Device Width

Viewport Width Vs Actual Width
Device Viewport Size Actual Size Device Pixel Ratio
Iphone 14,15 Pro Max 432*932 1290*2796 3
Iphone 15, 15 & 14 Pro 393*852 1179*2556 3
Iphone 12 & 13 390*844 1170*2532 3
Iphone X, XS 375*812 1125*2436 3
Iphone 8 Plus 414*736 1080*1920 3
Iphone 8, SE 375*667 750*1334 2
Samsung Galaxy S8, S9 360*740 1440*2960 4
Ipad (9.7 inch), Ipad Mini 768*1024 1536*2048 2
Ipad Pro 11 834*1194 1668*2388 2
Macbook Air (13 inch) 1440*900 2560*1600 2
Macbook Pro (14 inch) 1512*982 3024*1964 2
Macbook Pro (16 inch) 1728*1117 3456*2234 2

Meta Keywords

Meta keywords were used to specify keywords relevant to the webpage for search engines. However, due to abuse, major search engines like Google no longer use meta keywords for ranking. Still, some smaller search engines might consider them.

It is optional to include meta keywords, but if used, list relevant keywords separated by commas.

Meta Keywords example


<meta name="keywords" content="html, meta tags, tutorial, web development">

Open Graph Meta Tags

Open Graph meta tags are used to control how your webpage appears when shared on social media platforms like Facebook, Twitter, LinkedIn, etc. They provide rich previews with title, description, and image.

Open Graph tags are prefixed with "og:" and are essential for social media optimization.

Open Graph example


<meta property="og:title" content="HTML Meta Tags Tutorial">
<meta property="og:description" content="Learn about HTML meta tags for better SEO.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://tutorial.techaltum.com/html-meta-tag.html">
<meta property="og:type" content="article">