Baking Brad

The HTML Head Tag: An Essential Guide

January 15, 2024

The HTML Head Tag: An Essential Guide

Introduction

The <head> element is an important part of any HTML document. It contains metadata - data about the page that isn't displayed directly on the page itself. The head provides information to the browser and search engines to help them properly display and index the document.

Some key things that the head tag contains include:

  • The page <title>
  • <meta> tags for search engine optimization and defining metadata
  • <link> tags to reference external files like CSS
  • <script> tags to add JavaScript

Having properly structured head content is important for performance, SEO, and the overall user experience. An optimized HTML head tag helps ensure that pages load quickly, get properly indexed, are shareable on social media, and function well on all devices and browsers.


Download "The Expert Guide On How To Optimize Meta Tags For Better On-page SEO" by Godwin Isiwu. Available for free with Kindle Unlimited!


In this guide, we'll cover the anatomy of the head tag in detail including all the vital elements you need to have an effective and complete page header.

Common Elements in the Head Tag


Meta Tags

Meta tags provide metadata and information about the document that isn't displayed to the user directly. Some common meta tags include:

  • <meta name="description"> - Provides a description of the page
  • <meta name="keywords"> - Defines keywords relevant to the content
  • <meta name="author"> - Specifies the author of the document

Meta tags are very important for SEO to help search engines understand the content on the page.

Link Tags

Link tags allow you to link to external files from the head section:

  • <link rel="stylesheet" href="styles.css"> - Links an external CSS stylesheet
  • <link rel="icon" href="favicon.ico"> - Specifies the site favicon

Title Tag

The <title> tag defines the title of the document. This shows up in the browser's tab and is vital for SEO:

<title>Page Title Goes Here</title>

Script Tags

External JavaScript files can be referenced with script tags:

<script src="script.js"></script>

Base Tag

The base tag sets the base URL that relative URLs are resolved against:

<base href="https://example.com/">

Additional Tags

Some other common tags include:

  • <meta name="viewport"> - Defines responsive viewport
  • <link rel="apple-touch-icon"> - Specifies iOS home screen icon

Open Graph Meta Tags

Open Graph (OG) meta tags allow you to control what appears when your web pages are shared on social media. Key OG tags include:

  • <meta property="og:title"> - The title of the page
  • <meta property="og:description"> - A description of the page
  • <meta property="og:image"> - The URL of an image to represent the page
  • <meta property="og:url"> - The canonical URL of the page
  • <meta property="og:site_name"> - The name of the site
  • <meta property="og:type"> - The type of content (e.g. "article")

When a user shares your page on social platforms like Facebook or Twitter, the OG metadata helps determine how it is displayed - which image, title, and text shows. This allows you to control the user experience and first impression for your shared content.

Organizing the Head Tag

While the order of elements in the head tag may not matter for all browsers, having a logical structure can make your HTML more organized and help avoid issues.

Order and Structure

Elements that need to be processed first by the browser should come early in the head. A common order is:

  • Charset meta tag
  • Base tag
  • Viewport meta tag
  • CSS links
  • JavaScript links
  • Title
  • Meta tags
  • Other tags

Grouping Related Elements

It helps to group similar or related tags together in the head, such as:

  • All meta tags
  • All stylesheets
  • All scripts

This makes scanning and editing the head easier.

Performance Considerations

Tags that may affect loading and rendering time should come late in the head. Things like JavaScript should ideally go at the end.

Stylesheets are also best kept together at the beginning since they may impact page rendering.

Sample Head Boilerplate - Full example head tag code

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Favicon -->
  <link rel="icon" href="favicon.ico">
  
  <!-- SEO Meta Tags -->
  <title>Page Title</title>
  <meta name="description" content="A description of the page">
  <meta name="keywords" content="keywords,for,the,page">
  <meta name="author" content="John Doe">

  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A description of the page">  
  <meta property="og:image" content="page-image.png">
  <meta property="og:url" content="https://example.com">
  <meta property="og:site_name" content="Website Name">
  <meta property="og:type" content="article">

  <!-- Twitter Card data -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@publisher_handle">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="A description of the page">
  <meta name="twitter:creator" content="@author_handle">
  <meta name="twitter:image:src" content="page-image.png">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">

  <!-- JavaScript -->
  <script src="script.js"></script>

  <!-- Additional Tags -->
  <link rel="apple-touch-icon" href="touch-icon.png">

  <!-- Canonical Link -->
  <link rel="canonical" href="https://example.com/page-url">

  <!-- Alternative language versions -->
  <link rel="alternate" hreflang="en" href="https://example.com/english-version">
  <link rel="alternate" hreflang="es" href="https://example.com/spanish-version">

  <!-- Preconnect to required origins -->
  <link rel="preconnect" href="https://example-origin.com">

  <!-- Prefetch specific resources -->
  <link rel="prefetch" href="resource-to-prefetch">

  <!-- DNS-prefetch control -->
  <link rel="dns-prefetch" href="//example-third-party.com">

  <!-- Preload specific resources -->
  <link rel="preload" as="script" href="script-to-preload.js">
  <link rel="preload" as="style" href="style-to-preload.css">

  <!-- Robots Meta Tag -->
  <meta name="robots" content="index,follow">

  <!-- Theme Color for Mobile Browsers -->
  <meta name="theme-color" content="#ffffff">
</head>

Overview of Included Elements

This sample head tag includes the following elements:

  • Charset meta tag - defines character encoding
  • Viewport meta tag - specifies adaptive viewport
  • Favicon - small icon associated with site
  • Title tag - page title seen in browsers and SERPs
  • Meta description - page summary for search engines
  • Keywords - relevant keywords for SEO
  • Author - specifies author name
  • Open Graph tags - for social media sharing
  • Stylesheet link - includes external CSS file
  • JavaScript link - loads a JavaScript file
  • iOS icon link - custom icon for Apple devices

Customizing the Boilerplate

To use this starter head content for your own site, you'll need to replace certain values:

  • Title and meta values (title, description, keywords)
  • Author name
  • Favicon and iOS icons
  • Open Graph images and site name
  • Link to your site's stylesheet
  • Link to your custom JavaScript file

With your own relevant details added, this structured head content will provide a solid foundation for search optimization and appearance across all platforms.

Tags: Web Development, HTML, SEO Best Practices, Web Design, Meta Tags, Responsive Design, Social Media Optimization