Web Designer 101: What Belongs Into the HTML Head?
The website gethead.info gives you a very extensive overview of all the necessary and important elements of the HTML head.
The Most Important Things First
First, the website tells you what every “<head>” element needs to have. This includes the “<title>” element, as well as a couple of “<meta>” elements. HTML5 always requires the designation of the character set via meta tags. Nowadays, that shouldn’t be anything else than UTF-8.
Additionally, gethead.info recommends some other meta tags that are generally important for an optimized display of your website. For instance, the viewport of your site should be designated using a “<meta>” element. It should also be chosen so that the display width always displays the width of your website, rather than scaling the site.
This setting apparently requires your website to be responsive and designed for mobile devices. Although this should be standard by now.
Meta Tags for Search Engines
Do you want a search engine to consider an HTML document and the linked pages during indexing? The answer to this question should be in the HTML head as well, and is defined by the meta tag “robots,” and the values “index,” “noindex,” “follow,” and “nofollow.”
However, gethead.info also lists other “<meta>” elements, allowing you to verify different search engines, for example. This could be useful to be able to use Google’s search console – but also applies to other search engines such as Bing, or services such as Pinterest.
Defining Referrals in the HTML Head
Aside from Stylesheets, the “<link>” element is also used to integrate plenty of other referrals into the HTML head. To avoid duplicate content, for instance, use the “<link>” tag “canonical” to define a link that refers to a document with identical content, which is accessible via a different URL.
RSS feeds, and the integration of Open Search happens through the setting of links in the “<head>” element.
Referrals to archives, author, and index pages are also done this way. This lets you link to the previous and following pages on sites with pagination as well. This is just as interesting for search engines as it is for a few browsers that can comprehend the structure of your website better this way.
Integrating Social Networks for Sharing
Social networks are a significant factor. If you want to share posts or other documents of your website on Facebook or Twitter, it is recommended to place fitting tags in the head, allowing for the correct display of the document’s title, image and description.
Aside from the Open Graph standard, supported by Facebook, and interpreted by other services such as Google+ and LinkedIn, Twitter has its own integration tags called Twitter Cards.
Peculiarities of Browsers and Operating Systems
When it comes to saving a website as a favorite, browsers and OSes have their own peculiarities.
For instance, Windows 10 lets you define individual icons and colors, creating a tile for the favorite. Apple saves a referral to the favorite with special icons, integrated with different sizes.
Is there an app for your website? If so, that’s another thing you can add to the HTML head using tags. Both Apple and Android provide links to their respective app stores. Accessing your website with a fitting smartphone or tablet notifies the visitor that there is an app available.
The website gethead.info is not only an interesting starting point for newbies, but for advanced users as well. The list is rather extensive and provides a lot of information in a short form.
Apart from the briefly presented tags, you’ll find many more, some of them being very specific. There are meta tags for rather unknown browsers, too.
Additionally, you’ll get a few tips on how to improve your website’s performance with according markup, as well as links to related projects.
The website gethead.info is distributed under the public domain license and gets hosted on GitHub. There, you can download different snippets as a template for your own web projects.