MODX Revolution 2.2 and schema.org

Dec 23, 2011

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:

  1. First Impressions
  2. Dashboard Widgets

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=[[++modx_charset]]">
            <meta itemprop="name" content="[[++site_name]]">

            <title>[[*longtitle:isempty=`[[*pagetitle]]`]] | [[++site_name]]</title>
            <meta itemprop="description" name="description" content="[[*description:default=`A Renovation Contractor in Vancouver, BC that specializes in home renovations, custom kitchens, cabinets, bathrooms, and decks, as well as handyman services.`]]">
            <base itemprop="url" href="[[!++site_url]]">
            <link rel="canonical" href="[[*id:is=`1`:then=`[[!++site_url]]`:else=`[[!++site_url]][[~[[*id]]]]`]]">
        </head>

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:

  1. 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 :) [UPDATE 10/08/2015] since this post was written, it's become pretty commonplace to use HTML5. Kindly excuse some of the dated expressions.
  2. The attributes in the html tag indicates that the whole document is about the Itemtype that we've declared.
  3. 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.
  4. After the opening head and content-type 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.
  5. 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 ;)
  6. <meta itemprop="description" ... > » This is used the same way as the "description" meta tag - we've got both attributes on this element so it does double-duty. The MODX Output Filter ":default" sets a default description in case nobody enters one into the appropriate Resource Field. I could've also used the Output Filter ":isempty" in a similar way.
  7. <base itemprop="url" ... > » This just specifies the URL of the Item "General Contractor", which is the same as the MODX System Setting [[++site_url]]
  8. <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]]">

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. [UPDATE 10/08/2015] Remember this was written in 2011 before I worked at MODX LOL. Was not self-aggrandizing ;) 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:

[[~[[*id]]? &scheme=`full`]]

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!! [UPDATE 10/08/2015] Don't you also love looking at old stuff and realizing how much you've learnt? Oh, and thanks to @Engelbert for pointing it out that this post was broken.

modmore premium extras