This is the first in a series of A-Team blogs regarding SEO best practices.
When HTML5 came on the scene in the 2011-2014 timeframe there was somewhat of an outcry from the web developer community that it was “overly complicated” and parts of it were unnecessary. In particular, developers were scratching their heads about the so-called semantic elements of HTML5 — after all, what was wrong with the good old <div id=“xxx”> construct? Fast forward a few years and today we have all sorts of legitimate uses of semantic HTML5 elements and developers would be wise to start implementing them in all new projects going forward.
The Semantic Elements of HTML5:
| <article> | content flagged to be “syndicated” — must be “complete” by itself since it might be gathered up arbitrarily and presented in a feed |
| <aside> | i.e. “sidebar”, just to support the main content, peripheral to the content. Note: we can now use H1 inside an aside without repercussions with regard to SEO. |
| <details> | represents a disclosure widget from which the user can obtain additional information or controls |
| <figcaption> | the caption for a figure (see below) |
| <figure> | content flagged to be “syndicated” by itself (e.g. photos, illustrations, videos, etc.) |
| <footer> | the webpage’s footer content |
| <header> | the webpage’s header content |
| <main> | the main content of a webpage, excluding global items like header, footer, and nav |
| <mark> | author wants you to focus on this content without emphasizing it, to distinguish between <em> or <strong> |
| <nav> | the webpage’s navigation links |
| <section> | grouping of related content |
| <summary> | defines a visible heading for the <details> element. It can be clicked to view/hide the details |
| <time> | wraps time with machine-readable time properties |
| <hgroup> | a group of header tags |
How will using the Semantic Elements of HTML5 help out with regard to SEO?
In multiple ways:
- it helps search engines and machine readers identify the key parts of the page. In particular, Google’s Hummingbird search engine (as opposed to Google Panda or Google Penguin search engines) is designed to focus on the conversational meaning of the content on your webpage. Using HTML5 semantic tags will improve Hummingbird’s “understanding” of your web pages.
- Additionally, the semantic HTML5 elements will help a percentage of your human site visitors to interact longer with your page (e.g. those who use screen readers). And the longer site visitors stay on your pages, the higher your page rank.
- And finally, HTML semantic elements like <article> and <figure> assist with syndicating/repurposing your content across various channels. By encouraging syndication there are more “external” trusted links to your website. And more trusted links back to your webpage (no matter where they come from) are a main driver of page rank.
Think nobody is using Semantic Elements? Think again.
Facebook is now promoting a featured called “Instant Articles” (see: https://developers.facebook.com/docs/instant-articles/reference), which they feel will be a new channel for publishers to create fast, interactive articles that show up on Facebook’s mobile app. Facebook is clearly piggybacking on HTML5 here. To create an Instant Article is simple really: just format your webpages to their HTML5 guidelines and they will let you publish/promote such interactive articles all optimally responsive for their mobile channel. In short, this is an ideal way of repurposing existing web content. And once again the more trusted links back to your website (no matter where they come from) increase your page rank.
The following is just a quick sample of what the formatting looks like. Note the use of the HTML5 <article> element which is clearly being used here for syndication.
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://example.com/article.html">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
<article>
<header>
<!-- The title and subtitle shown in your Instant Article -->
<h1>Article Title</h1>
<h2>Article Subtitle</h2>
<!-- The date and time when your article was originally published -->
<time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>
<!-- The date and time when your article was last updated -->
<time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
<!-- The authors of your article -->
<address>
<a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
Brandon is a avid zombie hunter.
</address>
<address>
<a>TR Vishwanath</a>
Vish is a scholar and a gentleman.
</address>
<!-- The cover image shown inside your article -->
<figure>
<img src="http://mydomain.com/path/to/img.jpg" />
<figcaption>This image is amazing</figcaption>
</figure>
<!-- A kicker for your article -->
<h3 class="op-kicker">
This is a kicker
</h3>
</header>
<!-- Article body goes here -->
<!-- Body text for your article -->
<p> Article content </p>
<!-- A video within your article -->
<figure>
<video>
<source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
</video>
</figure>
<!-- An ad within your article -->
<figure class="op-ad">
<iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
</figure>
<!-- Analytics code for your article -->
<figure class="op-tracker">
<iframe src="" hidden></iframe>
</figure>
<footer>
<!-- Credits for your article -->
<aside>Acknowledgements</aside>
<!-- Copyright details for your article -->
<small>Legal notes</small>
</footer>
</article>
</body>
</html>
Semantic Schema Microdata
While developers were arguing back and forth about the benefits/downsides of HTML5, under the radar and without much fanfare, www.schema.org (an initiative funded by Google, Microsoft, Yahoo, and Yandex) published a wealth of documented schemas for nearly every conceivable content type: products, events, organizations, local businesses, movies & book reviews, etc. (see www.schema.org). Practically overnight this has become the de-facto standard for content markup.
Why should you go to the trouble of formatting your web content with Schema Microdata? The simple case has to do with how Google formats your page when it shows up in a Search Engine Results Page (SERP) — a.k.a. “rich snippets” (see image below). What has been shown quite demonstratively is that those webpages that are “formatted” using specific Schema Microdata attributes get more click through rates (CTR) when rendered in a SERP against their competition that is lacking such formatting. Needless to say, having a high CTR is another prime driver of page rank.
The primary attributes used in formatting “rich snippets” depend on the schema type — example: a movie listing “rich snippet” would render reviews, locations, and showtimes. A product “rich snippet” would render reviews, prices, and availability. And so on.
The following is a simple example of the use of Schema Microdata while formatting your HTML content:
<body>
…
<article>
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Premium Dark Chocolate Balsamic Vinegar</h1>
<p itemprop="description">Dark Chocolate Balsamic Vinegar from Modena Italy is rich, thick,
and resounds with the complexity of three different chocolates.</p>
<p itemscope itemtype="http://schema.org/AggregateRating">Average rating:
<img src="4stars.png" alt="4 stars of 5"> (<span itemprop="ratingCount">120</span> votes)
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
</p>
</div>
</article>
…
</body>
It should be noted that in lieu of Schema Microdata style formatting you can optionally use RDFa Lite formatting instead (both can use the same www.schema.org schemas). Google claims that they support both styles of formatting. See: https://www.w3.org/TR/xhtml-rdfa-primer/
And in case it wasn’t absolutely clear: you can and should mix both HTML5 Semantics and Schema Microdata together in the same webpage!
Also, here is a link to a Google Structured Data Markup Helper tool to help you see how it works with your current content which you can access here: https://www.google.com/webmasters/markup-helper/
Final Thoughts
Assuming that our web projects are using MVC or some variant, the question remains as to how best to render the content on the presentation layer. It would seem to me that ideally, the serving application (e.g. the controller) would output a payload that would provide unambiguous hints in the response payload as to what specific content schema is being rendered. Done this way, the front-end framework need do nothing more than convert the hints into HTML5 and/or Schema Microdata without requiring much in the way of complex lookups.
Given this, it seems to me that we have an opportunity here to productize this SEO-desirable content behavior by adopting www.schema.org for all the known content under our control. Some obvious examples would be for Eloqua Landing Pages and emails (e.g. www.schema.org/event, www.schema.org/InviteAction, www.schema.org/RsvpAction, schema.org/EmailMessage) or Commerce Product Pages (e.g. www.schema.org/product, www.schema.org/offer, www.schema.org/Review) or Sites Cloud Service Marketing, FAQ, Recipe, or Local Business Pages (e.g. schema.org/NewsArticle, schema.org/Question, schema.org/Recipe, schema.org/LocalBusiness). Needless to say, there are many other opportunities within our Red Stack ecosystem waiting for us to add value for our SEO-oriented customers (which is to say pretty much all of our clients).
All content listed on this page is the property of Oracle Corp. Redistribution not allowed without written permission