Getting into SEO & Usability



SEO vs Usability

SEO stands for Search Engine Optimization. Usability refers to the human experience.

Simply put, SEO means designing (or redesigning) your website with Search Engines in mind. Think of search engines as a special kind of visitor. In some instances it might be helpful to think of a search engine as a human with some sort of visual impairment - and also (for fun) let's make English a 2nd or 3rd language for our 'search engine' visitor.


SEO & Images

How Humans View Text Vs Images

Now consider the following two images. To a user without any impairments, they are both virtually the same.

On the right side of the 1st image select some of the text in the title Websites 4 Small Business (using your mouse). Try the same on the 2nd, see they are not the same. The first 'image' is a table which contains an image as well as text as Heading 2 and Heading 3. The second 'image' is a screen capture of the table converted to a true image.

Websites 4 Small Business Logo (table/image/text)

Websites 4 Small Business Small Logo

Websites 4 Small Business 

Websites That Work


Websites 4 Small Business Logo (image only)

Websites 4 Small Business Logo

How Search Engines View Text Vs Images

Would you like to see how search engines see the same two elements?

In order to make this example worst case, we have ignored best practices (poorly named image, no title, no alt). We are also going to remove the table formatting from the example as it's not relevant to the discussion and only serves to cloud the issue. We also greyed out the code and highlighted the words the search engine will look at. If you want to see the actual source code, right click on this page and select the source code. In the next example we'll show the same code but this time with better formatting so even the search engines can learn something about our web page elements.

SEO Table, image, headings
seo table example

SEO imageseo image example

As you can see the last example doesn't tell the search engine much about what you are trying to communicate. So guess what? If the search engine can not figure out what an element on your website is trying to say, it will simply move on. NEXT.

Same Example, Better SEO Practices

Let's look at the same example but with formatting designed to help Search Engines do their job. The first thing we are going to do is make headings for our elements.

For the table (1st example) we are going to add a caption. In second, image only example, we are going to include a title for the image within the same p element so the text is associated with the image, not the line above it. Visually this may seem very much the same but remember search engines are blind, they only look at the code. 


Websites 4 Small Business Logo (table/image/text)
Websites 4 Small Business Small Logo

Websites 4 Small Business 

Websites That Work


Websites 4 Small Business Logo (image only)
Websites 4 Small Business Logo

Next we are going to make sure the image has a name that makes sense to the search engines and then add title and alt to our elements. Here is the result. 

SEO | Table Better Example
seo table better example

As you can see even an image that has some thoughtful formatting can tell a search engine enough to have a good understanding of what the element is trying to communicate.

SEO | Image Better Exampleseo image better example


So is a picture really worth a thousand words?


A picture can tell your human visitors a lot of information in a short period of time. And if you properly format that picture with search engines in mind, they will also be able understand your message and deliver it to visitors just waiting to buy your product or service!


SEO & Meta Tags

In our last example we showed how to properly format an image to tell the search engine as much as possible. Meta tags help tell search engines more information about your website in general and about each website page in particular.

It might be helpful to think of meta tags as a book cover for a novel. The book cover provides a hint of the content without forcing you to read the entire book.

There is not enough information in a book cover for a student to fake a book report but let's say you were interested in fishing and you are looking at books about fish; one book cover has a picture of a fishing rod, another has a picture of a gold fish in a bowl.

Meta tags can help search engines make the same quick and easy decision.

Internet Definition Of Meta Tags
meta html definition

If you want to see the Meta Tags of any website, look at the source code.

This is an example of Meta tags defined at the website level but NO meta tags defined for this current page. This tells the search engine about the website in general but does not provide any information on THIS page.

Visitors searching for SEO topics would NOT find this page! They would find your competitor's properly formatted page and if it answered their questions - well you get the idea.

Meta Tag Global Settings Examplemeta tag example

Adding Meta to an individual page OVERRIDES the global Meta tag settings and can help search engines really narrow down a topic with a laser like focus.

