Synergy from Usability and Search Engine Optimization (SEO)

Part1 Part 2 toc

Did you know that usability engineering and search engine optimization (SEO) share some common rules and guidelines?

“If not, you might not be aware that you actually can increase usability when applying certain SEO techniques and vice versa.”

Take advantage of it and make both the visitor and the search engine ”love“ your site. While usability focuses on the user experience of your human visitors, SEO concentrates towards the search engines, which you want to refer more, and better targeted visitors to your Web site. When optimizing both at the same time, you will be surprised about the positive effects: More targeted visitors, higher conversion rates, more loyal customers, …

Usability recommendations for SEO

The following list of guidelines is far from being complete, but focuses on usability guidelines that have impact on SEO as well and SEO guidelines that have impact on usability. Those guidelines should be implemented early on. They are basically site setup and structure of content issues.

Table of Content (toc)

toc↑ | top↑

1. Quality content

Most likely it will not be new to you, that information, the content on your Web site should be unique, and highly valuable to your targeted visitors. This is your macrocontent. We will need this definition in a while.

We stop here, because this article is not really about content creation, keyword research, persuasive design, etc. A bit more informations on this in Further Reading → Usability.

Tip: Optimizing and improving a site is a challenging task. You are learning as you go. Concentrate on small projects first. Later you can apply your findings quickly on a larger scale.

toc↑ | top↑

2. Web Writing Style

On the Web you need to catch the interest of your visitors in a spilt second. It's too easy and tempting for them to move on. Like journalists that are writing for newspapers, you need to start with the part that interests your users most.

“‘Why should I care?’, might be the question in the visitor's head. You need to present them the answers right away!”

It is called “inverted pyramids” writing style. Your Web content shall start with the conclusion of your article. Then lay out the details and how the conclusion is drawn. This is even more important on the Web than in newspapers, because the medium is different. You can overlook an entire article in a newspaper with one glance, but the computer screen usually shows you only the top part of a Web page. In most cases users must scroll to the bottom to see the whole page. If the first part doesn't interest them, they simply don't scroll down to search for what might be interesting.

Some search engines will show text from your first paragraph on the Web page in their search result page (SERP). Another reason for the inverted pyramids style.

Another important usability guideline is that your text must be scannable. Eyetracking studies prove that people are reading differently on the Web. Instead of reading every word and every sentence in sequence, they jump around looking for the interesting parts first. Support that behaviour by providing scannable text. A wall of dense text is very bad for an interactive experience, it is painful to read. Use this well-documented tricks to enhance scannability of your copy.

More about Web writing style in Further Reading → Usability.

For search engine ranking purposes your page should be at least 300 words long. 400 or even 500 words are even better as minimum. Just for comparison, a standard article written for print has about 650 to 700 words per page, when printed on letter or A4 sized paper. While it does not hurt SEO, when the article is much longer than 1000 words, consider that the page loading time will increase. At some point you should break up a large page into smaller pages. Do not let a single HTML page get larger than 30 KiBytes. There are still people with 56kbps modems out there. The quicker your page loads, the better its usability.

toc↑ | top↑

3. Descriptive Microcontent

Users get to your site via search engine result pages (SERP), inbound links on other Web pages, or by typing your domain name in the navigation field of the browser. The information that they see about your site at this point is the microcontent of your site. Based on that microcontent they decide to click through to your site or not. Microcontent is contained in your

Microcontent must stand on its own, because it is placed out of context of your Web page. Not only your human users will benefits from descriptive microcontent, but your search engine ranking as well. It is the microcontent that affects the search engines' rating and categorization of your pages enormously. Always put the most important words at the beginning of the heading, title, and link text.

Here are some recommendations based on the compilation of various Web resources about SEO, including the instructions by the big search engine operators. You need to adapt the following example to your needs. Different search engines have different approaches and weigh tags differently. Also remember that your users are the ultimate judges on the quality of your content.

toc↑ | top↑

4. HTML Code Explained

The following code sample shows tips for applying usability guidelines as well as SEO guidelines. It focuses on the main content area. Layout related content blocks like navigation, footer, … are not shown.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="en">


