Lots of Widgets Means Lots of H1 Tags

Orchard CMS has done a great job making most everything extensible, but the one area that you don't seem to get much wiggle room is the HTML tagging inside wrappers. I was faced with a client who was concerned with the overuse of the <H1> tag when placing several widgets all over the layout of the page for SEO reasons. They wanted to make it clear to search bots that widget titles are less important than the main article title, and make them <H2> tags accordingly. This is especially important when you have many widgets on a page.

Creating alternate views is a well documented subject and something easily accomplished using the shape tracing tool. However the title of the widget is specified inside the wrapper code, not the template code, so you can’t do it that way. One easy solution would be to alter the widget wrapper code in its module, but that is not ideal. Our policy is to not alter the Orchard source code (including core modules) so we can continue updates in the future unimpeded.

So what can be done? Never fear, there is actually a simple solution to this problem that allows you to leave the Orchard source code alone, and that solution is custom wrappers. The only drawback to this approach is that you can have only one wrapper active at a time per theme.

To create a custom wrapper, all you have you have to do is create a .cshtml file with the same name as the wrapper you desire to customize and drop it in the "Views" folder of your site’s theme. In my case, I simply copied Widget.Wrapper.cshtml from the widget module’s “Views” folder into my theme’s “Views” folder and then made the minor change of updating <H1> to <H2> in the markup.

Custom wrappers are just another way Orchard CMS gives you ultimate control of your rendered markup. They have the limitation that they are global, unlike templates which have many naming conventions to allow for more flexibility. If you have a case in which uniform markup in the wrappers is not desired, you can use this same technique to create a wrapper that doesn’t add any markup.


No Comments