Each website page should have its own Meta tags SPECIFIC to that particular page. 

Meta Tag Page Examplemeta tag page example

To add Meta tags to your Joomla! article select the publishing tab.

Meta Tags Articlemeta tags article

Meta tags are on the right side. Here's what the Meta tags look like for this page.

Meta Tags This Page Examplemeta tags this page example

Meta Keywords are what your visitors will likely type into a search engine to find you so including popular misspellings might not be a bad thing. (Usability and Useability)

While we're at it let's talk briefly about the page title and alias. Just like images (and every other element you can name) your page title should reflect the page content.

The alias, if left blank, will be derived from the title by converting CAPITALS to lower case, spaces to dashes and funny characters (& sign, etc) are simply removed. The following alias was automatically generated from the Title.

Page Alias Joomlapage alias joomla

Sometimes removing the special characters can change the meaning of the alias, if that's the case, manually correct the alias.

Page Alias Joomla CorrectedPage Alias Joomla Corrected

So where else would you see this alias? Look up at your browser's address or URl bar to see it. The alias is used to create the final webpage URL address.

websites4 index.php/ 55-getting- into-seo- and- useability.html


SEO & Headings

Ever scan the table of contents of a book to try and determine the content and structure of the document? Search Engines look at heading page elements (H1, H2, H3) to gain a better understanding of the structure and content of your webpage.

Help search engines hook you up with customers by making use of headings to add structure to your webpage. Headings also help humans find what they are looking for too so this also falls under usability.


Headings Add Structure To Web Pages For Spiders & Humans
 Heading 1 Getting into SEO & Usability
    Heading 2 SEO
        Heading 3 SEO vs Usability
        Heading 3 SEO & Images
           Heading 4 How Humans View Text Vs Images
           Heading 4 How Search Engines View Text Vs Images
           Heading 4 Same example, better SEO practices
       Heading 3 SEO & Meta Tags
       Heading 3 SEO & Headings
       Heading 3 SEO & A Word Of Caution
    Heading 2 Usability
       Heading 3 The Inverted Pyramid
       Heading 3 What Grade Level Do Your Articles Target
       Heading 3 When Is Bigger Better?
       Heading 3 How Usable Is Your Website - Testing The Details
       Heading 3 I Can't Use My Family & Friends As A Captive Audience!
          Heading 4 Small Business Owners Use Technology - Make Friends & Family Feedback Obsolete
            Heading 5  So What Do I Do!
            Heading 5 Useful Links

SEO & A Word Of Caution

SEO is a big topic. In a way it can be kind of like hitting a moving target from a moving target with a moving target. What works today might not work tomorrow or next week.

Basically it works like this. The search engines keep their proprietary search algorithms pretty close to their chest. Sure they will make recommendations and provide feedback, but sometimes that's like interpreting cryptic comments from the FED when trying to determine future interest rates.

The recent link building scare based on comments by Google's John Mueller is a pretty good example of such confusion.

Link Building means putting links on your site to other reputable, relevant websites, hopefully with a link back to your site.

Here's the quote watch?v= 9h1t5fs5VcI#t= 3340.

And here is some of the fallout.

Link building is dead (again)

Google: Try To Avoid Link Building Because It Can Do More Harm Than Good

Google's John Mueller: I'd Avoid Link Building In General

So is link building dead? 

The 1st video is keyed up to the moment he makes the comments so you can judge for yourself. In Link building is dead (again), the author makes a case that nothing has fundamentally changed about the way Google interprets links.

After reviewing his comments, is it possible that he is really means your website should be able to stand on it's own merits and not rely on links?

We think so.

Or put another way, if you're planning on going out to a dance club and meet someone, you better have your act together on your own. It's great if you have a wingman or wingette as the case may be, but if you rely too much on this external aid (external links) instead of your own skills (content), then there is a good chance your wingman/wingette may go home with the prize ;)

So the moral is SEO is not a set it and forget it type activity.

In part it's because of the jerks.

