Using schemas and HTML5 for better SEO

Using schema microdata and semantic HTML5 to markup website is a lot like having healthy lifestyle – you know you should do it, but it seems to be too much afford. However, since Google and others have moved forward from just indexing keywords to analysing and understanding the content, this approach became necessary. Schemas are kind of microdata markup to tell the search engines what your content means, not just what it says. According study in 2011, using structured markup made up to 30% increase in CTR.

Let’s start with an example to describe why HTML5 with combination of schemas is necessary.  Below you find three examples how search engines see your website. First goes old HTML4, then just HTML5 and finally HTML5 + schemas.

HTML4

<SECTION>
	<IMAGE>#####</IMAGE>
	<SECTION>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</SECTION>
</SECTION>

<SECTION>
	
	<TITLE>##########</TITLE>
	<TEXT>#####</TEXT>
	<SECTION>#####</SECTION>

	<SECTION>
		<IMAGE>#####</IMAGE>
		<PARAGRAPH>##############################</PARAGRAPH>
		<PARAGRAPH>##############################</PARAGRAPH>
	</SECTION>

	<SECTION>
		<TEXT>#####</TEXT>
		<TEXT>#####</TEXT>
		<IMAGE>#####</IMAGE>
		<LINK>#####</LINK>
	</SECTION>
	
	<SECTION>
		<TEXT>#####</TEXT>
		<TEXT>####################</TEXT>
	</SECTION>
	
</SECTION>

<SECTION>

	<SECTION>
		<IMAGE>#####</IMAGE>
		<TEXT>#####</TEXT>
	</SECTION>
	
	<SECTION>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</SECTION>

</SECTION>

<SECTION>
	<SECTION>
		<TEXT>#####</TEXT>	
		<TEXT>####</TEXT>
		<TEXT>#####</TEXT>
	</SECTION>
	<TEXT>#####</TEXT>
</SECTION>

 

HTML5

<HEADER>
	<IMAGE>#####</IMAGE>
	<NAVIGATION>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</NAVIGATION>
</HEADER>

<ARTICLE>
	
	<TITLE>##########</TITLE>
	<TEXT>#####</TEXT>
	<NAVIGATION>#####</NAVIGATION>

	<SECTION>
		<IMAGE>#####</IMAGE>
		<PARAGRAPH>##############################</PARAGRAPH>
		<PARAGRAPH>##############################</PARAGRAPH>
	</SECTION>

	<SECTION>
		<TEXT>#####</TEXT>
		<TEXT>#####</TEXT>
		<IMAGE>#####</IMAGE>
		<LINK>#####</LINK>
	</SECTION>
	
	<SECTION>
		<TEXT>#####</TEXT>
		<TEXT>####################</TEXT>
	</SECTION>
	
</ARTICLE>

<SECONDARY-CONTENT>

	<SECTION>
		<IMAGE>#####</IMAGE>
		<TEXT>#####</TEXT>
	</SECTION>
	
	<NAVIGATION>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</NAVIGATION>

</SECONDARY-CONTENT>

<FOOTER>
	<SECTION>
		<TEXT>#####</TEXT>	
		<TEXT>####</TEXT>
		<TEXT>#####</TEXT>
	</SECTION>
	<TEXT>#####</TEXT>
</FOOTER>

 

HTML5 + schemas

<HEADER>
	<SITE-IMAGE>#####</SITE-IMAGE>
	<SITE-NAVIGATION>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</SITE-NAVIGATION>
</HEADER>

<ARTICLE>
	
	<TITLE>##########</TITLE>
	<PUBLISHED>#####</PUBLISHED>
	<BREADCRUMBS>#####</BREADCRUMBS>

	<CONTENT>
		<IMAGE>#####</IMAGE>
		<PARAGRAPH>##############################</PARAGRAPH>
		<PARAGRAPH>##############################</PARAGRAPH>
	</CONTENT>

	<AUTHOR>
		<NAME>#####</NAME>
		<JOB>#####</JOB>
		<IMAGE>#####</IMAGE>
		<PROFILE>#####</PROFILE>
	</AUTHOR>
	
	<COMMENT>
		<AUTHOR>#####</AUTHOR>
		<TEXT>####################</TEXT>
	</COMMENT>
	
</ARTICLE>

<SECONDARY-CONTENT>

	<ADVERT>
		<IMAGE>#####</IMAGE>
		<TEXT>#####</TEXT>
	</ADVERT>
	
	<RELATED-ARTICLES>
		<LINK>#####</LINK>
		<LINK>#####</LINK>
	</RELATED-ARTICLES>

</SECONDARY-CONTENT>

<FOOTER>
	<ADDRESS>
		<NAME>#####</NAME>	
		<STREET>####</STREET>
		<CITY>#####</CITY>
	</ADDRESS>
	<COPYRIGHT>#####</COPYRIGHT>
</FOOTER>

 

As you can see, you don’t have to understand all that science behind indexing data to notice how big mess old HTML4 is. HTML5 let us define clear structure of website and differentiate styling elements from data. With HTML5, search engines still can’t understand the content, but at least can recognise what is important. In third example, schemas bring markup to completely new level and even without the text content you can clearly understand what is going on.

Search engines are using on-page markup in a variety of ways—for example, Google uses it to create rich snippets in search results. Not every type of information in schema.org will be surfaced in search results but over time you can expect that more data will be used in more ways. In addition, since the markup is publicly accessible from your web pages, other organizations may find interesting new ways to make use of it as well. Clear, concise rich snippets can result in higher CTR, as users can quickly and easily determine whether the content on your site is what they’re looking for.

Example of potential search result snippet. Screen grab for searched term “Gordon Ramsay restaurant”:

ritch-snippet

About rich snippets and structured data – Google Webmaster Help

 

Using schemas in practise
To get detailed informations about schemas visit official website schema.org.

Schema always defines type of object and its properties. Each object has own group of specific properties plus others inherited from its parent. For example, an object Article is descendant (sub-category) of object CreativeWork which is descendant of very first generic object Thing. Article’s properties are for instance ArticleBody, Author and Image. All these specifications are written as other html tag attribute. Read more details in documentation itself.

Google offers as a part of Webmaster Tools structured data testing tool and markup helper which will help you to better understand how to use schemas in practise. For beginning you can find handy this schema creator tool when you choose of most popular schema, populated with data and it will generate basic markup for you. For your inspiration, according to Similarweb study, most used schemas are:

  1. Offer Schema
  2. WebPage Schema
  3. AggregateRating Schema
  4. Product Schema
  5. Review Schema
  6. Rating Schema
  7. SearchAction Schema
  8. MobileApplication Schema
  9. Website Schema

 

How about other microdata? Let’s Google speak for itself

Historically, we’ve supported three different standards for structured data markup: microdata, microformats, and RDFa. Instead of having webmasters decide between competing formats, we’ve decided to focus on just one format for schema.org.

And Open Graph?
Facebook Open Graph serves its purpose well, but it doesn’t provide the detailed information search engines need. A single web page may have many components, and it may talk about more than one thing. OG and Schemas work great together. While OG makes website easy to share on social networks, Schemas make search engine to understand the content.

Summary
Using schemas is simple and gives you an advantage against others who don’t use it. Adopting it on existing website can be a bit pain, but if you are just going to build one, there is no reason why not to do it properly.