SEO Strategy, HTML5 & SEO: Simple Coding for Search Engine FriendlinessMarch 27, 2015Liliyan KrumovReading time: Over the last few years the usage of HTML5 has grown significantly. Today, more than 60% of webpages are using this improved technology and and enjoying its benefits.But did you know that you can turn your website into an SEO beast using HTML5?HTML5 is the best thing to happen to websites, since sliced bread happened to the world. This new code allows you to structure your site in a language search engines understand — so you’ll always know how search engines are viewing and interpreting it.Plus, with simple tags and attributes, you never have to worry about cross-browser support again.First of all, if you are planning to start a new website – don’t hesitate, start with HTML5. But if you already own a website and it’s not HTML5-based, ask yourself:Does my website layout need to be optimized for the search engines?Is my website using audio/video elements?Am I planning to continue developing of the website?If your answer to even one of the questions is “yes,” it’s time to dive into HTML5 and improve your rankings.HTML5 Website Structure/Layout As you may know, one of the things which search engines look at is website structure/layout. This includes the header, navigation, content, sidebar and footer.Basically, before HTML5 you had to follow strict rules for each of these elements. And incorrect coding in this regard is one of the most common problems we encounter in our SEO Audits.But now… HTML5 is semantic! Here’s what a sample page in HTML5 looks like: <!DOCTYPE html> <!-- It's shorter, isn't it? --> <html> <head> <title>Page Title</title> </head> <body> <header> <h1>Page Title</h1> </header> <nav>Main Navigation Links</nav> <section> <h1>Content H1</h1> <p>Content</p> </section> <footer> Copyright © Hop Online 2015 </footer> </body> </html> You have a tag for each of the structure/layout elements and you don’t need to be an expert to give your website a clear structure!Embedded Elements in HTML5Many websites have audio and/or video elements to grab the user’s attention. At the same time, though, including video and audio elements is not that easy, since you have to provide cross-browser support and probably that means tons of JavaScript or heavy and expensive players.But —yeah you guessed it — HTML5 comes with this support out of the box!You shouldn’t have to worry about different browsers and whether they’re mobile or not. Everyone will be able to view your video and listen to your audio! It’s this simple: <video width="320" height="240" autoplay controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> </video> Develop Today to Make Your Life Easier TomorrowBasically, if you’re still developing your website or if you’re planning to add some new features, you should use every possibility to make your life easier!Upgrading to HTML5 can save you hundreds of lines of code and dozens of working hours, so there’s no reason not to make the switch.As Xanthir from Stackoverflow puts it:“So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.”On-Page SEO with HTML5As mentioned above, HTML5 brings structure, so your website will be viewed the same way both by people and search engines. Isn’t that just awesome?Just replace some divs with their semantic representations, and you can instantly send your website traffic to new heights!Another common problem HTML5 helps you out with is the linking within your website. You want your main navigation links to have more Page Rank than the rest, right? We all do. But if you’re not an SEO expert, it’s nearly impossible to get this right.Here’s where the “superman” of coding, HTML5, comes to the rescue again. The semantic tag <nav> will tell web crawlers that the links inside the tag are more important than the others, so more Page Rank will be passed to them.What About Older Browsers? Older browsers doesn’t support HTML5 and its features. So what happens to users using old versions of any browser? Well, that’s something you conveniently don’t have to worry about.Thanks to Modernizr, html5shiv and Response JS you can turn the old browsers into modern, they will be able to support HTML5 elements and CSS3 features!ConclusionAs long you’re using the right HTML5 semantic tags and you have at least 300 words on all your pages, you’re basically all set. You shouldn’t have any problems communicating your web content to bots, and your search engine rankings should go up naturally.Just sit back and enjoy the beast you’ve created! Or let us know and we can create it for you!Interested in getting more SEO & CM marketing tips? Subscribe to our blog!
