Archive for SEO

Making your website accessible

// January 28th, 2010 // No Comments » // Accessibility, Development, SEO

Accessibility can be checked automatically and can pass, however, to be more thorough a manual process of checking pages will be necessary. Manually checking will enable you to identify and rectify any accessibility and usability issues with your pages.

I don’t think most issues these days are that bad because most development is done using XHTML, CSS, and semantically. In order of importance, I would say these are the main points to cover:

  1. Manual testing by disabling images, CSS, standard use of headings and lists, testing the functionality without JavaScript
  2. Automated AA validation
  3. Adding multimedia transcripts (captions and auditory descriptions would be good too)
  4. Image contrast tests and necessary revisions, using ColorDoctor to test for Protanopia, Deuteranopia, Tritanopia and Greyscale

Our end goal then is: To make every page in your website and/or micro site standards compliant

Plan of action

  1. List all pages within the entire structure of your website
  2. Check each page in turn (using the tools mentioned later):
    1. If it validates, skip to next page in list #1
    2. If invalid, modify page, or script
  3. Repeat #2 until goal has been met

Once the above has been completed, the next goals would be focussed on if necessary, namely adding transcripts for multimedia presentations and movies.

Implementation

Condensing AA guidelines into a clear checklist

It is pointless checking each point of the AA checklist, as a lot of the sections are regarding things such as contrast of images, the semantic structure and making sure your pages are written in plain English.

Tools and Guides

A great resource giving an outline of how Mozilla Firefox and the Web Developer Toolbar can help with these manual checks can be found here http://www.webaim.org/articles/evaluatingwithfirefox/. This gives a detailed step-by-step checklist of how to test accessibility. Another good resource is http://www.w3.org/WAI/eval/ which gives an overview of evaluating a website for accessibility.

Doc type

