Beast-Blog.com
Optimizing WordPress for Search Engines

I’ve written about the natural marriage between WordPress and Search Engines and what to do to enhance it before, but I wanted to offer something a bit more definitive and specific this time around. I think I have finally tweaked my practices to the point I don’t think they can really be improved upon. I think so, anyway. I will provide copy-and-paste scriptlets in order of importance — especially useful to WordPress theme developers. But before I do, there are some things you need to know if you don’t already.

Using the Proper Mark-up

What I will offer will not perform as well as intended if you don’t start with and keep your WordPress site or blog properly constructed. You must use the proper elements for the purposes for which they are intended. Headings must be headings, paragraphs must be paragraphs, lists must be lists, etc. The theme shouldn’t be constructed with tables for layout. Images that convey index-worthy content must be properly backed up with real text or the alt attribute. The installation must be built with accessibility in mind and the plugins you choose can’t be allowed get in the way of that.

Content is King but Call Him by Name

In addition to all this, you want to write good content on a regular basis, and use headings that have stand-alone contextual value. Being creative and clever with headings in your print efforts is all fine and good, but on the web where a post heading has the value of an important street sign, it’s best if it provides the right information. For example, someone once asked me why I decided to call my contact form script the very wordy “Secure and Accessible PHP Contact Form.” I did this because I wanted it to be found I told them. I could have called it the “Spam Basher” but on the web that’d be more witty than wise.

Four Useful Scriptlets for WordPress

Now it’s meat and potatoes times. I will offer four scriptlets that should be integrated into a WordPress theme to help see that all of the other efforts pay off.

The Title Element Scriptlet

First up, and of the most importance, is the title element. If you’re not in the know, this is what shows on your browser’s title bar. This is what Google uses for indexing before anything else. It’s therefore imperative it’s used wisely. This is a required document element on any web page so you need to have it, and for your benefit you need to use it wisely. Using it for your site/blog name isn’t of much value. Nor is it wise to leave it empty — I saw this on a Flash site recently — or call it “Untitled Document” as I’ve also seen before.

What I suggest in most instances is to use this element to house the site name and page title. With WordPress I suggest the title element be used to house the blog/site name and blog/site description on the main page — and that the description be carefully thought out (more so than what I use it for on my blog). I also suggest that the page title on pages other than the main page come first as this produces a better result of a Google search page since only so much information is shown (as suggested by Adam Hewgill in this post comment in response to a prior post on this subject). Here’s what I am offering:

 <!--Copy and paste this one line in lieu of your header’s title element (header.php)-->
  <title><?php if(is_single()) { ?> <?php } ?> <?php wp_title($sep=''); ?> <?php if(is_404()) { ?>404 Error! Page Not Found <?php } ?> <?php if(is_search()) { ?>Search Results for: <?php echo wp_specialchars($s, 1); ?> <?php } ?> <?php if(!is_home()) { ?>- <?php } ?><?php bloginfo('name'); ?> <?php if(is_home()) { ?> - <?php bloginfo('description'); ?> - Blog Home<?php } ?></title>

This is in use on my blog and, as you can see, the title element for this page is shown as: Optimizing WordPress for Search Engines - Beast-Blog.com. To make it better in terms of accessibility and mark-up semantics I should probably change the » to a hyphen, but I don’t think it makes that much difference (Update: I changed the » to a hypen, thanks to Adam for his comment, and Megan for the insight.)

The h1 Heading Scriptlet

Next up, in order of importance, is the h1 heading element. This, for those who don’t know, is the page’s main heading. Before I show you my scriptlet I must tell you there is a lot of controversy regarding the proper use of this element. I will give you my thoughts and you can decide from there. I subscribe to the following practices.

