search engine friendly web design - how to design search engine friendly websites

Designing Search Engine Friendly Websites

ByShari Thurow, Founder and SEO Director

Omni Marketing Interactive

Copyright 1997-2014. All rights reserved.

About Shari Thurow:

• 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.

INTRODUCTION

Designing Search-Engine Friendly Websites



usability

findability

responsive design

user experience

dynamic serving

SEOinformation architecture

technical architecture structured data

entity searchalgorithms

microformats

mobile

social media searcher UX

Put these 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

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


Facets of the searcher experience:

desirable

useful

valuable

accessible

credible

usable

findable

desirable

useful

valuable

accessible

credible

usable

findable

http://searchengineland.com/findability-seo-and-the-searcher-experience-61038


Humans and technology find content via:

Adapted from diagram in Morville and Callender’s Search Patterns.

Search

(crawl paths)

Ask

(links and social)

Browse

(navigation)

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 (SEO) essentials Text component

Link component» Navigation schemes

» Page interlinking

Popularity component

(Behavior component)

• Home pages

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

Copyright ©1997-2014. All rights reserved.

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.

WHAT IS SEARCH-ENGINE FRIENDLY

DESIGN?




Are these pages search-engine friendly?


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


“In the long run, technology-centered design is generally counterproductive to project and business goals.”

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


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.

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


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.

5 RULES OF WEB DESIGN



5 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



Is this text easy to read? …to scan?

Search Engine Optimization is an important part of any search engine marketing initiative. Some people believe that submitting the site to search engines alone is sufficient in getting top-10 rankings. This is not true. Search engine submission only announces your site's existence to the search engines. To get a good search engine ranking, it is important that you carry out title tag optimization, meta tags optimization, and anchor text optimization of your website amongst other SEO techniques. You'll need to optimize the visible text of your site through SEO copywriting after extensive keyword phrase search. It is also important to boost your Google PageRank in order to get a good website ranking. You can increase PageRank of your site by building your site's link popularity through a link building campaign. A link exchange campaign with good industry relevant sites is the simplest way to get several incoming links to promotion. Remember, search engine positioning is a powerful media for your website promotion. While the above example seems like overkill, this is just to illustrate how you can accommodate your important keyword phrases by carefully rewording the text of your web pages. If you feel that the standard blue, underlined hyperlinks appear ugly on your website, then you can reformat its HTML markup code to change color of the text and get rid of the underline without losing the power of the anchor texts.




Mobile users read:

“Mobile users, moreover, are not just checking headlines on their devices…. Many also are reading longer news stories - 73% of adults who consume news on their tablet read in-depth articles at least sometimes, including 19% who do so daily. Fully 61% of smartphone news consumers at least sometimes read longer stories, 11% regularly.”

http://www.journalism.org/analysis_report/future_mobile_news

(2) Easy to navigate:

• Findable

• Clickable

• Scannable

• Distinguishable


Purpose of navigation:

• Where am I?

• Where can I go?

• Am I in the right place?


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.



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

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


“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.

Easy to find:

• Before arriving

• After arriving



Searchers follow an information scent:

1

2



Another example:

1


It’s the same with social media:

1


2

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.”



Another example:


“…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


(5) Quick to download:

• Actual download time

• Perceived download time



“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.


“… perceptions of download waiting are found to be more reliable than actual waits in predicting web site abandoning.”

“…delays near the start of the download are perceived as longer than later in the process, and time pressure worsens the effect of download waiting at earlier stages of delay.”

--Dabholkar, P. and Sheng, X. (2008). Perceptions of download delays: relation to actual waits, web siteabandoning, and stage of delay. The Service Industries Journal 28 (10), 1415-1429.

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 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

• Measure popularity

• Accommodate searcher goals and behaviors


} All crawlers

Bring in a search engine optimization specialist during the design,

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

already been created.


Principles of SEO (present):

Keywords& Labels

Navigation &Accessibility

Link Development

& Social Signals

Searcher Goals& Behaviors


Searcher goals:

Navigational Informational Transactional

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:

Content

Navigation

Document


Labeling example #1:


Labeling sample #2:


A URL is a label:

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.

• Place your keywords prominently on your pages.

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



Navigation & Access

Types of site navigation schemes:

• Text links

• Navigation buttons

• Image maps

• Menus

• Flash


“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.


“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.

Mega-menus:

• Lose up to 15%-20% in revenue after deployment

• Occlusion

• Hover in touch screens


Spool, J. (2011). “6 Epic Forces Battling Your Mega Menus.” Available at http://www.uie.com/articles/mega_menus/


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?


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.


“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.


Facets of searcher experience:

desirable

useful

valuable

accessible

credible

usable

findable

desirable

useful

valuable

accessible

credible

usable

findable

http://searchengineland.com/findability-seo-and-the-searcher-experience-61038

Types of text links:

• Navigation scheme

• Locational breadcrumb links

• Embedded text links

• Site map (wayfinder) or site index



Embedded text link overkill:



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:


Sibling SiblingParent

Child


Grandchild

Grandparent


CousinCousin


Interlinking example #1:


“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.


Responsive designs and blogs are NOT

naturally search-engine friendly.

Some responsive design advantages:

• Content only has to be managed in one location.

• Maintenance can be easier.

• Can save time.

• Google recommended it.


Some responsive design disadvantages:

• Can significantly increase actual download time of website

Images

JavaScript and other workarounds

» More

» Redirects gone amok

Tailored content sometimes necessary for SEO and the best user experience


Actual download time can significantly increase:

• “The problem is large images have large file sizes. Though not every Web browser will display them at full size, they'll all download them at full size.”

• Workarounds are available, such as not loading unnecessary images in the phone version of the site; however, more JavaScript workarounds also means increased download time.


Source: Wroblewski, L. (2011). Why Separate Mobile & Desktop Web Pages?Retrieved at http://www.lukew.com/ff/entry.asp?1390

Javascript presents the same problem:

• “If there's a lot of additional mark-up on the site that needs to be suppressed to deliver the content users want to see, it will slow down the site and possibly deliver the wrong content,” [Bryson Meunier] said.


Sullivan, L. (2012). Mobile SEO Separate From Responsive Web Design.Available at: http://www.mediapost.com/publications/article/170903/mobile-seo-separate-from-responsive-web-design.html


Redirects gone amok:

Navigation and accessibility:

• Always use at least two forms of navigation on your website: one for your site visitors 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!

• Usability counts!



Link Development & Social Signals

What is 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….


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]