01722 340233

Blog / News
- read about what we enjoy

News and Blog

The important seo factors of html5 micro data and semantic tags

In my overall opinion, the only thing search engines are interested in is getting the best content to the most relevant people based on the search queries they make, and what better way to do that than being able to tell it what information is on your site, and where it is.

Imagine saying to Google, this is my companies address, this is contained in the header. This bit is my portfolio, and inside that portfolio are case studies with information about my projects, and this is contained in the main content of my site – so please index this information as a matter of relevance.

The general idea is that you use whats known as a vocabulary from such resources as schema.org and data-vocabulary.org – call the defined content within its vocabulary to your site – this then sends the information to search engines, telling them to index the content as this.

How is it implemented? Well actually that’s really simple, and it also makes loads of sense. Consider this code.

<div itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">My Companies Organisation</h1>
<div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">Company's Street Address</span>
<span itemprop="locality">Company's General Location</span>,
<span itemprop="region">Company's Region</span>
<span itemprop="postal-code">Company's Post Code</span>

I think the above code would be fairly self explanatory if you have knowledge of (X)HTML. We are displaying this information on the website as normal, but also telling the search engine what this information is. Before that, search engine bots are just crawling the web trying to index complete blocks of content by sense rather than specification.

As per the future of web document specifications, HTML5, it is becoming increasingly important to wrap your content as per the specific areas of your site.

This also helps the search engine bot to understand how your content is laid out, and what areas to target most importantly. Consider this code.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
<article>
<p>...</p>
</article>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>

This is an example of HTML5 Semantic Markup – defining the elements of your site. Again this does make quite a lot of sense – but it’s probably wise to check the w3c guide to HTML5 Semantic Markup.

The best reason I can give for introducing this practice to your websites is that it helps search engines retain the most specific relevant information on your site, and in turn gives better search results to users who might search it – making for better search results. So, in my opinion, that would be making your website far more search engine friendly – and future proof.

What about styling HTML5 elements in Internet Explorer less than 9?

I don’t like talking about it, but I have to, since a lot of the population of the world are still using legacy browsers. I have a very simple solution for this – it’s not ideal, but it works. Javascript!! For HTML5 Semantic Markup, place this javascript in the head of your document. It creates the new elements on the fly. Add the other HTML5 semantic tags as well if you need to. This will allow you to style these new elements.


<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>

Once again, I hope you have enjoyed reading my post.

Joe B

482 total views, 2 views today

About 

I am a Web Developer from Salisbury, UK. In recently years I have been focused on WordPress and front end UI/UX development, constructing ways in which users can easily browse websites and providing admins with comprehensive and easy to understand management tools.

Tags: News / Blog