• I will only use the h1 heading element once per page. Some developers will use it repeatedly on any given page but I think that’s wrong. I feel it takes away from the importance element’s importance, in an abusive sort of way. It’s like the title of a book in that it should only have one title.
• In light of my rule above, and for the purposes of providing information I will give this element a dual role. I use for the name of the site and for the page title.
  Since I feel it is proper to show the name of the site first and foremost (not for search engines but for users), I will place this part first, then semantically de-emphasize the page title with the use of the small element. I have used a span element before to style it, but I think the use of small is better.
• On a WordPress site/blog I suggest offering the “name” followed by the “description” on the main page, then offering the “name” and page title on all other pages, even on the search results, 404, and archive pages.

To make this happen, I offer the following scriptlet:

 <!--Copy and paste these lines in lieu of your header’s h1 element (header.php)-->
  <?php if(is_home() && !is_paged()) { ?>
   <h1><?php  bloginfo('name'); ?>
    <small><br /><?php bloginfo('description'); ?></small></h1>
  <?php } else if(is_paged()){ ?>
   <h1><a href="<?php echo get_settings('home'); ?>" title="Click for Blog Home"><?php bloginfo('name'); ?></a>
    <small><br /><?php bloginfo('description'); ?></small>
   </h1>
  <?php } else { ?>
   <h1><a href="<?php echo get_settings('home'); ?>" title="Click for Blog Home"><?php bloginfo('name'); ?></a>
    <small><br /><?php if(is_single()) { ?> <?php } ?> <?php wp_title($sep=''); ?> <?php if(is_404()) { ?>404 Error: Page Not Found <?php } ?> <?php if(is_search()) { ?>Search Results for: <?php echo wp_specialchars($s, 1); ?><?php } ?></small></h1>
  <?php } ?>

Note: On my blog, if you view the source, you’ll notice I add an empty span element before the blog name to the code above. The reason for this has to do with the image replacement technique I use so I can offer a graphical masthead yet retain proper accessibility to the underlying text heading (which is also beneficial to search engine optimization [SEO]). To verify the effectiveness of this, turn off images if you have the ability to do so and you’ll see the text shown on the masthead image — at least on the main page. You’ll also notice by my source and by reviewing the scriptlet that I don’t make the main page h1 heading a link, but it is a link (back to the main page) on all internal pages.

The Meta “Description” Scriptlet

Like the rest of this, I’ve written about this before in a post called WordPress Titles & Descriptions for SEO. But, thanks to a really helpful comment by my friend and Team Access colleague Joe Dolson, I have revised my practice. Joe’s comment was cut off thanks to the comment security features, and you may see I went about bringing his suggestion to fruition differently than what he offered, but I must say he really opened my eyes to a very useful feature I didn’t previously understand.

First here’s the scriptlet, I will then offer some details about how it works and what you need to do as the content provider.

 <!--Copy and paste these lines in lieu of your header’s meta description (header.php)-->
  <?php  if( ((get_post_meta($post->ID, description, true) != "") && (is_single())) || ((get_post_meta($post->ID, description, true) != "") && (is_page())) ) { ?>
   <meta name="description" content="<?php echo get_post_meta($post->ID, description, true); ?>" />
  <?php } else { ?>
   <meta name="description" content="Your default blog or site meta description" />
  <?php } ?>

To derive benefit from this scriptlet, you must create a custom field when creating posts or pages. This is done as follows:

1. Create (or Edit) a Page or Post — this works on either.
2. Before (or afterwards if going back to do this to older posts or pages) scroll down to the “Custom Fields” section.
3. If doing this for the first time, write the word “description” in the Key input. You must use the word as written. (Not the first time?)
4. Then, in the small textarea to the right of that input, enter a short description of the content in that post or on that page. (Be sure not to enter quote marks as this would cause problems).
5. Click the “Add Custom Field” button.
6. Publish or Save your post.

The scriptlet is longer than it has to be, but I do it this way so your “default meta description” will be used on your main page, search pages, archive pages, etc. Also — and this is my situation — to ensure a meta description is offered if retrofitting an existing blog with this scriptlet where a custom “description” field may not exist on all posts or pages.

