Terry Cox - SEM, SEO
Tuesday, August 20, 2019                 Register

Terry's Blog
Jun 8

Written by: Terry Cox
6/8/2008 1:12 PM 

Recognizing in advance that this post has a pretty niche audience, this is one of those annoying things that took some playing around with to make work right.

With most purchased DotNetNuke skins, there isn't an easy way to take a container and make an H1 tag out of the title. This is something that I wish the skin developers would include by default. Here is how I have done it so that search engines can see the emphasized text.

First, pick one of your existing containers that you want to have an H1 heading version of, and download the ASCX and CSS files from your /Portal/_default/Containers directory onto your local computer. I usually just keep the name the same, with the exception of adding _header onto the end of the file name.

Open up container_header.ascx. Typically the title token for a container looks a little like this:
dnn:TITLE runat="server" id="dnnTITLE" Cssclass="ContainTitleCSS"

I will wrap this with an H1 tag:
H1 dnn:TITLE runat="server" id="dnnTITLE" Cssclass="ContainTitleCSS" /H1

By default, there probably isn't an H1 definition in your containers CSS file. So open up your new container_header.css, double check that this is the case, and then define a new one. Here is a sample of one of my sites:

H1 { font-size: 11px; font-family: tahoma; color: #555555; font-weight: bold; margin: 0; padding: 0; line-height: 1.5em; }

Really make sure that you pay attention to the Margin, Padding and Line-Height elements. Those were the parts I had some issues with originally.

Finally, save your two new files, and upload them back to your web server in the correct containers directory. Now you can just apply the container to any module where you would like the text to be emphasized to search spiders. If it looks any different to the regular eye then one of your normal modules, some tweaking may be needed.

You can check to see if this worked by using Firefox and the Web Developer plug-in. Browse to the page where you have added your header module. Using the plug-in, disable CSS and Images. The header module title should look big and bold.

Here is a working sample on one of my test sites: Brad Pitt and Angelina Jolie


1 comment(s) so far...

Re: Adding H1 Tags to DotNetNuke Containers

Thanks for this blog entry. SEO and DNN seems to be a tricky task. This article has helped us very much.

By Mike Craig on   1/31/2010 1:33 AM

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Add Comment   Cancel 
Browse by Date
Subscribe to Blog
Search Posts
Copyright 2007 by Port of Dreams Web Development
beats casque pandora beats kopfhorer beat by dre monster beats beats headphones cheap mont blanc pens