A recent WordPress blog integration for Lisbe Partners lead me to consider some Search Engine Optimization decisions that WordPress makes in it templates and here I share modifications.

1. Headings!

WordPress Default template lists Post Titles as <h2> in order to reserve <h1> for your Blog Title. At AWP we like to use <h1> for unique page content titles, so the first main text you see on the page is <h1>. We generally have great SEO ratings, so we are going to stick with that strategy.

The template files, archive.php, links.php, page.php, single.php and search.php can be changed directly. To affect the heading tags for posts, you will need to insert some conditional code in index.php (or post.php, since this file can be used on the single post, the post category list views, and some times the home page). In the following example <h4>’s are used as the list view headings.

<<?php echo (is_single() || is_home()) ? "h1" : "h4"; ?> class="title">
    <a id="post-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
        <?php the_title(); ?>
    </a>
</<?php echo (is_single() || is_home()) ? "h1" : "h4"; ?>>

Insert this into the beginning of index.php. (Modified from geniosity musings)

2. Page Title

Another SEO measure we’ve implemented at AWP is ordering titles with specific content first in the browser title bar. For example, if we are several layers deep, the title goes “Page Title _ Sub-Section _ Section _ Website Name,” etc. For more of an explanation, see Web Designer Wall (go to #7).

For interior pages WordPress Default theme uses “Blog Title > Category > Post Name,” which is not Search Engine friendly. To improve this, I borrowed code from The Blueprint Theme which integrates the Google Blueprint framework into WordPress (which I also used in my blog template).

<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> | <?php } ?> <?php bloginfo('name'); ?></title>

So, now we get “Post Name > Blog Title.” Happy SEO improving!

Excerpts from our educational section called AWP 101

Good design is only slightly superficial

Last year we were bombarded with links from friends and/or heard stories (rumors!) about how lo-fi design is the new hi-fi. The driving force behind this idea was mostly based on the perspective of an imaginary character: that of the hypothetical visitor. The argument assumes that visitors don’t want to feel cheated, manipulated or over-sold on a site that is too polished or classy. They just want the goods. People were citing Craigslist and Google (and, dare I say it, MySpace – ouch, that really does hurt) as the ultimate success stories. Bare-bones design, super-accessible content.

Seems straight-forward enough. And logical in theory. Obviously if John Doe has a computer, knows a bit of code and wants to sell the lovable lawn ornaments he makes in his garage, he doesn’t need a site that looks like Apple. That being said, I don’t go to the doctor and expect to see paint-chipped walls and broken equipment. So what is the compromise? (more…)

Today, in development, I noticed that a drop down menu I was building had inconsistent line-heights between Firefox 2 and the new Firefox 3. Using Verdana, font-size:10px, Firefox 3 rendered the height of the line as 14px tall, whereas Firefox 2 was only 12px. Because of the inconsistent height, I couldn’t line my drop-down menu up correctly in both browsers.

An excellent way to see this inconsistency in action is through Eric Meyer’s Javascript line-height test. Just open up this link in different browsers and the rendered line-height will be displayed for you.

Although we are used to making special considerations for Internet Explorer and Safari, problems between releases of similar browsers are much harder to solve for. It took me awhile to figure out what the problem actually was.

The solution, luckily, is quite simple. Set

body {line-height:1.5}

(or some other unitless value)

You will want to put this at the top of your reset.css stylesheet which you should be using for the greatest browser consistency possible. Here at AWP we like to use Blueprint CSS Framework which uses reset methods developed by Eric Meyer’s.

Now my drop-down menus line up correctly! Yes!

I know most of us are liking Firefox 3’s new save password dialog box. Very slick. If you frequent sites on the internet where you have to login (Gmail, Pandora, Facebook, Flickr, Vimeo, Garden Gate Delivery, the Commons Cam, etc….) you aren’t going to want to enter your password every single time! Here are AWP we login into dozens of sites every day in order to access our site, our client sites, internal project pages, and our blog, of course.

The save password feature is nice for preserving my own brain capacity! But you might be wondering, what about when Molly asks me, hey what is the login for AWP’s WebTree so I can post some juicy details about the project I just finished? I go to the site, and of course I can login (because I choose Remember my password). But I can’t give the password to Molly, because it is hidden. Is Molly out of luck? No!

Firefox does store your passwords where you can see them. Although a bit cumbersome, just head to Security > Saved Passwords. (Note: This is also where you can delete passwords that you saved accidentally, which might happen if your cat walked across your keyboard without you knowing).

But here is an even better method. Download this great Firefox Add-On, Web Developer Toolbar from Chris Pederick. As the name suggests, this toolbar is great for Web Developers. I use this tool when developing websites to examine what they will look like in a smaller browser, determine rendered font size, disable cache, disable images or css, outline table cells and even edit html live.

However, I use Web Developer Toolbar most for its Show Password feature. Once you have this spiffy toolbar installed, simply visit the site with the hidden password and choose Show Passwords from the Form menu. Password revealed, just like that! Completely for free! Imagine what I can do with the time I saved looking up obscure passwords!

So, you just deleted your account in Apple’s fine Mail program and you happened to ignore the warning that explained how all messages associated with this account would be deleted (doh!). Or, maybe (like me) you didn’t realize that removing the account would delete all the Sent Messages for that account. That sucks.

Here’s how to get those messages back (note, this worked for me on Tiger OSX 10.4):

1) Don’t panic.

2) Download a trial copy of Data Rescue II. You’ll need an external hard drive with some free space, so go grab one while you’re downloading.

3) Plug-in that external drive. Open the disk image and launch Data Rescue II. Follow the instructions for performing a “Deleted Files scan”. When the scan is complete you’ll see a Mail folder that contains all your email messages. Recover it. If there is more than one mail folder, recover them all. You may need to register the program at this point as the unregistered version will only recover 5mb of data. Don’t worry, it will be the best $99 you ever spend.

4) Now you should have all the recovered Mail files in a series of folders on your external drive. Each folder holds 1,000 messages. Each message is a separate .emlx file.

5) To get those emails back into Mail you’ll need to convert them to a single mbox file. Download a copy of emlxconvert, open the disk image file and launch the program. I converted my .emlx files in batches of 1,000.

6) Now switch over to Mail and select “Import Mailboxes…” from the File menu. Choose to import data from “Other” and hit continue, and select the folder that contains your new mbox file. Mail will create a new mailbox folder called “Import”, and the messages will begin to appear in this mailbox as they are imported. It took me about 5 minutes to import 1,000 messages on my MacBook Pro (2 GHz Intel, 2 GB RAM).

7) Whew! You have now imported all the messages that were either sent or received by the account you deleted. You’ll need to repeat the import process for each mbox file you created in Step 5.

Leave us a comment if this technique helped you out!