Skip to Content

Aarron Walter

XHTML | CSS |

Archive for the 'SEO' Category

Support for Building Findable Web Sites

12 Nov . 2007

As I have been wrapping up the final chapters of the book, some really kind support has been coming in from some folks I hold in high esteem. When conceptualizing Building Findable Web Sites: Web Standards SEO and Beyond I had hoped to create a natural continuation of Peter Morville’s Ambient Findability and Jeffrey Zeldman’s Designing With Web Standards with plenty of practical, real-world-ready examples to illustrate what it takes to make web sites more findable using web standards best practices. (more…)

Building Findable Web Sites: Coming Feb 2008

23 Oct . 2007

Building Findable Websites: Web Standards SEO and BeyondAs I’ve mentioned previously on this blog, I’m currently working on a book to be published by New Riders called Building Findable Web Sites: Web Standards SEO and Beyond. I’ve been teaching a course at The Art Institute of Atlanta called Findability, which teaches students practical solutions for creating findable web content that draws in viewers, and encourages repeat traffic. While researching and developing the course I realized that most of the conversation around the topic is either very theory focused with little practical advice or very SEO/marketing focused appealing to business-minded readers with little knowledge of the way web sites are planned and built. (more…)

SXSW Panel Picker Open: Place Your Vote

20 Aug . 2007

South By Southwest, the coolest Web conference on the planet that takes place annually in Austin, TX, has let loose it’s panel picker. Rather than creating a schedule of discussion panels and presentations that may not interest conference goers, the SXSW organizers have devised a democratic way for people to vote on what they want to hear discussed.

(more…)

Search Engine Optimization Part 2: JavaScript Progressive Enhancement

30 Jan . 2007

As Ajax and DOM Scripting have become en vogue, blind zeal and un-enlightened use of powerful code libraries have caused many to build web sites that may impress visitors with elaborate effects, but adopt a 1998 approach to development, ignoring accessibility and search engine optimization. I've fallen into that trap myself at times. It's awfully tempting to focus on seductive interface design effects that will create an interesting user experience for some, and alienate others. If your site/web application uses JavaScript to navigate, or to dynamically load in/create content critical to the user experience, then it should take measures to gracefully degrade for search engine spiders and visitors using alternative devices to access the content. If you are not building your pages to gracefully degrade, your content is invisible to search engines.

Jeremy Keith, Bruce Lawson, Rob Cherney, and many other JavaScript developers have been advocating best practices that address this issue for some time. It seems 2006 was the year we sobered ourselves after binging on inaccessible scripting techniques. Many great articles were published bringing us back to our senses, preventing us from repeating our terrible development practices of the pre-standards 90's. The resolution to the problem is to progressively enhance a web site that functions properly without JavaScript support.

Rob Cherney demonstrates how to progressively enhance an HTML form that will function with JavaScript turned off, and will be enhanced if JavaScript is available. I'll demonstrate how to progressively enhance a text link that makes an Ajax call to the server. If JavaScript is enabled, the href attribute is disabled and Ajax will load content from another source into a div for display. If JavaScript is disabled, the hyperlink works as usual, and directs the browser to another page where the same content is viewable. A fancy interactive, animated interface created with DOM scripting could use this approach, and gracefully degrade to a typical multi-page site that search engine spiders would have no trouble crawling.

A hyperlink can be easily disabled with a "return false" event as is seen below.

HTML:
  1. <a xhref="page.php" onclick="ajaxTest(); return false;">Have Your Cake and Eat It Too</a>

The onclick event will call a function then return false, preventing the hyperlink from firing. This is a very simple demonstration of progressive enhancement in action, but we can do better still. A search engine spider would navigate to page.php where it could find more content to index, but in a real world implementation of this technique, it would be advisable to attach an event to the hyperlink unobtrusively from an external script rather than from an event handler that mixes behavior and structure. By assigning a class to the link and using JavaScript to find elements with this class name you can separate behavior and structure resulting in more maintainable code, and external code that can be cached or even skipped by search engine spiders resulting in faster parsing (spiders appreciate this). I'll take the functionality a step further to display Ajax retrieved content in a div tag when the link is clicked.

HTML:
  1. <a xhref="page.php" class="progressive" rel="displayDiv">Have Your Cake and Eat It Too</a>
  2. <div id="displayDiv"></div>

