how to design search engine friendly websites by shari thurow

Designing Search Engine Friendly Websites

ByShari Thurow, Founder and SEO Director

Omni Marketing Interactive

Copyright 1997-2014. All rights reserved.

About me:

• Author of Search Engine Visibility, which has been translated into 5 languages.

• Co-author of When Search Meets Web Usability, translated into Chinese.

• Columnist for Marketing Land and Search Engine Land.

• SEO professional since 1995, pioneering search-engine friendly website design.

• Web designer/developer since 1995.

• Website usability and UX professional since 2002.

Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.

Copyright ©1997-2014. All rights reserved.

“… A good way to solve problems is to start with the big picture… [because if you don’t understand the big picture] you may solve the wrong problem, or might not explore other—possibly better—answers.”

--Heineman, G. et al. (2009). Algorithms in a Nutshell, p. 4.


usability

findability

responsive design

user experience

dynamic serving

SEOinformation architecture

technical architecture structured data

knowledge graphalgorithms

microformats

mobile

social media searcher UX

Put these words into perspective:

content users

context

Information architecture guru and findability guru Peter Morville’s Facets of Information Architecture.

Available at: http://semanticstudios.com/publications/semantics/000029.php


Goals of this session:

• Define a search-engine friendly website design

What it is and is NOT

Why it is important

What it depends on

• Search engine optimization essentials

Keywords and labels

Navigation and accessibility – (architecture, design, format)

» Formal navigation

» Contextual and supplemental navigation

Link development and social signals

Searcher/user goals and behaviors

• Home pages

Copyright 2007-2014. All rights reserved.Designing Search-Engine Friendly Websites


If you check out some of the sample web pages used in this presentation, they are likely to look different.

The principles & guidelines that these screenshots illustrate are relevant long after a site has changed.


Some symbols:

This is a good idea, or this website (or web page) implemented a best practice.

This is a bad idea; don’t do this; or this website (or web page) did not implement a best practice well.

WHAT IS SEARCH-ENGINE FRIENDLY

DESIGN?

Designing Search-Engine Friendly Websites



Pop quiz:

Are these pages search-engine friendly? Why or why not?


Museum site:


A restaurant site:


Another restaurant site:


Mayo Clinic:


Search-engine friendly design is NOT…

…a design created primarily for obtaining top search engine

positions.


In other words, search-engine friendly design is not:

spam

SearchEngines

technology-centered

design


Search engine optimization is….

SEARCH-

ENGINE

FRIENDLY

DESIGN

technology-centered

design

user-centered

design

…optimizing a website for people who use search engines.


Search-engine friendly design is a user-friendly website

design that can be easily found on the crawler-based

search engines, human-based search engines, social

media engines, and industry-related websites.

Importance of site design:

• Primary: End users/site visitors/searchers/target audience

• Secondary: Crawler-based search engines/technologiesNiche and industry-related sites


How words, graphic images, and multimedia files are labeled and

arranged on web pages communicates the content that you feel is

important to both search engines and to site visitors.

SEO professionals:

• Label website content so that it is easy to find

• Organize website content so that it is easy to find

• Ensure search engines and other technologies have access to desired content

• Ensure search engines and other technologies don’t have access to undesirable content


5 UNIVERSAL RULES OF WEB DESIGN



5 Universal Rules of Web Design:

1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistent in layout, design, and labeling

5. Quick to download


(1) Easy to read:

Legible

Scannable

Understandable

Make sense in search listings



Which site navigation is easier to read? …to scan?

Vacation Rentals - USA

• Arizona

• California

• Colorado

• Florida

• Hawaii

• New York

• Virgin Islands

BA

(2) Easy to navigate:

Distinguishable

Scannable

Clickable/tappable

Predictable

Consistent


The purpose of site navigation is to enhance

website effectiveness by enabling task

completion for both humans and technology

(searchers and search engines).

Site navigation should communicate:

• Orientation – Where am I?

• Arrival – Am I in the right place?

• Information scent – Where can I go and how can I get there?



“Findability Precedes UsabilityIn the Alphabet and on the WebYou Can’t Use What You Can’t Find”

-- Morville, P. (2005). Ambient Findability, p. 111.


Is this site navigation easy to use?


“It’s not enjoyable to…move the pointer around a site (‘minesweeping’) in hopes of finding something clickable.”

--Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, p. 184.

Inceptor’s pyramid:

• When searchers arrive on a website from a commercial web search engine, such as Google, they usually land on a page in the middle of the site, not the home page.



