Definition of Meta Tags

By: Stanley Yun Kai Fok

Meta tags are one of the important key factors in achieving a superior-ranking website allowing more people to view it easily. In this post, Meta tags will be defined and explained in different scenarios.

(Usman, 2022)

Firstly, what are Meta tags?

According to Plimmer, S.,

Meta tags are HTML-coded information found in the headers hidden inside a site's page source that works together with the search engine to sort relevant ideas that allow specific keywords or descriptions to match your content.  (Plimmer, 2021)

(Starbucks, 2023)

From the Starbucks homepage, under the page source, the main meta tags shown include:

<meta charset="utf-8" />

<meta name="MobileOptimized" content="width" />

<meta name="HandheldFriendly" content="true" />

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

Here is a Brief description of each meta tag:

According to W3schools,

The meta charset feature states the type of character and symbol encoding for the HTML file. Additionally, the meta name specifies a name for the metadata.(w3schools, 2023)

         According to Lock D., Rocheleau, J., and Plimmer, S.,

MobileOptimized is specifically designed for identifying mobile Internet Explorer (IE). It is recognised as "meta layout tag" by the Microsoft developer documents. A disadvantage of this would be that a particular width should be used and it should be the same as the resolution of the mobile device. (Rocheleau, 2020; Lock D, 1957) 

HandheldFriendly was intended to recognise mobile content through AvantGo web browsers. Later on it became known as a standard for identifying mobile websites. It is uncertain which browsers are supported using this tag. (Lock D, 1957) 

Lastly, viewport is an actual all-around supported standard which was originally made by the company Apple for mobile Safari. It is used by most of the mobile browsers today. In this case, the meta tags are related to each other helping to format the website on mobile devices. (Lock D, 1957) 

Reference(s): 

 Lock D. (1957) html - Meta-tags for mobile – should they be used? - Stack Overflow. Available at: https://stackoverflow.com/questions/1988499/meta-tags-for-mobile-should-they-be-used (Accessed: January 17, 2023).

Plimmer, S. (2021) What are Meta Tags? Simple Beginner's Guide - LCN.com. Available at: https://www.lcn.com/blog/beginners-guide-meta-tags/ (Accessed: January 17, 2023).

Rocheleau, J. (2020) Creating a mobile web application with Meta Tags. Available at: https://speckyboy.com/creating-a-mobile-web-application-with-meta-tags (Accessed: January 17, 2023).

Starbucks (2023) Homepage | Starbucks. Available at: https://www.starbucks.co.uk/ (Accessed: January 17, 2023).

Usman, M. (2022) Meta Tags Vector Icon Design. Available at: https://www.vecteezy.com/vector-art/16321728-meta-tags-vector-icon-design (Accessed: January 17, 2023).

W3schools (2023) HTML charset attribute. Available at: https://www.w3schools.com/TAGs/att_meta_charset.asp (Accessed: January 17, 2023).

W3schools (2023) HTML meta tag. Available at: https://www.w3schools.com/tags/tag_meta.asp (Accessed: February 5, 2023).