Semantic HTML5 structure and Google penalty

Question 1

I'm in need for clarity. I'm at an annoying step in my development of a website, and I have read a lot about semantic structure etc, but I'm a bit nervous for my current structure, so I would like to ask your expertise to see, if I might get problems with search engine bots with this setup.

<body itemscope itemtype="http://schema.org/WebPage">
 <a class="skip-link screen-reader-text" href="#content">Skip menuen</a>
 <header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
 <h1>
 <a class="site-title-link" href="https://crafthouse.dk">
 <svg id="header-logo" class="header-logo" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" viewBox="0 0 158 24.7">
 <title id="title" itemprop="headline">Brand Name</title>
 <desc id="desc" itemprop="description">- brand description</desc>
 <!-- A lot of svg logo code here -->
 </svg> 
 </a>
 </h1>
 <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
 <button id="hamburger-btn">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </button>
 <div id="site-navigation" class="site-navigation">
 <ul class="navigation-list">
 <li><a class="navigation-link" href="#">page</a></li>
 <li><a class="navigation-link" href="#">page</a></li>
 <li><a class="navigation-link" href="#">page</a></li>
 <li><a class="navigation-link" href="#">page</a></li>
 <li><a class="navigation-link" href="#">page</a></li>
 <li><a class="navigation-link" href="#">page</a></li>
 </ul>
 </div>
 <div id="menu-speciel" class="menu-speciel">
 <div class="nav-btn-wrap">
 <button id="siteLogin" class="nav-btn">
 <span class="screen-reader-text">Admin login</span>
 <svg class="nav-admin-icon nav-icons">
 <use xlink:href="img/generel/svg-system.svg#admin-icon"></use>
 </svg>
 </button>
 </div>
 <button id="siteSearch" class="nav-btn">
 <span class="screen-reader-text">Søg</span>
 <svg class="nav-search-icon nav-icons">
 <use xlink:href="img/generel/svg-system.svg#search-icon"></use>
 </svg>
 </button>
 </div>
 </nav>
 </header>
 <main id="content" class="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/WebPageElement">
 <h2>Main content header</h2> 
 </main>
 <footer itemscope itemtype="http://schema.org/WPFooter">
 </footer>

In the outline it will look like this:

Brand name - brand description
- untitled nav
- Main content header

Question 2

Semantically, a heading should contain text, not an image.

Also, somewhat more important from an SEO perspective, the <h1> element should relate to the specific page. Unless this site is a single page, having the same <h1> on every page would be a very bad idea.

Generally, ranking for the company name is a given (unless the company is called 'Cheap Viagra Cialis Online ltd"...).

I would remove the heading tag from the page header:

 <header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
 <a class="site-title-link" href="https://crafthouse.dk">
 <svg id="header-logo" class="header-logo" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" viewBox="0 0 158 24.7">
 <title id="title" itemprop="headline">Brand Name</title>
 <desc id="desc" itemprop="description">- brand description</desc>
 <!-- A lot of svg logo code here -->
 </svg> 
 </a>
 <nav itemscope itemtype="http://schema.org/SiteNavigationElement">

And swap the <h2> in the content section for an <h1>:

<main id="content" class="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/WebPageElement">
 <h1>Main content header</h1> 
</main>

Question 3

Okay thank you. But doing this will result in "untitled body/document" ind the outliner? I guess I also should remove the schema.org structure in the header?

Question 4

HTML5

If the main content is a self-contained post (like an article or a blog post), you could use the article element. Otherwise you could use section to make the section that you start with the h2 explicit.

<main>
 <section> <!-- or <article> -->
 <h2>Main content header</h2> 
 </section>
</main>

Outline

I think your page structure is great. Using a header with an h1 for the site title makes sense. That way the following sections (nav, main content) are in its scope, and you get a nicely labeled outline.

It also makes sense to use an image as the content for h1, if that’s the site logo. (h1 is not required to only contain text, and semantically the alternative text for that image represents it for user agents not capable of processing images).

Microdata

Microdata can only be used in HTML5. svg is an element from a different namespace, so you may not use Microdata on the child elements title and desc.

Schema.org

You are using the types SiteNavigationElement, WPHeader, WebPageElement and WPFooter correctly, but they aren’t really that useful for Web pages. HTML already conveys what these represent (using these types makes sense in non-HTML contexts, if at all). Generally, I would recommend to omit WebPageElement and all of its sub-types.

If you want to keep using WPHeader, note that its properties headline and description would have to be about the header, not the site/page (so these properties typically aren’t useful for WPHeader to begin with). These properties should be added to the WebPage (which means that they shouldn’t have a different item as parent).

As an alternative for the mainContentOfPage property (should you agree to omit it and WebPageElement), have a look at the mainEntity property. As value you can provide an item with a type like Article or BlogPosting (depending on the page, it can also make sense to use Person etc. as value).

Question 5

I really appreciate your comment :):) The webpage is basically a branding page for a company. I think i will omit the schema.org. I just understood that it helps Google understand the page, but I might do it the JSON way, to markup business address, phone nr etc. Good to know with the h1 tag and outline, but does it not confuse Google with all these pages with same h1 tag? Or should we try use a php constant to alter some part of the h1? like this: Business name - desc, for the frontpage Business name - about. etc.

Question 6

And when using accessible SVG markup, the title and desc for the SVG becomes a part of the h1 tag in the outline :S Does this matter?

Question 7

@MikkelMadsen: You can of course also use Microdata for marking up the business etc.. --- If you go with a site-wider header and use a heading for the site name/logo, it would be confusing to have a slightly different heading each case; because it’s site-wide, it should be the same on every page of your site. --- For the SVG in h1: The name (which is the alternative to the logo, right?) should of course be the textual content of the h1: it’s what search engines, blind users etc. get. The description, however, should only be part of the h1 if the text is included in the image.

Steve Steve 3611 silver badge4 bronze badges · Answer 1 · 2016-02-01 10:13:12Z

Semantically, a heading should contain text, not an image.

Also, somewhat more important from an SEO perspective, the <h1> element should relate to the specific page. Unless this site is a single page, having the same <h1> on every page would be a very bad idea.

Generally, ranking for the company name is a given (unless the company is called 'Cheap Viagra Cialis Online ltd"...).

I would remove the heading tag from the page header:

 <header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
 <a class="site-title-link" href="https://crafthouse.dk">
 <svg id="header-logo" class="header-logo" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" viewBox="0 0 158 24.7">
 <title id="title" itemprop="headline">Brand Name</title>
 <desc id="desc" itemprop="description">- brand description</desc>
 <!-- A lot of svg logo code here -->
 </svg> 
 </a>
 <nav itemscope itemtype="http://schema.org/SiteNavigationElement">

And swap the <h2> in the content section for an <h1>:

<main id="content" class="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/WebPageElement">
 <h1>Main content header</h1> 
</main>

Okay thank you. But doing this will result in "untitled body/document" ind the outliner? I guess I also should remove the schema.org structure in the header?

unor unor 2,67315 silver badges24 bronze badges · Answer 2 · 2016-02-04 17:33:38Z

HTML5

If the main content is a self-contained post (like an article or a blog post), you could use the article element. Otherwise you could use section to make the section that you start with the h2 explicit.

<main>
 <section> <!-- or <article> -->
 <h2>Main content header</h2> 
 </section>
</main>

Outline

I think your page structure is great. Using a header with an h1 for the site title makes sense. That way the following sections (nav, main content) are in its scope, and you get a nicely labeled outline.

It also makes sense to use an image as the content for h1, if that’s the site logo. (h1 is not required to only contain text, and semantically the alternative text for that image represents it for user agents not capable of processing images).

Microdata

Microdata can only be used in HTML5. svg is an element from a different namespace, so you may not use Microdata on the child elements title and desc.

Schema.org

You are using the types SiteNavigationElement, WPHeader, WebPageElement and WPFooter correctly, but they aren’t really that useful for Web pages. HTML already conveys what these represent (using these types makes sense in non-HTML contexts, if at all). Generally, I would recommend to omit WebPageElement and all of its sub-types.

If you want to keep using WPHeader, note that its properties headline and description would have to be about the header, not the site/page (so these properties typically aren’t useful for WPHeader to begin with). These properties should be added to the WebPage (which means that they shouldn’t have a different item as parent).

As an alternative for the mainContentOfPage property (should you agree to omit it and WebPageElement), have a look at the mainEntity property. As value you can provide an item with a type like Article or BlogPosting (depending on the page, it can also make sense to use Person etc. as value).

I really appreciate your comment :):) The webpage is basically a branding page for a company. I think i will omit the schema.org. I just understood that it helps Google understand the page, but I might do it the JSON way, to markup business address, phone nr etc. Good to know with the h1 tag and outline, but does it not confuse Google with all these pages with same h1 tag? Or should we try use a php constant to alter some part of the h1? like this: Business name - desc, for the frontpage Business name - about. etc.
And when using accessible SVG markup, the title and desc for the SVG becomes a part of the h1 tag in the outline :S Does this matter?
@MikkelMadsen: You can of course also use Microdata for marking up the business etc.. --- If you go with a site-wider header and use a heading for the site name/logo, it would be confusing to have a slightly different heading each case; because it’s site-wide, it should be the same on every page of your site. --- For the SVG in h1: The name (which is the alternative to the logo, right?) should of course be the textual content of the h1: it’s what search engines, blind users etc. get. The description, however, should only be part of the h1 if the text is included in the image.

Stack Exchange Network

Semantic HTML5 structure and Google penalty

2 Answers 2

HTML5

Outline

Microdata

Schema.org

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Semantic HTML5 structure and Google penalty

2 Answers 2

HTML5

Outline

Microdata

Schema.org

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions