Denis Potschien January 24th, 2018

Web Designer 101: What Belongs Into the HTML Head?

The HTML head is an important component of every HTML document. It’s where the title is defined, and where JavaScript and CSS files are integrated. However, the “<head>” element has gained even more significance over the past years. The integration of other web services like search engines and social networks also takes place here.

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.

On top of that, the integration of Stylesheets and JavaScripts belong into the HTML head, as long as you want them to be loaded before the HTML body. In many cases, it makes sense to load CSS and JavaScript files at the end of the “<body>” element. That’s because everything that is loaded in the head slows down the loading of the actual content.

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.”

Meta Tags for Search Engines

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.

Integration of Open Graph Tags for Facebook

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.

Conclusion

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.

Denis Potschien

Denis works as a freelance web designer since 2005.

Leave a Reply

Your email address will not be published. Required fields are marked *