This is really helpful for anyone bookmarking your article on a social bookmarking site like Ma·gnolia where the description is being used to describe the bookmarked item. Case in point, if you were to bookmark this article, the meta description I’ve specified reads as “Learn how to make the most of WordPress search engine optimization (SEO) through good practices, a little effort, proper coding, and four scriptlets.” Normally, such as on my blog’s main page, I offer this as my default meta description: “Beast-Blog.com: Mike Cherim's Web Log about accessibility, standards, web design, web development, usability, universality, SEO, best practices, XHTML, HTML, CSS, PHP, JavaScript, WordPress, imagery and graphics, writing, blogging, and more”

The Meta “Keywords” Scriptlet

Unlike the The Meta “Description” Scriptlet detailed above, this one probably has very little practical use. Due to meta keyword abuse in years past, most search engines ignore meta keywords. I don’t offer that as a blanket statement, though, and I choose not to rule them out entirely. Thus, this scriptlet may have some value.

First here’s the scriptlet, I will then offer some details about how it works and what you need to do as the content provider.

 <!--Copy and paste these lines in lieu of your header’s meta keywords (header.php)-->
  <?php  if( ((get_post_meta($post->ID, keywords, true) != "") && (is_single())) || ((get_post_meta($post->ID, keywords, true) != "") && (is_page())) ) { ?>
   <meta name="keywords" content="<?php echo get_post_meta($post->ID, keywords, true); ?>" />
  <?php } else { ?>
   <meta name="keywords" content="Your, default, blog, or, site, meta, keywords" />
  <?php } ?>

To derive benefit from this scriptlet, you must create a custom field when creating posts or pages as I described above for the meta description. In this case, though, you will write the word “keywords,” as written, in the Key input and enter comma-separated keywords pertinent to the content in that post or on that page in the small textarea to the right of that input

As I mentioned, this scriptlet probably isn’t that helpful or useful, but if keywords are used or referred to, then you’ll be able to provide better ones. Case in point, for this post I offer the following custom keywords: “wordpress, seo, search, search engine, indexing, optimization, title, headings, description, keywords, meta, coding, php, scriptlets, wording.” Normally, such as on my blog’s main page, I offer these as my default meta keywords: “web log, blog, web design, web development, graphics, imagery, css, xhtml, html, php, javascript, standards, accessibility, universality, usability, seo, greenbeast, green-beast, mike cherim”

Note: After you do this once, the how-to changes slightly. Instead of writing in the word “description” or “keywords” in the Key input, simply use the pull-down (select) to the left of that input. The words will appear in that menu making this small task even easier.

In Summary

As I mentioned when I started this post, these are solid, ethical practices to help your blog or site be properly and effectively indexed, but they are not the end-all, be-all. You need to write good content, use telling headings, maintain accessibility, and ensure you’re using the right mark-up for the right reasons. Couple these scriptlets with the solid practices mentioned, though, and the next thing you know you won’t need to hire an SEO expert to make you number one. Is this all? No. There are other things you can do to achieve greater benefits. Some will mention that permalink structures are beneficial. I’m not sure about this myself, but then again I can’t say it’d be in any way detrimental so go for it. Also, speaking of links, Anthony Brewitt offers some interesting insights pertaining to Hyperlinks and SEO.

You won’t need plugins to make this stuff happen, assuming you’re okay with copying and pasting a little code (all of these scriptlets are plug-n-play ready). If you’re not okay with doing this, I can offer two things:

1. Hire me to do it for you. Just contact me.
2. Find a theme like my BeastBlog v.2 theme that has these scriptlets built in.

To Joe, Adam, and anyone else who has helped me refine this stuff over the past year, thanks. I appreciate it and others will too.

Filed under SEO Important, WordPressing —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

Web Semantics and Search »

Enhancing the WordPress Title Element »

The Best of the Beast in 2007 »