The HTML <head> element is essential to understand for web developers and other internet technologists. The HTML <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. Websites that do not implement this information properly will rank poorly in SEO, will not be sharable across the internet by other websites, and may not be translated properly by modern browsers. Implementing this element the right way can make the difference between life or death for an internet-based company, especially because of the importance of this element to your website’s discoverability through search engines.
How the HTML Head Element Is Categorized
The HTML Specification defines categories for every HTML element and describes the position that the element can fit in the document. The head element is actually not included in any category of HTML tags, yet it is also required to be the first child of the <head> tag, putting it in a unique position in the HTML language.
Inside of the head element there should be metadata tags, scripts, and links — content describing the details of the document and links to external resources.
Links and Scripts
When a user agent downloads and parses your web page, one of the first things that it will do, even before rendering your page, is to follow the links and scripts in the <head> tag and to download and execute the content therein.
The <link> element is most commonly used to link to stylesheets, but is also used to establish site icons (both “favicon”-style icons and icons for the home screen and apps on mobile devices) among other things.
<link href="/media/examples/link-element-example.css" rel="stylesheet">The <script> element is used to download javascript from external sources, and is more commonly included in the <body> element as opposed to the head.
<script src="javascript.js"></script>
Meta Tags
The primary category of information included in the head element of an HTML document is meta tags. Meta tags are HTML elements that describe information about a web page not related to the page’s visual representation, like the title of the page, its language, and the website description. Meta tags are hugely important for search engine optimization, as they are read by web crawlers that document the websites content for search engines like Google, Yandex, or Bing.
Types of Meta Tags
- Title
- Description
- Charset
- Alternate and canonical
- Social or sharing
- OG social
The Title Tag
The first and most important meta tag is the title of the page. This tag defines the text that displays in the tab when a user opens your webpage, and it also defines the text that will appear in Google or other web searches for your webpage. You define it as follows:
<title>Introduction to The Mating Rituals of Bees</title>
The Description Tag
The description tag defines the content on the webpage in written words, and it will often be included in search results for your website.
<meta name=“description” value=“This is a webpage about lord of the rings”/>
The Charset Tag
The <charset> tag describes what the character encoding of the website is, for example the most common character encoding is utf-8. A charset describes the mapping of the words that you write in your HTML document to the characters that they represent. For example, if you were to change the character encoding from UTF-8 to ASCII, any emoji that you had added to your webpage would not be displayed because the ASCII mapping does not include those characters.
<meta charset="utf-8">
Alternates and Canonical tags
The alternate and canonical tags define the different language versions of your webpage. For example:
<link rel="alternate" href="https://www.italki.com/ar" hreflang="ar">
<link rel="canonical" href="https://www.italki.com/en">These tags are very important in that they allow internet crawlers to understand where your content is coming from.
Social or Sharing Tags
Social or sharing tags are a class of custom meta tags whose purpose it is to allow social media sites like Twitter, Facebook, and the like to enable richer content about your webpage on their sites. Social media websites, just like search engines, also crawl web pages on the internet, and their crawlers use these special tags to decide what information they should add to posts. The content in these tags will ultimately determine, for example, the thumbnail images that will be shown when people share your webpage on those social platforms.
OG Social Tags
OG tags are a custom set of meta tags based on the opengraph protocol. They are the most widely accepted social meta tag, and most social media sites will honor these tags. An OG tag is added to your website by adding the following inside your <head>:
<meta property="og:title" content="The Rock" />There is a long list of accepted OG tags, viewable at the opengraph website. They include:
<og:type>The type of your object, e.g., “video.movie”<og:image>An image URL which should represent your object within the graph<og:url>The canonical URL of your object that will be used as its permanent ID in the graph
Twitter Social Tags
Twitter tags are very similar to the og tags, though these are primarily read by the crawlers at Twitter. They have a similar set of properties as the og tags, and are even written similarly. An example of a twitter tag might look like the following:
<meta name="twitter:title" content="Sammy the Shark" />Other tags include <twitter:site>, <twitter:card>, and <twitter:creator>, all of which send signals about what to add to their site when others share a link to your site.