Making sure doc type is correct is essential. It was originally set to XHTML 1.0 Strict, but because of certain elements we are using it was bringing up incompatibilities. Therefore I have set it to Transitional (see http://www.w3.org/QA/2002/04/valid-dtd-list.html).

HTML

Font size

Pages should be testing for issues regarding font size increase.

Images

Alt tags are standard attributes and would have been added to each image that has been uploaded. If images are used only as part of a design, or a layout spacer, they should be marked up with an empty alt attribute. However, testing must be done using the Firefox developer toolbar selecting the following options:

  • Outline images without alt attributes
  • Outline images with empty alt tag
  • Replace images with alt attributes
  • Disabling all images

Links

There are issues with the links SharePoint generates, however this is mentioned later in this document.

Lists

Mark up lists and list items properly using “ul”, “ol”, and definition lists as necessary.

Tables

For data tables, identify row and column headers. For data tables that have two or more logical levels of row or column headers, use mark-up to associate data cells and header cells.

IFrame

Each IFrame should have a title.

Headers

Headers and sub headings should be used correctly; this is standard practice for web developers.

Deprecated elements

Using the developer toolbar elements should be found and removed that are deprecated.

Keyboard Navigation

The access key list is already in place; however, it is hidden with CSS – even on focus state. With keyboard navigation these will not be visible. I suggest placing these links near the logo, when tab focus is on each of these links in turn, they will become visible and also have a contrasting background colour or border.

For each text links, a “focus” attribute must be added to the relevant a CSS file. The focus can be the same as the “hover” state.

For each image link, the focus attribute should either add a border, outline, or a hover state image. Again, this should be the same or similar definition as the “hover” state.

Style

Pages CSS styles should be disabled to verify if content is legible.

Scripts

To make scripts compatible with validation it was necessary to wrap embedded scripts with CDATA:

//<![CDATA[
//]]>

See http://www.w3.org/TR/xhtml1/#h-4.8 for more information.

The standard attributes for java script is “type” which should be set as:

<script language="javascript" type="text/javascript">

Pages will also be tested with JavaScript disabled.

Automated validation tools

I would suggest using http://validator.w3.org for single pages. There are others available:

Free accessibility validation tools

Other tools

ColorDoctor – http://www.fujitsu.com/global/accessibility/assistance/cd/download.html – a colour tool from fujitsu which takes an image of a webpage and can render the image as those with Protanopia, Deuteranopia, or Tritanopia would see it.

Summary

Focus here has been on validating to AA standard. Things to also consider is having a CSS file for print, as well as Screen mode.

Resources

WAI Guideline checklist: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Promoting your website – it’s all about SEO

// January 6th, 2010 // No Comments » // SEO, Web Development

It is also all about Google. The vast majority of people will come across your site from a search engine, the vast majority of those will be via Google. Google has the monopoly of search, so it is essential to get your site ranking as high as possible. It is impossible to have perfect SEO, as it wouldn’t be perfect for very long. Google are constantly changing their algorithms for searh and page ranking. Therefore it is a constant game of cat and mouse for those promoting their websites. There are some essentials SEO techniques that you should include in the development of your website. These things include:

  • Web page title (keywords used in title)
  • Body copy (good use of keywords)
  • Header tags
  • Strong tags
  • Image file names
  • Image alt tags
  • Domain name
  • Path
  • Parameters (or rather, not having any)
  • Page file size
  • In-bound links
  • PageRank

Web page title

The title tag of your web page is what appears in the search engine results page (SERP). This then has a double benefit in that it allows google to understand what your page is about, but also it communicates to the searcher what the page is about. Fixing only the title tags of your pages can often generate quick and big differences to your rankings (http://www.highrankings.com/allabouttitles).

Body copy – content is king

If you are putting a lot of reasourses into your website you want to make sure you create unique and compelling content. There is a lot of duplicated content out there, and Google will penalise you if you are publishing content that is already there. You should also aim for at least 200 – 300 words per page. Another thing you can do to increase your ranking is to support your copy with images. Make sure your image names reflect the image itself. This is especially important on online stores.

Keywords

You have to make sure that people are looking for what you are selling. This is where research comes in. It is fine writing content for yourself, but you can’t expect thousands of hits without doing research. You need to find out what search terms people are using, and then build your pages with these kewords in the page title and copy. You should also use one phrase per page, creating a seperate page for each keyword.

You need to know what search engines are looking for. The search engine makes the best match it can between the words used when searching and matches it to what it has registered in it’s database. The top of page 1 is the best position. To get there you have to make best use of keywords in your webpage’s copy. If you do this your hits will soar. You must pick the right ones to use however.

Conduct research on target users search patterns. Pick search terms and optimise pages specifically for those. It is common sense really – use the words on your website that matches the words your customers use when searching. But how can you find out what your customers are searching for?

Keyword prominence

The top 25% of the page and the bottom 25% of the page are the most important. This is where Google wants to see critical keywords and phrases you want to be ranked by. The bottom of the page is important. Good navigation with good titles enhance googles perception of your site too.

Keyword proximity

As mentioned it is best to have a definite statement that summarises the subject of the page. The rest of the content should be rich in keywords and phrases, but not as heavy as the intro or the lower 25% of the copy. Using too many keywords however will mean that the googlebot spider will treat the content as spam and give up. You should look for a keword density of about 4%.

Keyword tools

http://www.wordtracker.com – paid for keyword tool. £161 for annual subscription or £20 for a one month minimum term. It does have a 100% money back guarantee. There are some great free resources on the academy section of their website.

Nichebot has also a good reputation, although I have not tried it myself.

Accessibility and web standards

Geoffrey Zeldman once said that 99% of all websites were obsolete. It is therefore important to build your website using valid XHTML/HTML, CSS. Tables for layout are a no-no; tables are used to display tabular data. Google likes clean code. Content that is generated with Javascript will be missed by Google.

The semantic web is basically seperating content from layout/design, and making content logical i.e. main heading, sub headings, emphasised copy etc. Navigation is another factor; make sure it is clear, clean and precise. Good use of breadcurmbs helps the user of the website also, Google will also recognise this. All of these come under the usability heading too, with things to consider such as the three click rule.

PageRank

There is a lot of confusion with this term. I myself for a long time thought that page rank was how high my website ranked in search engine results. This is not quite correct. The term PageRank comes from one of Googles founders, Larry Page. He created an algorithm which assigns a numerical value from 0 to 10 to your website based on relevance, authority, usefulness, and clear meaning.

How fast does your site load?

In the early days of web development the 50k rule reigned supreme. If your site was greater than this, those with 56k and less modems would possibly give up. Since the abundance of broadband designers began to get more creative and use graphic heavy designs with not worrying too much about download speeds. However, Google recently announced that it’s algorithm will factor in page load speed in addition to the other 200 or so ranking factors it uses. See http://www.webdesignbooth.com/7-tools-to-optimize-the-speed-of-your-website/ for more information.

Internal links, external links, and in-bound links

Internal links (links that point from one page on your site to another) carry some weight, but not as much as links from external sites to your site (see http://www.seomoz.org/blog/17-ways-search-engines-judge-the-value-of-a-link).

There are many ways to get in-bound links. If you use forums or leave comments on blogs you can usually leave the url of your website. This is a great way to get inbound links. You can also submit your site to business directories such as Yahoo and Google. Another great way is to suggest your site to the Open Directory Project. They will check out your website manually, so if your website is used for spam or has low quality content they will not register it. Check out http://www.dmoz.org.

Things to be aware of

Multiple domains

Google really doesn’t like redirects. If you have lots of domain names for your website/company it is much better creating a keyword heavy page under each domain and provide links to your website from that.

Metadata

Metadata means information about information. As mentioned, the title of your page is the most important.

Next are the meta keywords. These are what you feel your website should be ranked by, however, these are abused by spam websites so they are not relied on by Google. However, it is best to use them and only include specific keywords to the content of the page. You will be penalised otherwise. It is said that Google do not rely on meta keywords, however, a lot of other search engines do.

If you do a search on google you are presented with the website address, title of the page indexed, and introductory text about the site. Where google gets this text from is the meta description. If there is no meta description then google selects copy from the most specific content of your site.

And finally

If you’re passionate about your site’s topic, there are lots of great avenues to engage more users. Start a blog: make videos, do original research, and post interesting stuff on a regular basis. Update your pages regulary. Alter body copy and add images or downloadable pdf files. Get users to add content. Forums. Get people to add reviews. Provide an RSS feed.

One of the best things to do if you are targeting Google is to follow what Google are doing using the information they provide. Check out http://www.google.com/support/webmasters/bin/answer.py?answer=35769

You can also implement Google search on your website, as there are two types of web user, searchers and browsers.

Don’t think that you have rewrite your entire site, you can work on things incrementally. Keep an eye on how your site is doing by using Google Analytics (http://www.davinciplanet.com/advanced-google-analytics-hacks/)

Resources

A great site with SEO basics. One of the best SEO sites out there is SEOmoz.org.