SEO can be a complicated topic and there are people who’ve built a career out of specializing in this area. Search engines use complicated algorithms to index and rank websites, and it’s often unclear even amongst the professionals which strategies are the most effective. Getting a specialist on the team to help you out is a great idea if you have the budget for it, but often a web designer is left to figure this stuff out on their own. Learning the nuances of PhotoShop, Illustrator, HTML and CSS can be challenging on it’s own, so SEO is often kept as an after thought… or not really thought of at all.
If a client has made better search engine ranking a key requirement of a redesign, or if you’ve decided your own site isn’t getting the amount of traffic you think it deserves, there really is no alternative—you need to think about SEO. Some of the tools can be a bit overwhelming, and if you’re just getting started you might not be sure what to make of all the data something like Google Analytics is giving you. It’s hard to be a skilled SEO surgeon from the outset, and sometimes what you really need is just some basic tools to get you started.
To help you out with that, here is my own SEO First Aid Kit.
Google ranks a web page’s importance from 0 (not important) to 10 (very important). The higher the PageRank, the more likely a page will show up in a search. Enter a URL at PageRank Checker to get the current details of a single web site, web page or a domain name.
Technorati indexes over 112 million blogs and tracks which sites are being linked to most often. Use the site to see which blogs are linking to your site, and how your site compares to the rest of the blogosphere.
Search engines can’t “see” the beautiful design of your website and all the great photos and graphics that you’re using. When a search engine spider visits your page it has many of the same requirements as someone using a screen reader. This makes an accessible website a more search engine friendly website (the excellent article High Accessibility is Good Search Engine Optimization explains this is more detail). A good first step in making your site more accessible is ensuring it doesn’t contain any coding errors. Use the w3c’s online validation tool to test for errors.
Apply Treatment
Checking and improving the HTML for your webpage can help improve a sites SEO. Look through your HTML and watch for the following:
fix any errors reported by the validation tool
make sure you are using Header tags (eg. h1, h2, h3 etc) for headings, and not just paragraphs with styling applied to them
make sure those headings are descriptive about the content of your page
every image element on your page should have a descriptive ALT attribute – don’t forget that a search engine can’t see the image and relies on this text to make sense of the content of your page
get rid of any empty or unnecessary html tags. The higher the ratio of good content on your page to overall page size, the better the page will perform
ensure your page has a meaningful title attribute within the head of the document – this will become the text of the link to the page in any search engine results, so it’s very important.
eg <title>Design Meme</title>
make sure you also have a good concise description of the content of the page (or site) in your meta data. This will become the text shown alongside the link to your site in search engine results pages.
eg <meta name="description" content="Design Meme - A Resource for Web Designers and Developers created by Stuart Robertson with Tools, Tutorials, and Resources to Help You Build a Web Site." />
If you find looking at raw HTML a bit overwhelming you can also try using these 2 Firefox extensions to help: X-Ray for revealing the tags within the body of the page, and Professor X for displaying the content of tags within the head of a document.
There is a lot more you can do to improve the SEO of a website, but I’ve seen quite a few sites that would benefit greatly from this small amount of SEO First Aid. If you’ve done all these basic steps and you’d like to do a bit more work on improving how your site performs in search engines, then it’s time to move on to some of the more advanced tutorials and tools.
Hopefully some of the SEO experts who stop by the site will be able to offer some suggestions for which articles and tools to check out next!
Following the update to the X-Ray extension is the new version of Professor X for Firefox. While X-Ray lets you see ‘through’ a webpage to the HTML tags inside the body, Professor X lets you see inside the head tag without viewing the sourcecode.
I’ve submitted the update to Mozilla Addons, but I’m not sure how long it will take for that to make its way through the approval process and be made available for download. For anyone who wants to get the extension from Design Meme, here’s the link: Install Professor X version 0.5
What was interesting with this update was that Firefox 3 now prevents the a webpage from accessing any of stylesheets or icons packaged with the extension through the chrome:// url. This meant changing the approach to how Professor X worked, making all of the CSS part of the javascript file and encoding all of the icons in Base64.
It’s good to finally have both of these extensions working with Firefox 3 (I’d missed having them for my own use!).
A new version of Twitterbook is now available – the mashup that lets you use your Facebook status to update your Twitter account. For this update, a special thanks goes out to Ryan for his suggestions on handling long Facebook status updates when submitting them to Twitter.
Just like the previous versions of Twitterbook, you’ll need to edit the .php file with your personal information before uploading it to your server. On the new Facebook layout, you can find the link for the RSS feed for your status updates here:
You’ll need the actual URL of your feed (found at the link above) to properly setup the twitterbook.php file, along with the URL for your Twitter Feed, your Facebook Name (eg. ‘Stuart’), as well as your Twitter username and password.
Once you’ve edited and saved the twitterbook file and posted it on a web server running PHP, just go to the URL for the script (or call it using an automated Chron task) anytime you want to update your Twitter account with your Facebook status.
Thanks again for the feedback and suggestions! Post a comment, or connect with me on Twitter: twitter.com/designmeme
The X-Ray extension has been updated to work with Firefox 3. Actually, it’s been updated for quite a while but it’s still waiting on someone to approve it on the addons.mozilla site.
Since so many people have been asking me when the new version is going to be posted I’ve decided to start making it available directly from Design Meme again. This will go along with a number of updates and an all around increase in the amount of content and activity you see here on the site. If you only stop by once in a while, why not subscribe to our feed so you’ll know when we’ve got more new stuff to share.
If this is your first time using X-Ray, it lets you “see through” a webpage to the HTML tags underneath. Right-click on a page and select ‘x-ray’ to view the various elements on the page, without switching back and forth between the sourcecode.
The companion extension, Professor X, is also being updated and should be ready for download in the next few days. Install X-Ray version 0.9
In addition to working in web design and development, I also teach a few different web design courses. I usually refer my students to intermediate to advanced resources like A List Apart, or Think Vitamin. To help people get to the point where they’ll find those sites helpful, I’m going to start posting some short articles on more basic, but still helpful, techniques you can use if you’re just getting started.
Stuart Robertson