JAVASCRIPT:
  1. <script type="text/javascript">
  2.  
  3. function attatchLinkBehavior(){
  4. if (document.getElementsByTagName) {
  5. var links = document.getElementsByTagName("a"); // Find all links in page
  6. for (var i=0; i <links.length; i++) {
  7. if (links[i].className.match("progressive")) { // find all links with class "progressive"
  8. links[i].onclick = function() { // Attach event to link
  9. var targetArea = this.getAttribute("rel"); // Area to display Ajax retrieved content
  10. loadContent(targetArea); // Call Ajax function
  11. return false; // Disable hyperlink
  12. };
  13. }
  14. }
  15. }
  16. }
  17.  
  18. function loadContent(targetArea){
  19. // Do your Ajax call here
  20. }
  21.  
  22. attatchLinkBehavior();
  23.  
  24. </script>

The id of the div is placed in the link tag using the rel attribute indicating the area to place the content returned by the loadContent() function. When attaching the click event to all hyperlinks with the class "progressive", the function also finds the id of the div where the Ajax content will display and passes it on the loadContent() function.

Search Engine Optimization Part 1: Creating Keyword Density

16 Jan . 2007

A critical factor in driving organic search engine traffic to your web site is the development of keyword density within your pages. Keyword density is the number of times a particular keyword shows up in a page in relation to the total number of words on the page. Keyword density is calculated with a simple formula expressed as follows: keyword occurrences in a page/number of words on page = keyword density percentage. Search engines will rank pages higher that appear to have a higher density of a search term, therefore choosing keywords to target and where to place them in a page is critical to driving visitors to your site.

There is a caveat with the development of keyword density in a page; keywords must occur naturally in your content. Ad hoc stuffing of a page with your keywords will not necessarily be rewarded by intelligent search engine algorithms like Google's, which will detect a dishonest stacking of the deck. Instead, you want to write copy for your site that incorporates the keywords you are targeting, but don't get so focused on keywords that your SEO quest compromises the quality of the content.

Now that you know the importance of keywords, how do you select them and where do you place them in your pages? Fortunately there are some wonderful tools to help you choose keywords, and then evaluate the density in your pages. As for where to place the keywords, that can be solved with a simple list of priority areas that search engines value that will clue you into the hot places. A general rule of thumb when selecting keywords is target words that are as specific to your content as possible, and not already strongly controlled by major web competitors. For instance, if you tried to target the word "pottery", chances are even with your best SEO efforts you will not out rank Pottery Barn, or the many other major businesses already targeting the term. Instead target a word like "raku", which may be more relevant to your site content, and will result in visitors to your site with greater interest in what you have to offer. Though there may be fewer searches for this term, the visitors it does generate are more likely to make a purchase! An understanding of the Long Tail theory will further shed light on the subject.

The tools I use to research keywords are WordTracker.com, NicheBot.com, and Overture (now owned by Yahoo!). Each of these tools access global search data to see how often your keyword is searched for. Some will even tell you who else is targeting your keyword with paid advertising. You can get suggestions for related keywords or key phrases that may be more ideal to target. These tools are simple to use, and will tell you pretty definitively which words are going to give you the best results. I will say that there is a bit of science, and a bit of directed guess work that goes into keyword selection. After all, can we really predict what users will be searching for in the coming months? Not even with a crystal ball, but researching your keywords and phrases will get you a whole lot closer to success than blind guessing.

Once you have identified your keywords, you want to make sure they show up in the following priority one places on your pages:

  • The title tag, close to the left but not the first word
  • Heading tags such as h1, h2, and h3
  • Meta tags, even though Google does not gauge these as a reliable source of finding out what your page is about, other search engines do
  • In your URLs
  • In internal and external link labels
  • The first few lines of your page

You should also try to place your keywords and phrases in these locations:

  • Alt text
  • Title attribute text
  • Strong and emphasis tags
  • Other heading tags
  • Longdesc text
  • Summary attributes
  • Caption tags
  • In filename of CSS files or image files

Other general guidelines include:

  • Keep HTML file size small, preferably below 20k
  • Do not require JavaScript to navigate the site as search engine spiders won't be able to spider all pages
  • Use standards compliant HTML and CSS, and make all attempts to validate your pages as Section 508 or WCAG complaint
  • Text should outweigh HTML
  • Use an HTML template engine of some flavor as search engine spiders tend to skip over redundant HTML from page to page

This list is not exhaustive by any stretch, but it will certainly get you pointed in the right direction to success with search engine optimization. Once you have your keywords in place you can use a keyword density checker to evaluate your success.