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!

sIFR uses javascript, CSS and Flash to replace short passages of plain text with text rendered in any typeface - regardless of whether or not your users have that font installed on their systems.

sIFR 2.0: Rich Accessible Typography for the Masses

Update: sIFR 3 is now available here , although still in beta I think…

Just continuing from the post below where I argue that in some respects there are conflicts between SEO and usability, I came to this post on A List Apart (an indispensible website about websites) via wikipedia, which gives some good examples of how making your site accessible can also make it more visible to search engines.

High Accessibility Is Effective Search Engine Optimization

The ALA post was made over a year ago, but it’s as relevant as it ever was.

SEO and usability are generally mutually compatible. Often what’s good for usability is good for SEO and what’s good for SEO is good for usability. But when it comes to the creation of written content, SEO and usability don’t get on.

Firstly here are some examples of SEO and usability being friends:

1. Readable URLs

URLs that are logical and readable are great for SEO and for usability. Users can see what they might expect in a page and search engines can see what a page might contain and rank it accordingly. E.G.

Good: bbctraining.com/televisionCourses is pretty clear as to the what the content of the page will be, but…

Bad: bbctraining.com/courseDetails.asp?tID=1179&cat=2781 is much less obvious.

Search engines have had problems with query strings (starts with a ‘?’ and uses ‘&’ to separate values) in URLs for a long time.

Query strings imply that the page is dynamically generated, i.e. it’s created from a database when a user visits the page. Dynamic pages are also considered to be less search engine friendly - it’s easier to generate lots of SEO spam dynamically.

The value of the relevant words in the URL will also be diluted because the URL is much longer, so there is less importance attributed to them.

Query strings in URLs are also not very user friendly - they don’t tell you what the URL is about.

2. Semantic Mark-Up

Semantic is code that can be understood by humans as well as machines. It’s great for SEO and for usability.

The code behind RSS feeds is generally semantic, the tag describes the content, eg Bang Your Drum.

More on writing semantic mark up here

3. Valid Code

Code that validates with the W3C Markup Validation Service, makes search engines happy and means that your code is most likely to work for as many users on as many different platforms as possible.

4. Separation of style from content

The separation of content and style, that’s replaced the ubiquitous HTML tables over the past few years has made the code of web pages infinitely more readable. CSS files control page styles and layouts while content sits in the HTML files.

Great for SEO, search engines can easily read the content of a page, and great for usability - pages are quicker to load and are more accessible on a wider range of devices e.g. mobiles, blackberries etc.

5. Logical Information Architecture

Having a broad subject area at the top of a site, moving down into a narrower topics as the user gets deeper into the site will tell search engines that the site is covering a lot of detail. In terms of usability, it’s also a logical way of structuring a site for users to find information.

A site map - a page with links to all other pages on the site - will help search engines index your site and users find content.

6. Small File Sizes

File sizes should always be under 150K, larger files don’t get fully indexed by search engines, and are slower to load. So small files = good for SEO, good for usability.

But when it comes to written content there are SEO and usability incompatibilities

In written content, SEO encourages:

• keyword repetition on a page, making text read less easily and longer than necessary
• content created for search engines rather than users - there are companies that will supply pages and pages of search engine friendly text on any subject imaginable to boost a site’s search rankings
• creation of extra pages in a site, purely for the benefit of search engines
• inclusion of extra detail, where really extra detail often isn’t needed

All this text is cluttering up the web. People are having to wade through unnecessary content to get to what they really want. The battle to rule the search engine results pages is damaging the web.

Of course it is possible to create content that’s valuable, useful and search friendly, but it’s always cheaper and easier for a company to buy in content that they know will boost their ranking.