This is not really a CSS Quick Tip, but a useful piece of information that I had to share with you. Our resellers always surprise me with the thought and care that goes into the long term maintenance of their beautiful sites, and our partner
Rees Communications is always pushing the boundaries of what SiteCM can do. This morning I got an email about adding what is called a "schema" to the beautiful SiteCM site:
Insight Eye Care.
What the heck is a schema?
Here is the short-and-sweet definition I have come to understand:
"Schemas are HTML attributes that "webmasters" can add to their website's markup that allow search engines to recognize and understand your markup in context."
As you already know, there is a bit of an art to structuring your content on a page when using heading tags, paragraphs, etc etc etc, but what is missing even with the most carefully crafted page is some data that allows Search Engines to understand your content in its context and how to intelligently return that in its search results. When it comes to explaining how schemas work, the website schema.org says it best already:
"Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1>
tells the browser to display the text string 'Avatar' in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.
Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, "Hey search engine, this information describes this specific movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this."
We are essentially trying to make a fancy computer generated mathematical equation understand information the same way we do when obviously it doesn't have the same understanding of languages or ability to understand inflection and different meanings of the same work. So we need to supply this information to say "Hey search engines, this information describes ...".
So how does it work?
Let's take the example from insight-eyecares website. The site owner wanted to put a SEO beefed up version of their street address in the footer that would read this on the front end, with each peice of information on its own line:
239 Weber St. N
Waterloo, ON
N2J 3H5
Phone: (519) 885-2020
On any average implementation we might just enter that text in the editor which would look like the following in HTML view:
<p>239 Weber St. N<br /> Waterloo, ON<br /> N2J 3H5<br /> Phone: (519) 885-2020</p>
However, this is incorrect because technically this is not a paragraph of text but a small piece of information, more specifically a street address. So the more correct (which is always debatable in the world of SEO) way to mark this up would be to separate each specific piece of information that we can give schema attributes to.
<span>239 Weber St. N</span>
<span>Waterloo</span>, <span>ON</span>
<span>N2J 3H5</span>
Phone: <span>(519) 885-2020</span>
If you are wondering why there are so many spans wrapped around what seems like non important pieces of this address, it will make sense in a minute. Remember that every single line of text even when separated by a comma has a different meaning than the value preceding it. Waterloo is a city and ON stands for Ontario being a province. While you may think these things go together in the same span remember that a computer is less likely to identify ON as Ontario without context. This will make more sense in the next steps.
Different types of schemas
Now we are going to define for the search engine what kind of information we are displaying in the markup, which is called an
itemtype
in schema language. There are a list of already predefined item types at
www.schema.org/docs/full.htm that cover pretty much every type of thing in the world you would ever need to define.
As this piece of text defines a location of a local business, we are going to specify this. With schema, you would define what the itemscope, which tells the search engine that an item is being discussed. But "thing" is quite ambiguous, which is what we are trying to avoid, so now we need to define specifically what kind of thing we are discussing. To do this we give a link location to the schema type that tells the Search Engine what the type is. But first, we need to add a new tag that will define where this items information starts and ends, so let's add a wrapping division (div) around the text to give it the required attributes.
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span>239 Weber St. N</span><br />
<span>Waterloo</span>, <span>ON</span><br />
<span>N2J 3H5</span>
Phone: <span>(519) 885-2020</span>
</div>
We are getting closer. Now the search engine knows that the following text in this division is a
local business address. What it doesn't know is what the rest of the following information means. So using the attributes given to us by schema we can define the:
- Street address
- City or locality
- Province/Territory/State/Region
- Postal Code
- Phone Number
each of the above has an equivalent value that will go in the attribute
itemprop
which will further help the Search Engines to understand every bit of text. The finished product looks like this:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="streetAddress">239 Weber St. N</span><br />
<span itemprop="addressRegion">Waterloo</span>,
<span itemprop="addressRegion">ON</span><br />
<span itemprop="postalCode">N2J 3H5</span>
Phone: <span itemprop="telephone">(519) 885-2020</span>
</div>
An important thing to remember is that schemas were introduced as part of the HTML5 spec, so while they will work and be readable, they will not validate unless you are using a HTML5 !DOCTYPE in your files (which is coming to SiteCM soon!!!).
If you want a further look at Schemas and how you can help your clients boost their SEO rankings during your implementation, or as a long term project to maintain your existing sites,
visit the schema website. They have an awesome getting started page that does a similar tutorial, and a huge directory of all the schema attributes you can use.
If you already use schemas in your SiteCM site, or if you have questions about how you can effectively implement schemas into your SiteCM website, we would love to hear from you.
Happy coding!