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 thesmall
element. I have used aspan
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:
- Create (or Edit) a Page or Post — this works on either.
- Before (or afterwards if going back to do this to older posts or pages) scroll down to the “Custom Fields” section.
- 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?)
- 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).
- Click the “Add Custom Field” button.
- 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:
- Hire me to do it for you. Just contact me.
- 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.
Optimizing WordPress for Search Engines responds:
Posted: April 10th, 2007 at 4:52 pm →
[…] Optimizing WordPress for Search Engines […]
Joe Dolson responds:
Posted: April 10th, 2007 at 5:08 pm →
Hey, no problem! Appreciate how thoroughly you give credit for my small suggestion!
No question that there’s a huge value to those little custom data fields in Wordpress. They offer fantastic flexibility in customizing your use of the software without the complexity of creating a plugin.
David Zemens responds:
Posted: April 10th, 2007 at 6:47 pm →
Your great tips and interest in helping the rest of us learn more about WordPress and accessiblity in general simply amazes me. Thanks again, Mike, for another great post. I have already implemented these tips on at least one WordPress install — very nice indeed.
Thomas responds:
Posted: April 10th, 2007 at 7:39 pm →
I’m still very new to wordpress so this is a very helpful article for me! Thank you
John Faulds responds:
Posted: April 10th, 2007 at 10:06 pm →
Some good tips there Mike. With regards to the meta description, people might like to check out this article on SEOMoz in particular Point 7 which says that writing your own meta description isn’t always the best approach - it depends on your circumstances.
Mike Cherim responds:
Posted: April 10th, 2007 at 11:11 pm →
@Joe: Those custom fields are pretty cool. I’m thinking it’d be a great way to hard-code a pull quote on a post in an embedded
blockquote
using the same negotiation I show to ensure it’s optional. There may be a short tutorial on that soon. For some reason that is one of the first “alternate” uses I’ve considered.@David and Thomas: Thanks.
@John: Thanks for that. I must admit, #7 makes a helluva lot of sense. Really insightful. To add it or not might depend on the opening of the post to which the description is applied and how well the meaning of the context is condensed in the description by the writer. It is an “ad” in many ways. In light of this it might be advantageous to change my script to allow this, as follows:
This would offer the custom description if the textarea is populated, the default meta description if it’s left blank, and non-existent if the word “none” is entered. Or something to that effect anyway. (I’d probably swap the last two and change the word from “none” to default if this was applied to a new blog.)
Jermayn Parker responds:
Posted: April 11th, 2007 at 12:59 am →
Thanks for the post. I have already implemented these on my blog before but it is good to have all of these tips and code in the one place which I can bookmark and use later on. So thank you
lifeBLUE Media Web Design and SEO Re-Launched Under « SEO Happenings As I see them… responds:
Posted: April 12th, 2007 at 11:03 am →
[…] Learn how to make the most of WordPress search engine optimization (SEO) through good practices, a little effort, proper coding, and four scriptlets […]
Adam H responds:
Posted: April 18th, 2007 at 9:31 am →
Thanks for the link! (I’m behind on my RSS reading)
You mentioned maybe switching your “Right Angled Quote” to a “Hyphen” and I would strongly recommend doing that. Megan McDermott makes a great point in her article on title tags when she mentions that screen readers have to say the whole thing out loud. I’m of a mind that listening to the three words would distract instead of separate.
I was totally going to link that SEOmoz aritcle too. Rand and the rest certainly write some great SEO related content over there.
Great article Mike, keep it up!
Mike Cherim responds:
Posted: April 18th, 2007 at 10:04 am →
Thanks Adam. Just goes to show there’s more to the title than SEO
Upon your suggestion I have updated the scriptlet and my blog’s title element to reflect this change!
Stoney Creek Web Design » Professional & Personal Web Log of David Zemens » Blog Archive » Project Complete: DollarBuyDollar.com responds:
Posted: April 19th, 2007 at 10:24 pm →
[…] The new theme is Widget ready, optimized for the placement of Google Adsense ads, uses some neat concepts to be search engine optimized, and offers a clean, professional appearance - just as the client desired. It is not the most involved WordPress theme, but it works for the client. In addtion, it is Section 508 standards compliant, valid XHTML to the Strict standard, and valid CSS as well. […]
Adam Dempsey responds:
Posted: April 20th, 2007 at 7:48 am →
Thanks for the tips, going to try some of them out over at my blog
Test » 1955 Design responds:
Posted: April 29th, 2007 at 1:12 pm →
[…] The new theme is Widget ready, optimized for the placement of Google Adsense ads, uses some neat concepts to be search engine optimized (courtesy of Mike Cherim) and offers a clean, professional appearance - just as the client desired. It is not the most involved WordPress theme, but it works for the client. In addtion, it is Section 508 standards compliant, valid XHTML to the Strict standard, and valid CSS as well. […]
BooTCaT responds:
Posted: May 5th, 2007 at 12:05 pm →
First of all , thanks and these are really nice tips .
i liked your post . and i am yet to implement all the tips said by you .
But i have a doubt to ask you . actually , i own , www.rani-mukharji.com which brings latest news on indian actress rani mukherjee , using a wordpress blog .
my problem is that , MOSTLY my “blog homepage” namely www.rani-mukharji.com/wordpress/ is being indexed by google for the keywords .
although the individual pages have the same news better written only the homepage is indexed .
so , when i go on writing posts , the other posts may move down and thus i may lose my visitors for content .
so , how do i actually , make google go towards the individual post pages.
i have sitemaps and google sitemap plugins with appropriate ping setup . so the pages are crawled .
kindly tell me what to do .
Thanks in advance .
Mike Cherim responds:
Posted: May 5th, 2007 at 3:19 pm →
To tell the truth BooTCat, I don’t really know. I did Google some of your headings and found you, but indeed it did point to your home page and not the article exactly. This might be a question for Google, and you might want to see if they have any violations against your site. I will add that the title element on your home page is abusively long which might negatively affect you.
As an aside, she’s a very pretty actress.
bu.logum » Blog Archive » Links for 2007-04-26 [del.icio.us] responds:
Posted: May 14th, 2007 at 11:46 am →
[…] Optimizing WordPress for Search Engines - Beast-Blog.com […]
DollarBuyDollar.com » 1955 Design.com ยป Accessible Website Design responds:
Posted: May 19th, 2007 at 8:52 am →
[…] The new theme is Widget ready, optimized for the placement of Google Adsense ads, uses some neat concepts for search engine optimization (courtesy of Mike Cherim) and offers a clean, professional appearance - just as the client desired. It is not the most involved WordPress theme, but it works for the client. In addtion, it is Section 508 standards compliant, valid XHTML to the Strict standard, and valid CSS as well. […]
bootcat responds:
Posted: July 7th, 2007 at 10:59 pm →
hey mike ,
thanks for replying dude .
and yeah she is one cute cuddling actress who i would live my life for .
If u want , i can point you to some of her films
ok mike .
And thanks for pointing me towards those big titles .
but this all seem to confuse me more , because some sites do perform with big titles . weird .
anyway , i will fix it mike .
thanks again.