Lead developer of First Page Solutions here, glad to show some information on Schema.org and what information we should be placing on websites. I’ll also say how and where to place the schema information.
Schema is quite organized and not very user friendly at the moment but, when you know how to use it. It’s a useful structured resource for letting bots and search engines know information that they are trying to look for.
Letting you know what I did to get the information for schema.org. You can actually skip this area if you’re not interested or if you already know Schema.org information structure.
- Knowing the client. First off, we’re working with our example of First Page Solutions, a SEO office. I’ll head over to http://schema.org/docs/full.html for the full list of schema items.
- First thing I looked for is to find “SEO” or “localbusiness”, scrolling through I see that there is no SEO, website design or anything of the sort and will have to reel back to “LocalBusiness”. If the type is very specific I would have to read more about it to see if it’s the right fit. (We’ve had a situation were we had a painter actually be a painting)
- Now we need to get the information out of that specific area. (location, opening hours, etc.)
- We can use: (We can use all of them but, we might not need to use them all)
- openingHours: Determines the time of which the place is operational
- address: The location of the building
- areaServed: The GEO location area of witch the location serves
- award: If the place has one or more awards we can implement this on a page
- email: The contact email for the building/organization
- employee: One or more employees (used for author pages and listing people who work there. i.e. Group photo)
- event: A specific event that involves legal services or this organization
- faxNumber: The fax number for the building/organization
- legalName: The business name instead of the display name
- location: Location of event or item
- logo: The associated logo for the organization
- telephone: The phone attached to the building/organization
- name: The name of the object that the website is portraying to. (For example: “First Page Solutions”)
- description: A basic description of the name/organization
- url: The url of the building/organization
The naming of the above is to let you know that this could be a subset or a company could contain this information for each of their “branches”.
- For starters, we would like to have the location, contact and hours of operation inside the footer. Hours can always be mixed with either of the two and we usually section off the footer into three blocks giving us a free space for a call to action or Google map of the location.
<div itemscope itemtype="http://schema.org/LocalBusiness"> <span itemscope itemtype="http://schema.org/PostalAddress" itemprop="address"> <div itemprop="streetAddress">1767 Harvey ave.</div> <div> <span itemprop="addressLocality">Kelowna</span>, <span itemprop="addressRegion">BC</span> </div> <div> <span itemprop="postalCode">V1Y 6G4</span> <span itemprop="addressCountry">Canada</span> </div> </span> </div>
- Hours of operation:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <time itemprop="openingHours" datetime="mo-fr 8:30-16:30"> Monday to Friday, 8:30 AM to 4:30 PM </time> </div>
<div itemscope itemtype="http://schema.org/LocalBusiness"> <div itemprop="name">First Page</div> <a href="tel:##########"><div itemprop="telephone">(###) ###-####</div></a> <div itemprop="faxNumber">(###) ###-####</div> <a href="mailto:firstname.lastname@example.org"><div itemprop="email">Admin@example.com</div></a> <a href="dev.firstpagesolutions.ca"><div itemprop="url">dev.firstpagesolutions.ca</div></a> </div> </div>
Most of the content is laid out and you can copy, paste and modify. You can also validate this information by going to https://developers.google.com/structured-data/testing-tool/ pasting your data or fetching the url of which the data can be found.
Sometimes a different approach is a little different from the bot who’s reading the information. When you use the “inspect” with Chrome, FireFox, Opera and Safari… They tend to be a little strange but, the bot who’s reading the information is not a browser. This information is not for human eyes, nor is it for inspecting and reading aloud. To understand what the bot is reading, just give your website a right-click->view page source (bots don’t understand right-click->inspect element).
You can also use any type of tag for your itemprop, itemtype and itemscope. Don’t just stick with <div> and <span>.
A nice thing about the schema is that you can put anything else anywhere else and it won’t pick it up! For example:
<div itemscope itemtype="http://schema.org/Organization"> <img src="" /> </div>
The image has no effect on the itemtype. If I surrounded the <img alt=”” /> with a <span itemprop=”logo”>, then it would state the image as the logo for the organization.