The HTML Head Tag: An Essential Guide
January 15, 2024Introduction
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.