Search code examples
htmlseosemantic-websemantic-markupmicrodata

The element h1 must not appear as a descendant of the address element

I'm developing a personal website and the first section must contain the author details (like organization he works for and email). I'm trying to setup the content for the search engine crawlers.

I'm using HTML 5 and microdata. Below is the code:

<header>
  <address itemscope itemtype="http://schema.org/Person">
    <h1 lang="pt" itemprop="name">Lorem Ipsum Dolor Sit Amet</h1>
    <img itemprop="image" src="http://lorempixel.com/150/200/" lang="pt" alt="Lorem Ipsum Dolor Sit Amet">
    <p itemprop="jobTitle">Professor of ...</p>
    <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
      <span itemprop="department" itemscope itemtype="http://schema.org/Organization"><span lang="pt" itemprop="name">Departamento de ...</span></span><br>
      <span itemprop="name" lang="pt">Faculdade de Engenharia ...</span><br>
      <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Rua Dr. Roberto ...</span>, <span itemprop="postalCode">4200-465</span> <span itemprop="addressLocality">Porto, Portugal</span>
      </div>
    </div>
    <p>Email: <a itemprop="email" href="mailto:foo@bar.com">foo@bar.com</a></p>
  </address>
</header>

Using the W3C validator, I get the error:

Line 11, Column 38: The element h1 must not appear as a descendant of the address element.

<h1 lang="pt" itemprop="name">Lorem Ipsum Dolor Sit Amet</h1>

I understand the error. I'm using a h1 because the author's name is also the name of the website.

My question is how would you solve this?

Solution

  • Solved it.

    Even if the title is the same as the author's name, they correspond to different things. Moved up the heading and added a meta tag with the person's name in the address.

    <body>
  <header>
    <h1 lang="pt">Lorem Ipsum Dolor Sit Amet</h1>
    <address itemscope itemtype="http://schema.org/Person">
      <meta lang="pt" itemprop="name" content="Lorem Ipsum Dolor Sit Amet">
      <img itemprop="image" src="http://lorempixel.com/150/200/" lang="pt" alt="Lorem Ipsum Dolor Sit Amet">
      <p itemprop="jobTitle">Professor of ...</p>
      <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
        <span itemprop="department" itemscope itemtype="http://schema.org/Organization"><span lang="pt" itemprop="name">Departamento de ...</span></span><br>
        <span itemprop="name" lang="pt">Faculdade de Engenharia ...</span><br>
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="streetAddress">Rua Dr. Roberto ...</span>, <span itemprop="postalCode">4200-465</span> <span itemprop="addressLocality">Porto, Portugal</span>
        </div>
      </div>
      <p>Email: <a itemprop="email" href="mailto:foo@bar.com">foo@bar.com</a></p>
    </address>
  </header>
  ...
</body>