Which link should you click on?


Reasons customers switch to a competitor site:

14%

14%

22%

30%

31%

0% 10% 20% 30% 40%

Navigation difficulty

Endless loops preventing transactions

Being kicked off page

Received error messages

Login difficulty

Source: Harris Interactive, Inc.

(3) Easy to find:

Before arriving

After arriving



Searchers follow an information scent:

1

2



Another example:

1

2



It’s the same with social media:

1


2


3

After arriving:

• Go directly to the relevant page

• Within 7-8 clicks, preferably less, as long as…


Porter, J. (2003). “Testing the Three-Click Rule.” Available at http://www.uie.com/articles/three_click_rule/


“People don’t mind clicking through multiple pages as long as each click brings them closer to [their] desired content.”



“During the initial few seconds when they judge a page, they make their decision (to scroll) based on what’s visible.”

“If this doesn’t seem promising enough, some will leave without investing the extra time to scroll.”



“When people can’t find what they need, they often assume that the information isn’t available there. In frustration, they may go elsewhere.”



People commonly use site search when…


“…users fail to find the specific content they want 58% of the time. What’s more, these lost users almost do the same three things: hit the Back button, pogo stick, and search.”

--Spool, J. (2012). SXSW presentation.


“…well-designed, easy-to-use navigation is important in establishing credibility, authority, and trust.”

--Kalbach, J. (2007). Designing Web Navigation, p. 17.

(4) Consistent in layout, design, and labeling:

Communicates trust, reliability, and dependability

Contributes to cohesive brand and user experience

Contributes to ease & predictability of navigation (information scent)

Leads to more rankings…and conversions


Be consistent with communicating ‘aboutness’ to both

humans and technology.

(5) Quick to download:

Actual download time – machine speed

Perceived download time – human speed



“Computers actually have two kinds of speed:… real (machine) speed and … perceived speed. Of these two, the one that really matters is perceived speed.”

--Bickford, P. (1997). Interface Design: The Art of Developing Easy-to-Use Software. Chestnut Hill, MA: Academic Press.


http://developers.google.com/speed/pagespeed/insights/


“If people cannot find what they want on a site, they will regard the download time as slow.”

--Perfetti, C. and and Landesman, L. (2001) “The Truth About Download Time.” Available at: http://www.uie.com/articles/download_time/.


“Considerable evidence has been amassed over the past 4 decades of computer use –that responsiveness [not making people wait] – is the most important factor in determining user satisfaction with computer-based products and services.”

--Johnson, J. (2008). GUI Bloopers 2.0, Second Edition: Common User Interface Design Don'ts and Dos. Chestnut Hill, MA: Academic Press.

Download time depends on context:

• Gender

• Time online

• Economic factors

• Perceived length of wait

• Attitude to delay (patient vs. impatient people)

• User expectations

• Type of task

• Uncertainty and information about the wait


To remember:

• 5 Universal Rules of Web Design

Easy to read

Easy to navigate

Easy to find

Consistent in layout, design, and labeling

Quick to download


OPTIMIZATION PRINCIPLES



Search engines:

• Index text

• Follow links

• Validate citations

• Accommodate searcher goals and behaviors


} All crawlers

Search engines:

• Index text

• Follow links




} Ranking factor

Search engines:

• Index text

• Follow links




Bring in a search engine optimization specialist during the design,

redesign, wireframe, or template stage, NOT after the site has

already been created.

All components are essential:

• In order for a site to receive consistent search engine traffic over time, all 4 components should be present on a website.

• If a website has missing pieces, it gives competitor sites the opportunity to rank higher and receive more search engine traffic.



Keywords & Labels

What kind of text?

• The words your target audience is typing into search queries are called keywords or query words.

• Your website should have a labeling system that clearly communicates ‘aboutness’ to both humans and technology.


Types of labeling systems:

• Document labels

• Navigation labels

• Content labels



Labeling example:


A URL is a label:

Primary text

• Title tags

• Visible <body> copy

• Text at the top of a web page

• In and around hypertext links

• Domain and file names (accessibility)

Secondary text

• Meta-tag content

• Alternative text

• Domain and file names


Breadcrumb links:

• Encourage browsing

• Reduce bounce rate

• Enables task completion (reduces # of actions to get to a higher page)

• Sense of place

• Aboutness

• Provide context

• Support searching

• Information scent


Keywords and labels:

• Make sure you place your keywords in titles, visible body text, anchor text, meta tags, and alternative text.

• Remember to focus most of your efforts on primary text, not secondary text.

• Create a clear and consistent labeling system. Both humans and technology should be able to correctly interpret your labeling system.

• Place your keywords prominently on your pages. Don’t make people scroll to determine what your content is about.

• Use keywords frequently enough on your pages so that page appears focused, but don’t overdo it.



Navigation & Accessibility


“The navigation elements of your website provide [both humans and technology] an understanding of your organization and give them a sense of where they are within the site structure.”

--Adapted from Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry Minds, Inc.


Remember Inceptor’s Pyramid:

Types of site navigation schemes:

• Text links

• Navigation buttons

• Image maps

• Menus

• Flash



“Too much navigation, and our audience is overwhelmed; too little, and they are lost.”

--Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry Minds, Inc.


Principles of choices:

Adapted from Brown, D. (2011). Principles of Information Architecture. UIE Virtual Seminars presentation.

Schwartz, B. (2005). The Paradox of Choice: Why More is Less. New York: HarperCollins.


These menus tested well:


Question:

If a site navigation scheme is not search-engine friendly, should you avoid

using it in your site design?


“Unique images positioned in a consistent manner on pages…can serve as webmarks [landmarks] that can jog our audience’s memory and let them know they’re in the right place or getting close to it.”

--Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry Minds, Inc.


Optimization tip:

Always have at least two forms of navigation on your website: one for your target

audience and one for the search engines.

They often complement each other.

Types of text links:

• Navigation scheme

• Locational breadcrumb links

• Embedded text links

• Site map (wayfinder) or site index



Multiple text links:


Embedded text link recommendations:


Page interlinking:

In addition to a spider-friendly navigation scheme and a

(wayfinder) site map and/or a site index, all websites should

have related, relevant page interlinks.


How humans and technology interpret navigation:

Adapted from Information Architecture for the World Wide Web by Peter Morville and Louis Rosenfeld. Used with permission.

Types of page interlinking:

• Parent-child

• Sibling-sibling

• Grandparent-grandchild

• Cousin-cousin


Let’s look at some examples….


Interlinking example #1:


Responsive designs and blogs are NOT

naturally search-engine friendly. They

require curation by professional SEOs and

information architects.

Some responsive design advantages:

• Content only has to be managed in one location.

• Maintenance can be easier.

• Can save time.

• Both web and mobile crawlers can access.


Some responsive design disadvantages:

• Can significantly increase actual download time of website:

Images

Style sheets (CSS)

JavaScript and other workarounds

Fonts/typefaces

• Redirects gone amok

• Tailored content sometimes necessary for SEO and the best user/searcher experience


Navigation and accessibility:

• Always use at least two forms of navigation on your website: one for your site visitors (humans) and one for search engines (technology).

• Know when and how to use text links effectively.

• Don’t assume…test.

• Try to make the URLs to your most popular pages as human-friendly and technology-friendly as possible.

• Responsive design and faceted classification…don’t assume! Remember, findability is a critical facet of the user experience (UX).

• Usability counts!



Link Development & Social Signals

What is perceived popularity?

• Number of links

• Quality of links

• Number of times people click on links to your site

• How long end users visit your site

• How often people return to your site


} Link popularity

Social media and search engines:

• Currently, social media acts more as a signal than a directive:

Signal = maybe

Directive = absolutely

• Social media = short-term SEO effect

One goal is to get more followers and building an audience (qualitative)

Links can be a by-product of a great social campaign

• Link development = long-term SEO effect


Factors that affect link development:

• Substantial and unique content

• How other sites are linked to your site (anchor text)

• Social signals

• Website usability


Both humans and technology try to validate your labeling

system and your link relationships (navigation).

HOME PAGES



Items to include on your home page:

• Keyword-rich text (when possible)

• At least one spider-friendly navigation scheme

• Links to the most important sections on your site

• Visible link to a site map or site index

Site map vs. sitemap

Human vs. technology

• Let’s look at some examples….



Back to bad habits - splash pages:

In summary:

Searchers

• Easy to read

• Easy to navigate

• Easy to find

• Consistent in layout, design, and labeling

• Quick to download

Search engines

• Keywords and labels

• Navigation and accessibility (architecture and design)

• High-quality link development and social signals

• Accommodate searcher behaviors



Final thought:

Don’t design for search engines. Design for

people who use search engines.


Questions?

Shari Thurow, Founder and SEO DirectorOmni Marketing Interactive

[email protected]