Pixel Thread

Google is your homepage. It’s where the user experience begins and where first impressions are formed. If a site isn’t on Google, it doesn’t exist.

Lots of beautiful expensive sites still fail to make the grade on Google because search optimization hasn’t been factored into their design.

Search engine optimization, known as SEO, is the craft of encouraging search engines to index your site and then rank it - preferably highly - in their search results pages. As a practice, it sits somewhere between marketing and technology.

SEO is an essential component of the design process and fortunately it’s not rocket science. With a little planning and some well written HTML, any developer can build a website that gets indexed for their chosen keywords.

RESEARCH AND PLAN

1. Research your keywords

What do you think are the words and phrases your potential visitors might use for when they’re looking for your product or service?  Use Google Adwords to help you come up with ideas and check terms competitors are targeting by looking at the page titles on their sites (text in the blue bar at the top of the browser).

Draw up a list, then use freekeywords.wordtracker.com to check the popularity.

If you’re just starting your site optimization, choose words / phrases that are uncompetitive where you’ll have most chance of success.  Try and whittle the list down to around five.

2. Use a relevant URL if possible

If you’re working on a new site, buy a URL relevant to your search terms. Try and include key terms in your site URL: e.g. www.apples-bananas.com. If you’re targeting a phrase, separate the words with a hyphen rather than an underscore

3. Plan the site architecture

Let your keywords influence the structure of your site, so if one of your keywords is apples, have a page on the site called apples. If another term is bananas, have another section called bananas. Put them in a section of the site called “fruit”. This is more effective than mixing the terms into one page.

START CODING

4. Use keywords for file names

Your page about apples, should be called apples.html on the server, so the URL becomes www.apples-bananas.com/apples.html. If your site is running from a content management system that generates URLs, set it to generate readable URLs rather than incomprehensible codes for pages. If this isn’t possible, consider using a different CMS or getting a developer to hack your current one.

5. Include keywords in page titles

The page title of the page about apples must include the word apples. This is probably the single most important factor in SEO.

The page title is a piece of HTML placed inside a page header, it displays in the blue bar across the top of the browser.

This might seem obvious, but it’s amazing how often you see sites with the same title used throughout. Make sure every page has a unique page title.

Don’t stuff keywords into page titles, keep them succinct and relevant. These page titles also display in search results, so are effectively the first piece of content a potential visitor sees.

6. Keep your code simple

Keep content and design separate - use HTML for content and CSS to style and position the content on the pages. The less mark-up there is for a search engine spider to dig through, the more chance there is that it will read the important stuff.

7. Make sure your page is readable with no CSS

Your code should be readable with CSS turned off and all code should validate with W3C.

8. Use JavaScript to build on existing functionality

JavaScript should be used to enhance an existing experience but definitely shouldn’t be a requirement for viewing the site. Use a JavaScript library such as jquery or mootools to keep your script simple. Read up on progressive enhancement.

9. Use Flash where appropriate

Although this has improved, search engines still have problems reading Flash content. Use Flash to accomplish something that can’t be done using a javascript library e.g embedding video in pages. Always provide alternative HTML content using SWFobject.

10. Don’t use JavaScript or Flash for navigation

If you do search engines won’t be able to follow links to content in your site. Use CSS controlled sprites for non-html fonts in menus. If you’re feeling clever you could enhance a menu using JavaScript, but definitely don’t rely on the JS for functionality.

11. Use sIFR or CSS to replace image text

To use a font for headers that’s not supported in HTML, use sIFR or CSS image replacement to make sure the text can still be read by search engine spiders.

12. Include keywords in alt tags

Label the big image of an apple on the apples page with an alt tag that includes your keyword, e.g. a juicy red apple. Alt tags display when user rolls their mouse over an image.

13. Use heading tags appropriately

Make sure you use an H1 on every page and ensure it includes the relevant keyword - so for example your page about apples has an H1 of ‘All about our apples’. Appropriate use of heading tags also benefits users accessing your page with a screen-reader. H1 = main title, H2 = section title etc.

14. Use keywords in the page text appropriately

Be sure to mention your keyword in the page a number of times, but don’t overdo it. There’s lots of debate about how influential keyword frequency is in a page, but don’t get too hung up on it. Write for your users not the search engines.

15. Use keywords when linking to pages within your site

Use “Find out more about apples here”  rather than “click here”. Never use “click here” - link text should always describe its destination. Users on screen readers can’t differentiate between links if they all have the same text.

16. Include a site map page

This page should be flat HTML linking to all the other pages and as before link text should include keywords. It should be called site-map.html or equivalent and should be linked from your home page.

PLUGGING YOUR SITE INTO GOOGLE

Once you’ve created your optimized site you need to let Google know it’s there…

17. Create an XML site map

Create an XML site-map and submit it to Google Webmaster tools, n.b. this is in addition to the static HTML site map that you include as a page on your site.

18. Build up inbound links

Google ranks your site based on the number of inbound links it sees, and the perceived value of the sites hosting those links. You need to build up a network of links in from relevant sites.

Critically the links to your site must include your keyword, so on a site linking through to my apples page, I would ask for the link text to read - ‘find out more about apples here’. Try to get anyone you know who blogs to mention and link to the site. Include your site in your email signature, if you post on forums, include it in your forum signature.

19. Track your success with analytics

Install Google Analytics on your site to measure the number of visitors and where they’re coming from. You can see terms they’ve searched Google for to reach your site.

20. Patience is a virtue

Don’t expect overnight results - it can take months even years for a site to start appearing anywhere worthwhile on Google. Continue to build up inbound links and slowly you’ll reap the rewards.

How you handle those visitors once they start arriving is another matter!

I’ve been thinking for a while that it would be great to set up a design / interactive conference in Bristol. It’s a perfect location, with a small centre, lively web community, lots of great venues around the docks.

But to do it well needs some heavyweights behind it… Bristol Media people have been out to SXSW this year and have been talking about some possibilities on their tumblr (tumblr - wtf? The new twitter that’s the new blogger etc etc??)

Maybe with the likes of Mike Bennett of Bristol Media, Benjamin Hostler of Beef, Hazel Grian of Licorice Media, Andy Parkhouse of Team Rubber and Clare Reddington of iShed, it could happen. It would be great to tempt people away from London for a few days. And great for Bristol’s profile as digital city.