Berlin +49 30 120 856 32 mail@dlx-media.com
Contact
HTML Head

HTML Head

The HTML head contains invisible metadata that controls search engines, browsers, and social media—essential for SEO and user experience.

What is the HTML Head?

The Head (written as <head>) is the section of an HTML document that contains important information about a webpage without being visible itself. While the <body> displays the visible content, the Head provides instructions and metadata to the browser, search engines, and social networks.

You can think of the Head like the label on a package: the content itself (the Body) is the product, but the label reveals important information about what the product is called, how it should be categorized, and how it should be presented.

Where is the Head located in the HTML structure?

The Head is placed directly after the opening <html> tag and before the Body. A typical basic structure looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Page</title>
  <meta name="description" content="A brief description of the page.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- The visible part starts here -->
</body>
</html>

The most important elements in the Head

  • <title> (Page Title): Probably the most important entry for SEO. The title appears in the browser tab and as a clickable headline in Google search results. It should contain the main keyword and encourage clicks.
  • Meta Description: A brief description of the page content, often displayed as a preview text in search results. It is not a direct ranking factor but significantly influences the click-through rate (CTR).
  • Charset Declaration: <meta charset="UTF-8"> defines the character set. UTF-8 ensures that umlauts, special characters, and emojis are displayed correctly.
  • Viewport Tag: <meta name="viewport"> is essential for mobile display. It ensures that the page adapts to different screen sizes.
  • Stylesheets and Favicon: CSS files for design and the favicon (the small icon in the browser tab) are included via <link> tags.

Instructions for search engines

The Head can also be used to specify how search engines should handle a page:

  • Robots Meta Tag: With <meta name="robots" content="noindex, nofollow">, you can instruct Google not to index a page and not to follow links on that page. This is useful for pages like internal search results or thank-you pages that should not appear in search results.
  • Canonical Tag: With <link rel="canonical">, the preferred version of a page is specified. This prevents duplicate content issues when similar or identical content is accessible under multiple URLs.

Controlling social media previews

When a page is shared on social networks, special meta tags in the Head determine how the preview looks:

  • Open Graph Tags: Define the title, description, and preview image for platforms like Facebook, LinkedIn, or WhatsApp.
  • Twitter Cards: Serve the same purpose specifically for display on X (formerly Twitter).

Well-maintained social media tags ensure that shared links look appealing, which significantly increases the willingness to click.

Impact on loading speed

The Head also plays a role in a website's performance:

  • async and defer: These attributes, when including JavaScript, ensure that scripts do not block the page from loading, which improves loading time.
  • preload and prefetch: Important resources like fonts can be loaded early using <link rel="preload">, which has a positive effect on Core Web Vitals.

Note for WordPress users

In WordPress and similar systems, the Head is generated automatically. To manage the title, meta description, and social media tags, you don’t need to work with the code. SEO plugins like Yoast SEO, SEOPress, Rank Math, or The SEO Framework provide convenient input fields and handle the technical integration in the background.

Note on Meta Keywords

The previously common <meta name="keywords"> tag has been ignored by Google for many years and no longer has any influence on rankings. It no longer needs to be maintained.

Conclusion

The Head is the invisible control center of every webpage. Here, key SEO elements like the page title and meta description are defined, the display on mobile devices and social networks is controlled, and important settings for loading speed are made. Carefully maintaining these elements lays a solid foundation for good visibility and a professional appearance in search results and on social media.

Back to glossary