Page Structure

It is a good idea to structure any document properly, whether it is a web page or not. The typical way to structure documents is by using headings.

Headings come in levels, thereby giving you the ability to structure documents. A “heading 1″ is the most important heading, followed by “heading 2″, “heading 3″, etc. Also, a heading 2 is a sub-section of heading 1, and heading 3 is a sub-section of heading 2, etc.

Such page structuring allows the reader to scan over all the headings and get a quick overview of what the document (or web page) contains.

The H1 Tag

The H1 HTML heading tag, <h1></h1>, is the tag we are most concerned with on any webpage when it comes to visible text on the page. The text inside this tag is supposed to tell us what the topic of the page is.Within the page structure described earlier, this is most important visible text on the web page.

Typically, there should be one H1 tag on a web page, it should be near the top of the page. It should contain text that not only entices the reader into reading the page content, but also contain text, typically carefully-selected keywords, that help the search engines figure out what the topic of the page content is.

How WordPress Themes Often Use H1

Many WordPress themes put the website’s name in a H1 tag and the site description in a H2 tag. (The page title is then usually put in a H2 tag as well.)

To human visitors it doesn’t matter much, but this arrangement tells the search engines that the website’s name is the most important text on every page. Yes, the website’s name is important for brand recognition, but surely it can’t be the most important bit of text on every page on the website.

Should the headline that tells the reader what the topic of the page is, not be considered more important? I think so.

A Smarter Way To Use H1

A smarter way to ensure that the search engines’ attention is put in the right place, is to generally use the H1 tag for the page’s title or headline.

There is one exception… the home page. One the home page, put the website description in a H1 tag (it does afterall describe what the entire website is all about), and put the home page’s heading in a H2 tag.

What about the website’s name? Don’t put it in a heading tag. Simply put it in DIV tags and apply CSS formatting to make the site’s name stand out visually on the page.

How To Implement This Smarter Way Of Using H1

Here’s how to implement this:

Your site name and description is typically located in the header.php file of your theme. Open that file in a text editor or your favorite php editor. Find the lines of code where your site name and description is specified. The site name code is usually <?php bloginfo(‘name’); ?>, surround by an A tag and probably also by a H1 tag. Your site description code is usually <?php bloginfo(‘description’); ?>, surrounded by a DIV tag or possibly a H2 tag. Then do the following:

1. If your site name is surrounded by H1, change it to DIV, or <h1></h1> to <div></div>. You may also have to add a new CSS class to your theme’s style.css file and assign the class to the DIV tag. This new CSS class should contain the formatting needed to retain original formatting for your site name.
2. Replace your original site description code with a conditional statement that checks if the current page is your home page or not, and then places your site description either inside a H1 tag (if it is the home page) or a DIV tag (if it is not the home page). Here is an example:

<?php if ( is_home() || is_front_page() ) { ?> 

<h1 class="sitedesc"><?php bloginfo('description'); ?></h1>

<?php } else { ?> 

<div class="sitedesc"><?php bloginfo('description'); ?></div> 

<?php } ?>

That covers your site description. The next step is to make sure that your page title or headline is displayed within the correct tags. Here you have to edit two of your theme’s files, page.php and single.php.

Open the first file and look for <?php the_title(); ?>, more than like surrounded by an H2 tag. Replace that code with a conditional statement that also checks if the current page is the home page and then either put the page title inside a H2 tag (if it is the home page) or a H1 tag (if it is not the home page). Here is an example:

<?php if ( is_home() || is_front_page() ) { ?> 

<h2 class="pagetitle"><?php the_title(); ?></h2> 

<?php } else { ?> 

<h1 class="pagetitle"><?php the_title(); ?></h1> 

<?php } ?>

Repeat this step for the other php file as well.

Add a CSS class to your theme’s style.css file that applies the same formatting to the H1 and H2 tags so that there is no visual difference when either tag is used.

And there you have it… your WordPress theme will now use heading tags on your website that will do a much better job for your site in the search engines.

After running Make-A-Website-With-Traffic.com on a different platform for all of its existence, I decided to switch it over to run on WordPress instead. Here’s why I did it, and what it took to get the job done…

It’s not that I was unhappy with the previous platform. In fact, I’m still running one of my other websites, Fun-Things-Texas.com, on Site Build It. Because this site is more a “labor of love” than anything else, I decided to find a way to cut down on hosting expenses.

My choice of using WordPress as the new platform also gave me the chance to experiment with WordPress and learn how to use it as a CMS, i.e. use it not only as blog (its traditional use), but also to recreate a traditional website.

Why WordPress?

I had previous experience with WordPress because I used it to set up a self-hosted blog. So I knew it was easy to install and set up.

The other attraction was all the “extras” that are freely available for WordPress thanks to so many people out there who develop these “extras” for the pleasure that it brings them.

WordPress Themes

There are a boat-load of very nice-looking WordPress themes available that will satify a wide variety of  website “look & feel” needs. The themes are all easy to install and extend, and when you want to change themes for a new “look & feel“, it is easy to do too.

WordPress Plugins

WordPress plugins are used to extend the basic WordPress template to add all the extra functionality you need. Here you also have lots to choose from, and the plugins are mostly installable by the simple click of a button. Occasionally a plugin will require that you make some manual changes to one of your WordPress source pages, but there is usually clear instructions on what to do.

As you can see here, I was able to recreate the previous version of the website in WordPress (see the Menu on the right), and gain a blog in the process. The fact that my visitors can comment on most of the content on the website, is a big bonus to me. I think that the conversations that develop in this way add value to the original post, and everybody gains from that.

Coming soon… In the future I plan to write an article outling all the steps that I had to take to recreate my website in WordPress to use WordPress like a CMS.