Although search engines are good at figuring out what a page is about, schema.org, a colloboration beteen Google, Microsoft and Yahoo!, created a structured data markup schema to not only help them understand pages better, but also to help provide better formatted results.
On-Page Markup – Not Just For Products.
It’s become very common for ecommerce sites to use markup which relates to products, marking up things like price, image, reviews and availability, but today I’m going to explain a very simple way to add markup for local businesses to make sure search engines understand their address and opening hours.
This address information is very helpful for search engines showing map information such as Google Local.
The part of the mark-up we’re going to look at is LocalBusiness.
In this example we’ll be adding the business name, description, address, phone number and opening hours, although there is much more markup available if you need it.
In this example we’ll be using both the LocalBusiness and the Address schema, the address will be embedded within the LocalBusiness schema, and we assume you have access to the HTML of the site, if you are using a CMS such as WordPress, Joomla or Drupal you can access your HTML for the article with the source code editor (it looks like a page with <> on it in your toolbar.
So firstly, lets set the opening div tag (which won’t get closed until the end) and specify the LocalBusiness schema div:
<div itemscope itemtype="http://schema.org/LocalBusiness">
Following this, you can either start immediately with the span, or as I have done here I wanted to use the word “at” prior to the address:
<p>At <span itemprop="name">eye2eye opticians</span>
And in a similar way although I closed the span after the business name I wanted some free text after that to help it make sense on the page:
we like to give our customers the best of both worlds;</p>
So we’ve defined the name in a span, and that is within a paragraph which helps to give the name context on the page for visitors. The next step is the business description:
<p><span itemprop="description">Great value for money with offers competitive with high street brands AND the quality, professional friendly service you would expect from an independent opticians.</span></p>
Address is a schema which exists outside of the LocalBusiness schema, but in this case we want to embed it within the LocalBusiness divs, so it is clear it is the address of the business. Again I’m going to use a little but of text after declaring the schema, before entering the actual address:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><p>You can find us at
Then the spans for each line of the address, and close the PostalAddress div:
<span itemprop="streetAddress">346 Carlton Hill</span>, Carlton, <span itemprop="addressLocality">Nottingham</span>, <span itemprop="postalCode">NG4 1JD</span>.</p></div>
The rest of the markup is back to the LocalBusiness schema, which we didn’t close the div for yet, so we can pop in the phone number:
<p>You can ring us on <span itemprop="telephone">0115 9877378</span>.</p>
The last part of the schema we are going to use is to specify opening hours. This will often show in search results, especially on mobile, as in the screenshot below.
Days are entered by the first two letters, i.e. Mo or We, and times are always in 24 hour format with a – in between the opening and closing time. This markup differs slightly from the rest in that the entries are surrounded by <time> tags, not <span>:
<p>We are open on <time itemprop="openingHours" datetime="Mo, Tu, We, Th 9.00-17.00">Monday - Thursday 9.00am - 5.00pm</time>, <time itemprop="openingHours" datetime="Fr 9.00-17.00">Fridays 9.00am - 3.00pm</time> and <time itemprop="openingHours" datetime="Sa 9.00-13.00">Saturdays 9.00am - 1.00pm</time>
Finally close the LocalBusiness Div:
Save your changes and test your results at https://www.google.com/webmasters/tools/richsnippets.
You should see structured data similar to this image below.