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:
[[*longtitle:isempty=`[[*pagetitle]]`]] | [[++site_name]]
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:
» 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 :)
» 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:
» 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
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 ;)
» 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.
» This just specifies the URL of the Item “General Contractor”, which is the same as the MODX System Setting
» 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:
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:
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: