HTML Metatags
Inside the head tags on an HTML document, items known as meta tags can be stored. These are not visible to the user but are intended for the browser. Meta tags store metadata which is essentially, data that describes data. They are sometimes used for SEO (search engine optimizations) so that a website is more likely to appear in a targeted search. There are a variety of attributes that can be added to a meta tag but I will describe some of the most common and useful.
Charset
Charset is usually defined for an HTML document. Throughout the world, people “tell” the computer different information with different symbols, letters, and graphics. These are called “characters”. In order to write the name Beyoncé, the browser has to take in the character “e” with the accent aigu (or the tick above the “e”). Even emojis are included as characters so that party emoji 🎉 can be interpreted by the computer. Unicode is a universal character set and it includes characters and data from a majority of languages in the world. What allows the computer to read these characters in a character set in a process called character encoding. This is what is set in a meta tag. The standard character encoding is set using:
<meta charset ="UTF-8">Name
Next meta attribute is “name” and it can be set in name-value pairs. The attribute name can be assigned the metadata name and then the attribute content assigns the value. Here are a few common metadata names:
<meta name=”description” content=”This is a blog about metatags”>This provides a brief summary of what the website is about. In SEO, this is typically what appears in a Google search under the hyperlink to the page. For instance, typing in adidas on Google returns
If we inspect the page, I find that inside the meta tag is the name and also the description written underneath the hyperlink to the adidas page.
<meta data-rh=”true” id=”meta-description” name=”description” content=”Welcome to adidas. Shop for adidas shoes, clothing and view new collections for adidas Originals, running, football, soccer, training and much more.”>Another popular name-value pair is the name “viewport”. This configures how the website is displayed on multiple devices. For instance the width can be adjusted to the device’s width so that is properly viewed on any device. Whether it be a cellphone, tablet, desktop, or TV screen. A typical code for most webpages to be viewed on most devices is:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">The width is setting itself to do exactly as it says, to be the same widt of the device. Also, the initial-scale sets the zoom level when the page is initially loaded.
An interesting name-value pair I found was the color-scheme name. I am a big fan of having my devices adjust to different light modes. By setting the name to color-scheme and the content to dark light. This can be set in CSS along with the styling for the appropriate setting, however the meta tag allows it to immediately render.
<meta name="color-scheme" content="dark light">
The author name can also be set using the name value pair as
<meta name=”author” content=”Dominique Brisco”>While this is a brief overview of metadata to include in an HTML document, others can be found at the sources below:
References:
Open Graph Protocol — created by Facebook and allows meta data webpages to become rich object on the social graph https://ogp.me/
MDN on meta tags- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
Brief intro to meta tags — https://www.youtube.com/watch?v=Luo_wCcWAaw
More about character encoding — https://www.w3.org/International/getting-started/characters