At Websites 4, the overwhelming majority of spam email we receive is from "SEO Experts Promising To Put Us In The #1 Spot". How about a date with a movie star while you're at it?

A lot of these so called spamming SEO Experts try to game the system. Fortunately, for the spammers, Google doesn't deal with these cheaters the same way they do in Vegas.

But what Google does is change the rules when these violations are discovered. These changes can affect your rankings especially if you have hired these experts and let them do their thing all over your website.

If you hire "experts" that practice activities that violate the search engine guide lines, your search engine ranking will drop.

Even if you don't hire these folks, it's possible that an activity that was once ok is now taboo and if you are still doing it when the rules change your ranking could suffer.



Usability refers to human interaction with your website. How easy is it to find what they are looking for?

Do you have a site map to help visitors quickly locate what they are looking for? How about search function at the top of the page?

Do you make visitors jump through just hoops to contact you or find information?

Do you make appropriate use of images and headings to direct visitors to what they are looking for?

Because humans are much more diverse than the handful of search engines, the rules for usability are less defined. Also your visitors are going to differ from other websites with different business models, so what works for one site may be a disaster for another.

In social interaction studies, human personalities are often divided into for basic categories meant to represent the majority of people.

4 Personality Types marketing/ sell-different- personality-types wiki/ Four_temperaments

TV knows this lesson well. Those of you old enough may remember a series show called The Honeymoners. It turns out that the four main characters of the show were crafted so that each character has one of these four main personality types. This was done in order to appeal to the widest audience possible. Friends did the same thing with five characters - a bit of overlap is ok too.

The point is you want your website to appeal to widest audience possible within your target market. So how do you go about crafting content that does this? The Inverted Pyramid is one method.

The Inverted Pyramid 

Inverted pyramid


The Inverted Pyramid

Imagine that you are a journalist working for a major newspaper. You want to write the best articles possible. You research the facts and include them as references so everyone will know what a great reporter you are. No problem right?


It turns out the all major newspapers have more that one journalist. They also have an editor. The editor's job is to take all these great articles, along with advertising bits and combine them into what could commonly be called a newspaper. 

The finished newspaper can not have a huge white space on the last page or an odd number of pages so the editor is going to cut the end of your article - somewhere. You won't know until you read the paper!

As a journalist you want to write your article so that each bit tells the story as a whole. The title of the article tells the complete story. The first sentence of the article tells the complete story in more detail. The first paragraph tells the whole story in more detail, etc.

Inverted Pyramid Examples 2013/05/28/ inverted- pyramid- news -story-examples/

This method can also work for different personality types. Some people want 'just the facts', some want 'all the details' and then there is everyone else in between. Large colourful headings and images can also help your visitors find the part of your message they are most interested.


What Grade Level Do Your Articles Target

Do you talk over the head of your target visitor? Do you talk about yourself more than your visitor? How would you know if your were doing these things?

Copying your sample text into this page and find out. grade/

For grins we tested the preceding heading, The Inverted Pyramid. Here are the results:

Grade Test The Inverted PyramidGrade Test The Inverted Pyramid

So how did we do?

Perry has you covered with a link at the bottom of the results page.

How To Use This ToolHow To Use This Tool


When Is Bigger Better?

OK Ladies, stop giggling. 

Ever notice that the brake pedal on your car is BIG compared to the gas pedal?

Ever see machinery with a BIG RED (RAISED) 'off' button that's easy to hit and a smaller, usually recessed, 'start' button?

When Hewlett Packard redesigned their LaserJet Series of printers they did away with the cryptic online/offline button in favour of a BIG GREEN (RAISED) GO button and a small red (recessed) cancel button.

HP LaserJet 4 Control Panel (old style) LaserJet 4 Control Panel


HP LaserJet 4000n Control Panel (new & improved)HP LaserJet 4000n Control Panel


You can use the same technique on your website. The following two links are the same but one stands out more.

Get Started Today

Get Started Today

