Sometime in early 2020, I had decided to take coding seriously after so many offs and ons due to imposter syndrome. I signed up for a bootcamp on Frontend Masters and in the very first video series in the bootcamp would be the first time I interacted with HTML. I remember vividly when Jen Kramer did the introduction to VS Code and she was writing the HTML meta tags, then imposter syndrome set in again and negative emotions started doing cartwheels in my head about how all these would be difficult for me to memorize and all other unnecessary worries. Luckily for me, not too long after, she gave a shortcut for those tags; ! + Tab.
It’s been months and I have shaken off the nervousness that came with writing my first program, then it turned to curiosity about what those meta tags are and whether they were important since they didn’t show up on the web page. In this article, I’ll be trying to explain some of the things I have come to know about meta tags and why they are important.
Meta tags are lines of HTML code that contains metadata about a website. Metadata being data that provides information about data. This data will not be visible on the webpage but is machine parsable and they are important to search engine bots in classifying our sites and a range of other functions. The meta tags of a website are the first impression and point of contact of a website with the search engine, this implies that generally speaking they are very important for search engine optimization (SEO) which is about increasing the quality and quantity of traffic to a website.
There are lots of different meta tags, some are not useful as they once were but they are others which are worth using regularly. In the following paragraphs, I’ll be trying to explain these important meta tags as briefly as possible.
1. The Title Meta Tag
<title> Your Title </title>
The title tag is the very first HTML element that specifies your webpage for search engines and for visitors and is meant to provide a clear and comprehensive idea of what the website is about. The <title> element typically appears as a clickable headline in the Search Engine Result Pages (SERPs) and also shows up on social networks and in browsers tabs. As the site’s title is the first thing for a searcher to see in SERPs and decide if the page is likely to answer the search intent.
2. The Description Meta Tag
<meta name = "description" content = "What are Meta Tags">
The description tag is the HTML meta that sums up the content on your page. Search engines typically show the meta description in search results below your title tag. Google does not use the meta description as a ranking signal. However, it still has a massive effect on your page's click-through rate (CTR) because it appears in search results, just below the title, and informs users what your page is about. Ideally, you must write the meta description content within 156 characters to avoid it being cut short, but the size of search snippets tend to vary on different search engines.
3. The Viewport Meta Tag
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
The viewport refers to the user’s visible area of the web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. The viewport meta tag gives the browser instructions on how to control the page’s dimensions and scaling. The width=device-width value sets the width of the page to follow the screen-width of the device which varies depending on the device, the web page is being viewed on. The initial-scale=1.0 value sets the initial zoom level when the page is first loaded by the browser.
It is the viewport meta tag that turns a fixed website to a responsive one. We are at a time where mobile users accessing the internet are more than those using the desktop, so you can bet that a site which is not mobile-friendly would not be appreciated by most visitors plus since 2015, Google has made mobile-friendliness one of the factors in its search engine algorithms.
4. The Character Set Meta Tag
<meta charset = "UTF-8">
When you declare something as your “charset”, you are telling the browser to use the character encoding of that which you have declared. Character encoding is a method of converting your typed characters into machine-readable code. Your computer can only manipulate information it receives in binary format. This means that any characters on your website must be converted. This is done in 2 stages - character set and character encoding.
- Each letter, punctuation mark, or character is assigned a unique number called a “code unit” (Character Set).
- The code unit is then converted to binary (Character Encoding).
The most popular types of character encoding are ASCII and Unicode while ASCII is still supported by nearly all text editors, Unicode is more commonly used because it supports a larger character set. Unicode encompasses UTF-8, UTF-16 and UTF-32. UTF-8 has been the dominant character encoding for the World Wide Web since 2009, and as of June 2017 accounts for 89.4% of all web pages.
5. The Robots Meta tag
<meta name = "robots" content = "index, follow">
The robot meta tag tells search engines to either index or non-index your web site. Website indexing is a process search engines use to comprehend the function of your website and each page on it. It helps Google find your website, add it to its index, associate each page with searched topics, return this site on SERPs, and ultimately drive the right people to your content. The main values which are often used with content attribute are:
- Noindex: Tells a search engine not to index a page.
- Index: Tells a search engine to index a page. It’s the default.
- Follow: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.
- Nofollow: Tells a crawler not to follow any links on a page or pass along any link equity.
The miscellaneous values which can be used are:
- None: Equivalent to using both noindex and nofollow.
- Noimageindex: Tells a crawler not to index any images on a page.
- Noarchive: Search engines should not show a cached link to this page on a SERP.
- Nosnippet: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.
- Unavailable_after: Search engines should no longer index this page after a particular date.
Apart from these five meta tags, they are also other meta tags which should not compulsorily be part of the website’s source code but if they are included, would still play some certain role.
1. Meta Author
<meta name = "author" content = "John Doe">
This meta tag refers to the author of the page, i.e. the one who developed the HTML document being viewed. It is used as a reference to track the author of a particular page in cases where multiple developers are used.
2. Meta Revisit After
<meta name = "revisit-after" content = "7 days">
This tag is used to inform search engines when to return to index the site.
3. Meta Designer
<meta name = "designer" content = "Jane Doe">
This tag is used to declare the designer of the website.
4. Meta Copyright
<meta name = "copyright" content = "Copyright Owner">
This tag is used to include a copyright, patent or trademark. It is not responsible to protect your site's content or intellectual property.
5. Meta Content Script Type and Meta Content Style Type
<meta http-equiv = "Content-Script-Type" content = "text/javascript">
<meta http-equiv = "Content-Style-Type" content = "text/css">
These tags are used to specify the default scripting language and the default styling type for the document.
6. Meta Keywords
<meta name = "keywords" content = "blogging, programming, growth">
This tag is used to define keywords for search engines and tell it what the topic of the website is about. The meta keywords isn’t really used anymore by major search engines, the only one still using this Bing which uses it to detect spam. It is best recommended to not to use this tag and add on to the code of the site causing code bloat. And even if you do use this tag, make sure you have no more than three unique keywords in them.
From reading through the article, we would have come to the conclusion that meta tags, although invisible to the eye when viewing a website, is an integral part of HTML code and are important for your website as they are the foundation of SEO. They impact how the site appears on the SERPs and how many people are inclined to click through to your site. This therefore implies your traffic and engagement rates, which impact your SEO and rankings are dependent on them. Although some tags might not have a direct impact on rankings, they do impact how your site appears within the digital ecosystem.
If you liked this article, be sure to like and share.
Thank you for reading to the end. 🤗