🔎
Google Search for beginners
Home
  • Introduction
  • Google Search Essentials
    • Overview
    • Google Search Technical Requirements
    • Spam Policies
  • SEO Basics
    • SEO Beginner's Guide
    • How Google Search Works
    • Creating Helpful, Reliable Content
    • Do You Need an SEO Expert?
    • Maintaining Your Website’s SEO
    • Developer's Guide to Google Search
    • How to Get Your Website Listed on Google
  • crawling and indexing
    • Overview
    • File formats Google can index
    • URL structure
    • Links
    • Sitemaps
      • Create and submit a sitemap
      • Manage your sitemaps
      • Image-specific sitemaps
      • News-oriented sitemaps
      • Video sitemaps and alternatives
      • Combining different sitemap types
    • Managing Google Crawlers
      • Reducing the crawl rate of Googlebot
      • Verifying the Googlebot and other Google crawlers
      • Managing Crawl Budget for Large Sites
      • HTTP Status Codes, Network, and DNS Errors
      • Types of Google Crawlers
      • Googlebot Explained
      • Google Read Aloud Service
      • Google API
      • Understanding Feedfetcher
    • Robots.txt
      • Creating and Submitting Robots.txt
      • Updating Robots.txt
      • Google's Interpretation of Robots.txt
    • Canonicalization
      • Specifying Canonicals Using rel="canonical" and Other Methods
      • Resolving Canonicalization Issues
    • Canonicalization for Mobile Sites and Mobile-First Indexing
    • AMP (Accelerated Mobile Pages)
      • Understanding How AMP Works in Search Results
      • Enhancing Your AMP Content
      • Validating AMP Content
      • Removing AMP Content
    • JavaScript
      • Fixing Search-Related JavaScript Issues
      • Resolving Issues with Lazy-Loaded Content
      • Using Dynamic Rendering as a Workaround
    • Page and Content Metadata
      • Meta Tags
      • Using Robots Meta Tag, data-nosnippet, and X-Robots-Tag noindex
      • noindex Explained
      • rel Attributes
    • Removals
      • Removing Pages from Search Results
      • Removing Images from Search Results
      • Handling Redacted Information
    • Redirects and Google Search
      • Switching Website Hosting Services
      • Handling URL Changes During Site Moves
      • A/B Testing for Sites
      • Pause or Disable a Website
Powered by GitBook
On this page
  1. crawling and indexing

Page and Content Metadata

Using Valid HTML for Page Metadata: A Deep Dive for SEO Success

When it comes to SEO, providing search engines with clear, concise information about your web pages is crucial. This is where metadata comes in. Metadata provides valuable context about your pages, helping Google understand and rank your content effectively. To ensure Google correctly interprets your metadata, it's essential to use valid HTML within the <head> section of your HTML document.

The Importance of Valid HTML for Metadata

Google strives to understand your website's content even if the HTML code isn't perfect. However, invalid HTML within the <head> element can significantly hinder Google's ability to understand and utilize your metadata. This can negatively impact your search engine rankings and visibility.

The primary way to specify metadata about a page is through the <head> element. Within this element, the <title>, <meta>, <link>, and other specific elements provide crucial information about your page's content.

Valid Elements within the <head> Element

According to the HTML standard, the following elements are considered valid within the <head> element:

  • <title>: Specifies the title of your webpage, which appears in search engine results pages (SERPs).

    <head>
      <title>Delicious Apple Pie Recipe | Grandma's Cookbook</title>
    </head> 
  • <meta>: Used to define various metadata elements, such as page description, keywords, author, and character set.

    <head>
      <meta charset="UTF-8">
      <meta name="description" content="This apple pie recipe has been passed down for generations. It's the perfect combination of sweet and tart!">
      <meta name="author" content="Grandma Smith">
    </head>
  • <link>: Establishes relationships between your webpage and external resources. This is commonly used for linking stylesheets, favicons, and prefetching resources.

    <head>
      <link rel="stylesheet" href="styles.css">
      <link rel="icon" href="favicon.ico" type="image/x-icon">
      <link rel="preconnect" href="https://fonts.gstatic.com">
    </head>
  • <script>: Embeds or links to client-side scripts, such as JavaScript files, that enhance the functionality and interactivity of your webpage.

    <head>
      <script src="scripts.js"></script> 
    </head>
  • <style>: Defines the styling rules for your webpage's elements, typically using CSS (Cascading Style Sheets).

    <head>
      <style>
        body {
          font-family: Arial, sans-serif;
        }
      </style>
    </head>
  • <base>: Specifies the base URL for all relative URLs within your HTML document.

    <head>
      <base href="https://www.example.com/">
    </head>
  • <noscript>: Provides alternative content for users who have disabled JavaScript in their browsers.

    <head>
      <noscript>
        <p>Please enable JavaScript to view this website properly.</p>
      </noscript>
    </head>
  • <template>: Defines HTML templates that can be cloned and used to populate content dynamically within your webpage.

    <head>
      <template id="product-card">
        <h2></h2>
        <p></p>
      </template>
    </head>

Common Invalid Elements and How to Handle Them

While the elements listed above are valid within the <head> element, certain other elements, though frequently used elsewhere in an HTML document, are considered invalid within the <head>. These include:

  • <iframe>: Used to embed another HTML document within the current document.

  • <img>: Used to embed images within a webpage.

While Google strongly advises against using invalid elements within the <head>, if you must use them, place them after the valid metadata elements. This is because Google stops processing the <head> content upon encountering an invalid element.

Incorrect Example:

<head>
  <title>My Website</title>
  <iframe src="https://www.example.com"></iframe> <meta name="description" content="Important description!">
</head>

In this example, the <meta> description tag would be ignored because it appears after the invalid <iframe> element.

Correct Example:

<head>
  <title>My Website</title>
  <meta name="description" content="Important description!">
  <iframe src="https://www.example.com"></iframe> 
</head>

By placing the <iframe> element after the <meta> description tag, Google can correctly process and utilize the description metadata.

Conclusion

Ensuring your webpage metadata is correctly structured using valid HTML is vital for effective SEO. By adhering to the HTML standards and avoiding common pitfalls, you can ensure that search engines accurately understand and index your website's content, leading to better search engine rankings and increased visibility.

PreviousUsing Dynamic Rendering as a WorkaroundNextMeta Tags

Last updated 10 months ago