Descriptive Text about the page content, max. 80 characters.

Concentrate on describing the benefit for the visitor and some features of the page. Make a sentence out of it. This is not exactly the right place for your business name or navigation info related to your site. That info is on the page anyway.

<meta name="description" content="Short descriptive microcontent" lang="en">

Write one or two complete sentences about the benefits of your content. Maximum of 200 characters recommended. This text will be shown on the SERP of some search engines, they show the first 150-170 characters.

<meta name="keywords" content="Keywords, …" lang="en">

Maximum 500 characters recommended. Just list your 20 or less important keywords and phrases here. Separate them with a comma. Omit stop words, like 'a', 'the', 'my', …

<meta name="robots" content="index,follow">

The page will be indexed by default, and all links will be followed by the search engines. The robots.txt File has higher precedence, but that is not exactly the topic here.

<meta name="author" content="name of author" lang="en">

Put the name of the page's author(s), your company or personal name, or the name of the copyright holder(s) in this tag. It is not required, but exposes the tagged name and helps the ranking for it.

<link rel="previous" href="../types.html">
<link rel="next" href="dirlang.html">
<link rel="contents" href="../cover.html#toc">


The link element with the relation attribute puts the current page into context with other pages. Some browsers (Mozilla, Opera, …) feature this form of structural navigation in an extra “Site Navigation Bar”. Web authors have not well adopted those features, yet. Therefore, we did not find relevant information on the Web about how it might affect SEO. Our Tip: If your CMS supports it well, use it. Otherwise it might not be worth the effort, and, if you get it wrong, usability will suffer.


<h1>Summarize your page</h1>
<p>Introduce the content of your page with one or two concise sentences at the very top of your page. …</p>

This first paragraph will be on some SERPs. Usability guidelines suggest that you write in “inverted pyramids style”. That means you start with the conclusion to get the reader interested right away. Journalists write that way, too.

<h1>Heading 1</h1>

<h1>Heading 1b</h1>

<h2>Heading 1b.2</h2>

Structure your content in a logical way and support scanning of the content. SEO ranking tests show that keywords in the header meta tags have more weight, than in the rest of the document.

There is one big exception, the
<h1></h1> tag. It has been abused a lot and all three (3) major search engines, now “punish” the phrases in those tags. Just use ordinary words there or leave the tag out and start with <h2></h2> next one.

<a href="URI" title="Link Title" …>Link Text</a>

Again, use descriptive phrases for URIs and link texts. The title attribute is not required to be used in each HTML A-entity. But it is highly recommended for links to non-descriptive URIs. This title text shows up as tool-tip in recent browsers, when you hover the mouse — move the mouse — over the link.

Use the
&hellip rel="nofollow" … attribute to tag links that you do not deem to be relevant for ranking. Most search engines will ignore the link in this case. When using software that allows user generated content, like blogs, forums, guestbooks, etc. this will protect your site from the negative effects of link-spamming. Often this ”nofollow“ mark is combined with the word “external” for outbound links, e.g., &hellip rel="external nofollow" … . This has advantages from a programming standpoint of view that go well beyond the scope of this article about the synergy of SEO and usability. Use the robots.txt file for your global indexing policy.

Do not put more than 100 links on a single page. This is confusing for your visitors and search engines might flag you as potential link spammer. Structure your site accordingly.

<b>keyword phrase</b>
<strong>keyword phrase</strong>

Also bold, and strong text seems to have higher weight for index purposes, but do not distract the reader, too much.

<img src="" alt="image description" …>

People with impaired vision, text-only browsers, and search engines cannot or simply do not interpet images. Give a brief description of the image.


toc↑ | top↑

5. General Content Tips

Continue reading on the next page Usability and SEO: 6. Site Search.

If you like this Web page, “digg it”, “stumble it”, “redd it”, “furl it”, … with the widget below. Your favourite social bookmarking tool is inside. Check it out!

Bookmark this Web page with your favourite tool:

Part1 Part 2 toc↑ | top↑