Update on MODX Revolution 2.2 site build: schema.org implementations.
In case you didn't know, this is part of a series of articles on a site I'm building with the new MODX Revolution version 2.2:
The impetus to rebuid this site wasn't a redesign, but a directive from the SEO guys that we implement schema.org microdata and a new site structure. This is just like templating any other site, but there's a few MODX goodies to look at. Here's the first few lines of the head element:
<!DOCTYPE html> <html itemscope itemtype="http://schema.org/GeneralContractor"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta itemprop="name" content="[[++site_name]]"> <title>[[*longtitle:isempty=`[[*pagetitle]]`]] | [[++site_name]]</title> <meta itemprop="description" content="[[*description:isempty=`A Renovation Contractor in Vancouver, BC that specializes in home renovations, custom kitchens, cabinets, bathrooms, and decks, as well as handyman services.`]]"> <meta name="description" content="[[*description:isempty=`A Renovation Contractor in Vancouver, BC that specializes in home renovations, custom kitchens, cabinets, bathrooms, and decks, as well as handyman services.`]]" /> <meta itemprop="url" content="[[!++site_url]]" /> <base href="[[!++site_url]]" /> <link rel="canonical" href="[[*id:is=`1`:then=`[[!++site_url]]`:else=`[[!++site_url]][[~[[*id]]]]`]]"/>
First, a short explanation of schema "components", if you will. "Itemscope" is an attribute declaring that anything within the element is about a particular "Item" - it's like saying "Enable schema-speak for this element". "Itemtype" declares the type of "Item" the element is about. "Itemprop" declares a property of that "Item" - the allowable properties for each schema is listed on the schema's Page. Ok if confused, don't worry. We're going to Break it down:
<!DOCTYPE html>» HTML5 Doctype Declaration. We're using HTML5 because according to schema.org's documentation, "Microdata is a set of tags, introduced with HTML5..." Plus, I just like using HTML5 :)
<html itemscope...>» This specifies that the html tag and everything in it (the whole document) is about the Itemtype that we're going to declare...
<...itemtype="http://schema.org/GeneralContractor">» In this case, the website belongs to a "General Contractor", which happens to be a specific schema under the "Local Business" branch. By linking to the schema's Page, you're specifying that the item is of the type described at that URL. Go to the schemas page for a full list.
- After a couple of self-explanatory tags, we have:
<meta itemprop="name" content="[[++site_name]]">» The "name" property is an allowed property of the item "General Contractor", and in this case we're using the MODX System Setting
[[++site_name]]to specify the Site Name as the "name" of the Item "General Contractor". See how this works? We are providing search engines with detailed information about the site's subject matter.
- We're still using standard html meta tags, like
<title>to describe the page. This is important, because schema.org microdata serves a different function than html tags. You need both, at least until that changes ;)
<meta itemprop="description"...>» This is used similarly to the "description" meta tag - I'm specifying both. The MODX Output Filter ":isempty" sets a default description in case nobody enters one into the appropriate Resource Field. I could've also used the Output Filter ":default" in a similar way.
<meta itemprop="url"...>» This just specifies the URL of the Item "General Contractor", which is the same as the MODX System Setting
<link rel="canonical"...>» This isn't schema related, but it's certainly good for SEO. Check out Google's info page on the subject. Notice we're using a MODX Output Filter again, so if it's the homepage, the site URL is output; if it's any other page, the full (permalink) URL of the page is used.
There's tons of other stuff you can do with schema, and I can't go into all of it here, but I do have one more usage example:
<div id="container" itemscope itemtype="[[*pageType]]"><!-- main wrapper -->
Break it down:
- An itemscope for the page's main wrapper allows us to specify what type of page it is within the site. I used a MODX Template Variable so the SEO guys would have access to change this in the MODX Manager UI. Available page types and page element types can be found at schema.org here about 1/4 way down the page just below the fold.
One more surprise that MODX has for us is the MODX Breadcrumbs Snippet. At some point (they snuck this in without me noticing for who-knows-how-long LOL) data-vocabulary.org microdata had been written into the default output template for Breadcrumbs!!! This just goes to show how ahead of the curve the folks at MODX really are. Here's an example of the default output:
<ul class="B_crumbBox"> <li class="B_firstCrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="B_homeCrumb" itemprop="url" rel="Home" href="http://domain.com/webpage.html"> <span itemprop="title">Home</span> </a> </li> </ul>
As you can see, this is formed very similarly to schema.org's microdata. Schema.org specifies "breadcrumb" as an "Itemprop" of the "Webpage". We've specified the page type in the container (parent) element, so by adding
<...itemprop="breadcrumb"...> we can make our breadcrumb output compliant with schema.org specs. I just wrapped it with a div:
<div id="breadcrumbs" itemprop="breadcrumb">
There you have it! Schema.org and MODX in a nutshell. I'll be reporting back with more about MODX Revolution 2.2 and my sample site build. Until then, Happy MODX-ing and Happy Holidays!!!
**UPDATE: Thanks to Mark Hamstra, who pointed out in the comments that the canonical tag does not need an Output Filter at all. The MODX Link Tag has a property "scheme" that can be set to value "full", forcing the full path to be output instead of just the relative path. Like this:
I didn't even know about this little MODX secret :P The only place I could find it in the Documentation is the tag syntax page. I love learning new stuff!!