Calls to move to HTML5 are increasingly hard to ignore. And, if you’re on the Studiopress platform, their recent upgrade to Genesis 2.0 provides a compelling motive to make the switch.
Benefits of HTML5
First let’s run through all the usual advantages to upgrade to the most recent version of the language that marks up web pages:
- is more future proof
- has several improvements in usability and user experience,
- it was build around web apps and has features like offline storage and geo-positioning
- better for mobile devices, because of the previous point
- has better support for audio and video embedding
- provides cleaner more semantic markup
… and it’s the last point above that’s a real biggie. More later. However, now we’re on the subject we might as well list the drawbacks…
Disadvantages of HTML5
Not all web browsers offer full support for HTML5. Our old friend, Internet Explorer, is unfortunately the main culprit. Add the following code to the <head> of all your HTML5 pages to ensure they display properly on the browser all developers love to hate:
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
Let’s talk semantics
Semantic markup means using special HTML tags to describe the kind of content they contain.
So, whereas the old HTML4 tags may have been div id="thingy"; the new HTML5 semantic tags of <header>, <nav>, <article>, <aside> and <footer> more clearly describe the function of the different web page elements.
HTML5, therefore, presents cleaner code which is something all SEOs and developers aspire to.
However there is another semantic change to the HTML5 upgrade using the Genesis 2.0 WordPress theme framework which is possibly, even more important to the search engines … and that is support for Schema.org and microdata tags.
What’s Schema.org?
Schema.org is a collaboration by Google, Microsoft and Yahoo! with the idea of creating a “single vocabulary and markup syntax” agreed upon by all the search engines and browsers so that webmasters can easily markup their content and users get a better experience on the web.
Schema decides on standards of markuping elements of web content using “microdata”.
So what’s microdata?
Microdata is an HTML5 specification that labels content to describe a specific type of information.
It’s easier to give you a practical demonstration. First here’s some normal old HTML you’d find anywhere on the web today:
<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href=”http://www.example.com”>www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>
Here is the same HTML marked up with microdata:
<div itemscope itemtype=”http://data-vocabulary.org/Person”>
My name is <span itemprop=”name”>Bob Smith</span>
but people call me <span itemprop=”nickname”>Smithy</span>.
Here is my home page:
<a href=”http://www.example.com” itemprop=”url”>www.example.com</a>
I live in Albuquerque, NM and work as an <span itemprop=”title”>engineer</span>
at <span itemprop=”affiliation”>ACME Corp</span>.
</div>
The above two HTML excerpts will display identically to visitors but the second example makes a lot more semantic sense to a robot than the first. And, this microdata can appear as rich snippets in the search engine results pages.
Why you should bother
Other than keeping up with the latest web standards, there is another, more practical, advantage to updating your site to HTML5 with Schema support. Semantically marked up pages will appear with rich snippets in the search engine results increasing click through. They may even appear more often.
Here is Google’s answer to an FAQ question “Will using schema.org improve my site’s performance in search?”:
Google doesn,t use markup for ranking purposes at this time””but rich snippets can make your web pages appear more prominently in search results, so you may see an increase in traffic.
So if Google is saying you may see an increase in traffic with rich snippets powered by microdata, you should be interested.
How to upgrade to HTML5 on Genesis
OK, enough already! Here’s the “how to”. It’s really very easy. See the video below.
Zip along to 2:48 in the video where you get the practical demonstration of what you do, which is the following.
After having successfully copied all your site’s files, backed up your database and upgraded to Genesis 2.0 (like a good webmaster!) paste the following lines anywhere in the functions.php file of your Genesis child theme:
// Enable HTML5 markup
add_theme_support( 'html5' );
Refresh your site and, congratulations, you have successfully turned your site into HTML5 with the Schema mark-up goodness. However, you may also notice that the structure and design of the site has completely broken. Ouch!
Remember that many of the main XHTML tags have changed to the new, more semantic, HTML5 tags. These were used in the CSS as the descriptors and that is why the site looks … not as you’d like.
All you have to do now is to go through the CSS and change all the old descriptors to the new HTML5 ones. This could take a few hours.
But, don’t worry, as this is Genesis, somebody has been there, done that and created the web app to do it for you. Head over to Cobalt App’s Genesis XHTML to HTML5 CSS Converter which will update your CSS and fix your site with the click of a mouse.
Done.
Further microdata enhancements
I’m really just scratching the surface with what can be achieved with Schema.org’s microdata.
For example, the body tag’s to all your HTML5 web pages have the following default itemtype:
itemtype=”http://schema.org/WebPage”
I’ve customised the microdata on my About and Contact pages to the following:
itemtype=”http://schema.org/AboutPage”
itemtype=”http://schema.org/ContactPage”
You can add further customisation to the HTML of the page’s content. Here, for example, here’s how I’ve marked up some content on my Contact page (with the help of this article):
<p itemprop=”telephone”>Phone: +44 (0)7762 383 426</p>
<p itemprop=”email”>Email: rob [at] robcubbon.com</p>
You can do it
It’s more important to understand HTML and the languages of the web than it is to speak English. HTML5 is the first major upgrade in 13 years. You can use it to better communicate your websites’ purpose to the world. And your clients will thank you for it.
Great video Rob!
Google recently released a post about how schema will help improve the chances of your content appearing in their new search results for in depth articles. http://googlewebmastercentral.blogspot.com/2013/08/in-depth-articles-in-search-results.html
Thanks, Brad, and, thank you, while you here, for helping me out on the Studiopress forums as well!
Yet more evidence. Schema is certainly worth paying attention to.
Thank for the tips. I upgraded to Genesis 2.0 and used a new theme that already support the HTML5, but I didn’t know that we need to go to customize page by page.
Do we need to do something on the single post post as well?
Hey, Santel, hope you’re well. If you have a new theme which already supports HTML5 then the schema support will already be present in the HTML of your site so nothing to worry about. Page by page customization is something to think about but definitely not a really important requirement.
Thanks for all the info. If we are using a child theme, I’m using News for example, do you recommend waiting for the theme to be updated before making all the CSS changes?
This depends on how much you have adapted the theme. If you haven’t touched the theme files since you installed the theme then, yes, wait for the theme to be updated to Genesis 2.0 and HTML5 and then, once it’s updated, you won’t have to make the CSS changes – they’ll already be done.
If you’ve added loads ad loads of CSS changes and added extra page templates to the theme, like I do, then it’s best to make the HTML5 change yourself in the way I’ve outlined in this article.
Hi there Rob,
Many thanks for this easy to understand video. I didn’t know about that Cobalt app. Brilliant.
I was quite a fan of Woo themes who were ahead with HTML 5, but since they recently upset many of their customers I’ll be more inclined to do even more with Genesis.
Hope the August London Entrepreneur Support meeting went well. See you for the September one.
Thanks, David, actually I think Genesis provide pretty good support for WooCommerce but I’ve never used the two together.
The August meetup was good thank you although it wasn’t so well attended so I’m hoping for better on September 10th. See you there! 🙂
Thank you for this great information, i have used Cobalt tool to convert the CSS but it always break down my blog.
Hello, Kingsley, there maybe some of the old tags in your functions.php ? But the Cobalt App should sort out 99% of the CSS changes. 🙁
Very nice article. Especially for beginners like me it is really helpful. The video is fantastic too and it works like a charm. It took me less than 10 minutes for the whole process including backup. Great work
Glad it helped, Sowmya.