NOTE: There is some actual science and math behind this concept known as Fitts's Law.

".... the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target ..." 


How Usable Is Your Website - Testing The Details

Soliciting feedback from search engines on how they view your website is no problem at all. Both Google & Bing offer a comprehensive set of webmaster tools that provide valuable feedback in how search engines see (or don't see) your website.

But what about humans?


Of course your baby is the most beautiful baby in the world!

It may surprise you to learn that some people might not be totally honest about their feelings for fear of hurting yours. Or maybe they just don't care.

It doesn't really matter what their intentions are. As a small business owner you need critical feedback on your website functionality from humans that are as close to actual visitors you can get.

If you manage to get some volunteers to test your website, don't waste everyone's time by asking open ended question - you will not get the right answers.

Definition: An open ended question is one the results in a yes or a no. Understand what we mean?

First figure out what you want your visitors to do when they get to your website (search for products or services, register for a free course, buy products online) and ask those specific questions.

Please show me how you would find the services on this website?

Can you find the free online course? If you can, watch as they sign up. Resolve any issue they run into.

Repeat this with as many devices as you can (Desktop, latop, handheld, smart phone) with the most emphasis on device you think will be most popular with your target market. Hint, Google Analytics can help you determine this.

Sometimes we become so familiar with our website it's hard to see if from the perspective of a first time visitor.


I Can't Use My Family & Friends As A Captive Audience!

So maybe getting friends and family to help provide feedback, is one of those things, like communism, that sounds better on paper than it happens to work in reality.

We feel your pain. "They don't mind riding on your new boat but get just one of them to spend 5 minutes looking at your new promotion,...."

Small Business Owners Use Technology - Make Friends & Family Feedback Obsolete

As it turns out there are websites that specialize in testing your website! They use qualified participants to perform selected tasks on your website and provide you with valuable feedback to improve your interface/interaction with your customers/visitors.

The rules change all the time! It's just a fact when it comes to Internet rankings. What works today may not work tomorrow.

We're gonna share some of the useful tools we have found at this time (October 29 2015), but keep in mind these tools change over time.

What works today may not work tomorrow.

It's more important to know where to find what you need when you need it - as apposed to memorizing all the freakin' information on the Internet!

The following links were discovered in a google search "top webpage testers". If you do the same search one month or one year from now you will notice the results may change. That's because the websites themselves evolve or die AND the search engine algorithms also changes over time. The point is:

What works today may not work tomorrow.

Be ever vigilante with regard to your website promotion practices. If you are really interested in SEO you might even do something radical like develop 3-10 search phrases most likely to be used by visitors to find your business and track them (phrases not the visitors) over time to see if you go up or down in the search engine rankings.

You might be inclined to put this data into a spreadsheet.

You see your SEO efforts are also related to what your closest competitors do. Sometimes your site will stay at the same ranking but your competitor will pass you because of direct intentional action they took to improve their status.

So What Do I Do!

(The preceding title was for people that don't like to read and want to jump straight to the action!)

Investigate the following tools to see how they can help your website look better to humans and computer programs (a.k.a. evolving search engines):

Useful Links

Each Link Contains Multiple Links - You'll likely be busy for a week! testing-your-websites -speed-and-performance/

practicale articles/ 4020-10-Free- Website-Speed-Tests- /qatweb1.html top-28-application- testing-tools-for-developers/ blog/5-website-speed- test-tools-for- optimizing-web-performance/ 2009/03/21/ tools-web-testing /#WwKtMxeYN5qA


NEXT: Final Thoughts



What We Do?

Websites 4 Small Business, designs, builds and hosts websites. We specialize in small business websites.

When it's possible, practical and cost effective, we use Open Source off the shelf software to get your site up and running fast. Our philosophy is simple:

Why reinvent the 'technology wheel' at your expense?Cave Man creating wheel

Ok tell me more,...

Who We Do It For?

This is a bridge
This bridge is very long
On the road again
This slideshow uses a JQuery script adapted from Pixedelic