MODX Revolution 2.2 and

Update on MODX Revolution 2.2 site build: 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 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’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=""> » 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 </code> to describe the page. This is important, because microdata serves a different function than html tags. You need both, at least until that changes ;)</li> <li><code class="inline"><meta itemprop="description"...></code> » 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.</li> <li><code class="inline"><meta itemprop="url"...></code> » This just specifies the URL of the Item “General Contractor”, which is the same as the MODX System Setting <code class="inline">[[++site_url]]</code></li> <li><code class="inline"><link rel="canonical"...></code> » This isn’t schema related, but it’s certainly good for SEO. Check out Google’s <a href="" title="Canonical Links">info page</a> 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.</li> </ul> <p>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: <pre><code> <div id="container" itemscope itemtype="[[*pageType]]"><!-- main wrapper --> </code></pre> <p><strong>Break it down:</strong></p> <ul> <li>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 <a href="" title="list of schema">here</a> about 1/4 way down the page just below the fold.</li> </ul> <p>One more surprise that MODX has for us is the <a href="" title="MODX Breadcrumbs">MODX Breadcrumbs Snippet</a>. At some point (they snuck this in without me noticing for who-knows-how-long LOL) 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: <pre><code> <ul class="B_crumbBox"> <li class="B_firstCrumb" itemscope="itemscope" itemtype=""> <a class="B_homeCrumb" itemprop="url" rel="Home" href=""> <span itemprop="title">Home</span> </a> </li> </ul> </code></pre> <p>As you can see, this is formed very similarly to’s microdata. specifies “breadcrumb” as an “Itemprop” of the “Webpage”. We’ve specified the page type in the container (parent) element, so by adding <code class="inline"><...itemprop="breadcrumb"...></code> we can make our breadcrumb output compliant with specs. I just wrapped it with a div:</p> <pre><code> <div id="breadcrumbs" itemprop="breadcrumb"> </code></pre> <p>There you have it! 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!!!</p> <p><strong>**UPDATE:</strong> 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:</p> <pre><code>[[~[[*id]]? &scheme=`full`]]</code></pre> <p>I didn’t even know about this little MODX secret :P The only place I could find it in the Documentation is the <a href="" title="MODX Tag Syntax">tag syntax page</a>. I love learning new stuff!!</p> <footer class="entry-meta"> This entry was tagged: <a href="blog/modx-web/tags/cms/" rel="tags">CMS</a>, <a href="blog/modx-web/tags/modx/" rel="tags">MODX</a>, <a href="blog/modx-web/tags/modx-revolution-2.2/" rel="tags">MODX Revolution 2.2</a>, <a href="blog/modx-web/tags/" rel="tags"></a>, <a href="blog/modx-web/tags/seo/" rel="tags">SEO</a>, <a href="blog/modx-web/tags/web-development/" rel="tags">web development</a>. Bookmark the <a href="blog/modx-web/" rel="bookmark">permalink</a>. </footer><!-- .entry-meta --> <div id="disqus_thread"></div> <div id="jp-post-flair" class="sharedaddy"> <div id="jp-relatedposts" class="jp-relatedposts" style="display: block;"> <h3 class="jp-relatedposts-headline"><em>Related</em></h3> <div class="jp-relatedposts-items jp-relatedposts-items-minimal"> <p class="jp-relatedposts-post jp-relatedposts-post0" data-post-id="89" data-post-format="false"> <span class="jp-relatedposts-post-title"><a class="jp-relatedposts-post-a" href="blog/modx-web/modx-revolution-2.2-and-articles-blog-engine/" title="MODX Revolution 2.2 and Articles Blog Engine">MODX Revolution 2.2 and Articles Blog Engine</a></span> Update on MODX Revolution 2.2 site build: Articles… <span class="jp-relatedposts-post-context">In <a href="blog/modx-web/tags/articles/" rel="tags">Articles</a>, <a href="blog/modx-web/tags/blog-engine/" rel="tags">Blog Engine</a>, <a href="blog/modx-web/tags/blogging-software/" rel="tags">Blogging Software</a></span> </p> <p class="jp-relatedposts-post jp-relatedposts-post0" data-post-id="84" data-post-format="false"> <span class="jp-relatedposts-post-title"><a class="jp-relatedposts-post-a" href="blog/modx-web/modx-revolution-2.2-dashboard-widgets/" title="MODX Revolution 2.2 - Dashboard Widgets">MODX Revolution 2.2 - Dashboard Widgets</a></span> Update on MODX Revolution 2.2 site build: installed… <span class="jp-relatedposts-post-context">In <a href="blog/modx-web/tags/cms/" rel="tags">CMS</a>, <a href="blog/modx-web/tags/dashboard/" rel="tags">Dashboard</a>, <a href="blog/modx-web/tags/modx/" rel="tags">MODX</a></span> </p> <p class="jp-relatedposts-post jp-relatedposts-post0" data-post-id="83" data-post-format="false"> <span class="jp-relatedposts-post-title"><a class="jp-relatedposts-post-a" href="blog/modx-web/modx-revolution-2.2-sneak-peek/" title="MODX Revolution 2.2 - OMG OMG OMG!!!">MODX Revolution 2.2 - OMG OMG OMG!!!</a></span> This is bad. Really bad. I just installed MODX Revolution… <span class="jp-relatedposts-post-context">In <a href="blog/modx-web/tags/cms/" rel="tags">CMS</a>, <a href="blog/modx-web/tags/modx/" rel="tags">MODX</a>, <a href="blog/modx-web/tags/modx-revolution-2.2/" rel="tags">MODX Revolution 2.2</a></span> </p> </div> </div> </div> </div><!-- .entry-content --> <!-- call disqus --> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'sepiarivermarketing', disqus_identifier = 'postID-SRM86', disqus_title = 'MODX Revolution 2.2 and', disqus_url = ''; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + ''; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> </article><!-- postID-SRM86 --> <nav role="navigation" id="nav-below" class="site-navigation post-navigation"> <h1 class="assistive-text">Post navigation</h1> </nav><!-- #nav-below --> </div><!-- #content .site-content --> </div><!-- #primary .content-area --> </div><!-- #main .site-main --> <div id="secondary" class="widget-area" role="complementary"> <aside id="widget_contact_info-2" class="widget widget_contact_info"> <h1 class="widget-title">Get Connected</h1> <a class="left" href="links/sepia-river-on-twitter" title="Sepia River on Twitter" target="_blank"><i class="fa fa-2x fa-twitter"></i></a> <a class="left" href="links/sepia-river-facebook-page" title="Sepia River Facebook Page" target="_blank"><i class="fa fa-2x fa-facebook"></i></a> <a class="left" href="links/sepia-river-on-linkedin" title="Sepia River on LinkedIn" target="_blank"><i class="fa fa-2x fa-linkedin"></i></a> <a class="left" href="" rel="publisher" target="_blank" title="Google Plus Profile"><i class="fa fa-2x fa-google-plus"></i></a> <a class="left" href="" target="_blank" title="Markup to MODX in 60 Minutes"><i class="fa fa-2x fa-vimeo-square"></i></a> <a class="left" href="feed.rss" title="Sepia River RSS Feed" target="_blank"><i class="fa fa-2x fa-rss"></i></a> <a href="pages/modmore/" title="more for modx"> <div class="mmbg"> <div class="row"> <h3>mod<strong>more</strong></h3> </div> <div class="row"> <h6 style="color:white;">Premium MODX Extras</h6> </div> </div> </a> </aside> </div><!-- #secondary .widget-area --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <a href="">Download MODX for free</a>. <span class="sep"> | </span> <a href="" title="Vancouver Architectural Photographer">Photography</a> by <a href="" rel="developer">Sepia River</a>. <span class="sep"> | </span> <a href="terms-of-use" title="Terms of Use and Disclosure">Terms and Disclosure</a>. </div><!-- .site-info --> </footer><!-- #colophon .site-footer --> </div><!-- #page .hfeed .site --> </div><!-- #wrapper --> <!-- jQuery --> <script src="//"></script> <script>window.jQuery || document.write('<script src="assets/components/confit/js/jquery-2.1.1.min.js">\x3C/script>')</script> <!-- MD Highlight --> <script src="assets/components/markdowneditor/js/highlight.pack.js"></script> <!-- Section Scripts --> <script src="assets/components/confit/js/imagelightbox.js"></script> <!-- Mobile Menu Toggle --> <script> $(window).on('hashchange', function() { var loc = window.location.pathname; if (window.location.hash === '#masthead') { $('#mobile-toggle').attr('href', loc + '#_'); } else { $('#mobile-toggle').attr('href', loc + '#masthead'); } }); </script> <!-- GA --> <script type="text/javascript"> var _gaq = _gaq || []; var pluginUrl = '//'; _gaq.push(['_require', 'inpage_linkid', pluginUrl]); _gaq.push(['_setAccount', 'UA-26803432-1']); _gaq.push(['_setDomainName', '']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script> (function(w, d){ var id='embedly-platform', n = 'script'; if (!d.getElementById(id)){ w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);}; var e = d.createElement(n); = id; e.async=1; e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://'; var s = d.getElementsByTagName(n)[0]; s.parentNode.insertBefore(e, s); } })(window, document); </script> </body> </html>