In the previous post, we have presented an exercise to validate the knowledge learned in the previous course episodes/posts. In this post, we will learn about Meta Tags and why/how we use them on an HTML page.
Meta Tags:
You can think of the meta tags as properties/characteristics of an HTML page. These meta tags are added in the Head Tag <head>. The information added through meta tags is only readable to the browsers/ search engines and is not displayed on the actual web page.
Following are some of the meta tags commonly used on the HTML pages:
Meta Charset:
The meta charset tag is used to define the character encoding of the HTML page. The commonly used charset is “UTF-8”. See the following code example:
<meta charset="UTF-8">Meta Keywords:
The meta keywords tag is used to define keywords for the HTML page. The keywords define what kind of content is presented on the HTML page. These keywords are used by the search engines e.g. Google, Bing, etc. to search for the relevant content on the Internet. The search query is matched to the keywords by the search engines to prepare the search results. The following code snippet shows how to add the keywords to an HTML page:
<meta name="keywords" content="portfolio, personal, website, resume">Now when a user searches for the terms portfolio, personal, etc. then your web page will be listed in the search results. The position of your page in the search results is based on the relevancy of the content and other search engine algorithms.
Meta Description:
The meta description tag is used to define a short summary of the content presented on the HTML page. This descriptive content tells the browsers/search engines about the type of content available on the page. The following snippet shows how to add a description tag to an HTML page:
<meta name="description" content="My online resume">Meta Author:
The meta author tag is used to tell the browsers/search engines about the author of the HTML page. The following code snippet shows how to add an author meta tag to an HTML page:
<meta name="author" content="Junaid Hassan">Meta Viewport:
The meta viewport tag is used to define the page properties like screen-width or initial zoom level etc. The following snippet defines the initial screen-width as device-width (responsive) and the initial zoom level as 1.0:
<meta name="viewport" content="width=device-width, initial-scale=1.0">The meta viewport tag with the above values makes sure that the web page is displayed correctly on all devices thus making the web page responsive.
Video Tutorial (Urdu Language):
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks