SEO Benefits of HTML5 & Schema

For many years, digital marketers have been attempting to create sites that search engines would drive valuable users to. They’ve been using all of the gadgets in their SEO utility belt—from optimizing content to creating a social following. The following are the four core disciplines of an SEO:

• Content (aka – on-page element)
• Communication (aka – referral/links/off-page elements)
• Social (aka – social . . .)
• Technology – (aka – index-ability)

But all too often, SEOs look at content or links while first forgetting that SEO touches every part of the website and then forgetting to look at the engine that’s driving the car, the website’s code.

Having a semantically coded page could be the extra nudge your site needs to increase indexability and improve accurate indexing. This is where HTML5 & Schema come into play.

Search Engines Love HTML

HTML has always been search engines’ first love. It was designed for structured, semantic content and forms the core of the page. It tells search engines where to find items such as images, videos, scripts, style sheets, and more. The problem was that developers would often use their own ways of defining sections on a page, making it nearly impossible for search engines to identify content on the page. (Nearly impossible? Really? OK, perhaps just incredibly difficult).

HTML5 has new semantic elements to improve the understanding of web pages both for browsers and developers, replacing non-semantic elements like <div> or <span>.

The Semantic Elements of HTML5

The semantic elements of HTML5 that help define different parts of the web page are:

• <header> – Defines the header of the document or section
• <main> – Defines the main content of a document, excluding global items like nav or footer
• <nav> – Defines navigation links
• <article> – Defines a self-contained piece of content within a document (blog posts, comments, etc.)
• <section> – Defines a section within a document
• <aside> – Defines content that is aside from main content; should be related to surrounding content
• <figure> – Defines self-contained content that is independent (photos, illustrations, videos, etc.)
• <mark> – Defines highlighted or important content
• <figcaption> – Defines the caption for the figure
• <hgroup> – Defines a group of header tags
• <footer> – Defines the footer of a document
• <time> – Defines the time

In addition to semantics, HTML5 can solve other SEO problems such as AJAX & URLs’ removing the #! from URLs. To a user, these characters don’t hinder the user experience much, but to a search engine, the removal prevents them from passing page value and properly indexing the website. HTML5 can solve this by using PushState.

The Semantics of Schema

Schema (microdata) is code added to a web page to help search engines understand what your content means, not just what is says. For example, if a search engine crawled a page and found a header that looked like this: <h1>Bass</h1>, does that mean the low tones in music or the fish? Schema would allow search engines to understand the header and provide better search results for users.

When websites have schema markup added, search engines can include bits of information on the search result page to help users understand what the page focuses on. A few types of that content that could be displayed include:

• Ratings
• Prices
• Dates/Times of Events
• Address
• and more

TOO LONG; DIDN’T READ (TL;DR)
HTML5 and Schema are going to be increasingly used. If you are building a new website, build it using these languages to help search engines and users better understand the web page. This can increase indexability and result in more accurate search indexing, which would help your users and crawlers.