How To Design Search Engine Friendly Websites by Shari Thurow

Designing Search Engine Friendly
Websites
By
Shari Thurow, Founder and SEO Director
Omni Marketing Interactive
Copyright 2007-2013. All rights reserved.

Designing Search-Engine Friendly Websites Copyright 1997-2013. 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.
• SEO professional since 1995, pioneering search-engine friendly
website design.
• Web designer/developer since 1995.
• Website usability and UX professional since 2002.

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

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
 Text component
 Link component
» Navigation schemes
» Page interlinking
 Popularity component
 (Behavior component)
• Home pages
Copyright 2007-2013. All rights reserved.Designing Search-Engine Friendly Websites

Copyright ©1997-2013. 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.

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
Search
Engines
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.

Importance of site design:
• Primary: End users/site visitors/searchers/target audience
• Secondary: Crawler-based search engines
Niche directories and other industry-related sites
How words, graphic images, and multimedia files are 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
1. Easy to read
2. Easy to navigate
3. Easy to find
4. Consistent in layout, design,
and labeling
5. Quick to download

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.

Multiple
devices
Desktop Notebook
MobileTablet

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

Easy to
navigate
• Findable
• Clickable
• Scannable
• Distinguishable

Answers the
questions
• Where am I?
• Where can I go?
• How can I get there?

“Findability Precedes Usability
In the Alphabet and on the Web
You 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:

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

“…well-designed, easy-to-use
navigation is important in establishing
credibility, authority, and trust.”
--Kalbach, J. (2007). Designing Web Navigation, p. 17.

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

Quick to download:
• Actual download time
• Perceived download time
 If people cannot find what they want on a site, they will
regard the download time as slow.1
(1) Perfetti, C. and and Landesman, L. (2001) “The Truth About Download Time.” Available at: http://www.uie.com/articles/download_time/.

“… 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 site
abandoning, 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

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):
1. Text component (index text)
Using words and phrases that your target
audience types into search queries.
2. Link component (follow links)
Giving search engine spiders easy, user-friendly
access to content through site and page
architecture.
3. Popularity component (measure popularity)
Number and quality of objective, 3rd-party links
pointing to a URL, commonly referred
to as link development.
4. Behavior component
Accommodating searcher goals and behaviors.
Keywords
and labels
Architecture
and design
Link
development
& social
Searcher goals
and 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
and labels
Architecture
and design
Link
development
& social
Searcher goals
and behaviors

Text component

What kind of text?
• The words your target audience is typing into search queries are called keywords
or query words
• When visitors view a web page, does the content appear to be focused? How to
make your content appear focused…
 Title tag, headings, contextual links, cross links
 Introductory and conclusion paragraphs
 Product/service descriptions
 Graphic image (with alternative text)
• Visible body text
Should not have perform any type of action to view the most important text of an
individual web page in a browser

Primary text
• Title tags
• Visible <body> copy
• Text at the top of a web page
• In and around hypertext links
Secondary text
• Meta-tag content
• Alternative text
• Domain and file names
ALL search engines read and use to
determine relevancy.
SOME search engines read and use to
determine relevancy.

Types of labeling systems:
Content
Navigation
Document

Some labels are hilarious:

Text component summary:
• 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.

Link component

Types of site navigation schemes:
• Text links
• Navigation buttons
• Image maps
• Menus (form and DHTML)
• Flash

Menu errors:
23 22 15 26
Percentage

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/

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.

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:

Information(al) page characteristics:
• Contains information your target audience is interested in.
• Do not contain a lot of sales hype but rather factual information.
• Are spider-friendly web pages.
• Often have a simpler layout.
• Visually match the rest of your website.

Page interlinking:
• In addition to a spider-friendly navigation scheme and a (wayfinder) site
map, all sites should have related, relevant page interlinks.
Sibling SiblingParent
Child

Grandchild
Grandparent

CousinCousin

Interlinking examples:
Category page Product page

Interlinking examples (cont’d):

Be careful with companies that claim to build pages:
• Doorway pages/domains
• Hallway pages
• Envelope pages
• Mini or micro sites
• Satellite sites
• Attraction pages
• Magnet sites
• PageRank sculpting
• Channel pages
• Shadow domains
• Theme-based sites/pages
• Advertising pages
• Instant link popularity
• Permanent positions
• Guaranteed positions
• Country-specific engines

Do NOT assume that responsive
design is 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:

Link component summary:
• Always use at least two forms of navigation on your website: one for your
site visitors and one for search engines.
• Know when and how to use text links effectively.
• Don’t assume…test.
• Try to make the URLs to your most popular pages as spider-friendly as
possible.
• Responsive design and faceted classification…don’t assume!
• Usability counts!

Popularity component

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
 Ease of use
 Predictability of navigation

Home pages

Splash pages:
• What is a splash page?
• Why don’t search engines like splash pages?
• Why don’t users/searchers like splash pages?
• Let’s look at some examples….

Items to include on your home page:
• Keyword-rich text
• At least one spider-friendly navigation scheme
• Links to the most important sections on your site
• Visible link to a site map

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
 Site and page architecture
 High-quality link development
and social signals
 Accommodate searcher
behaviors

• Awareness
• Knowledge
• Expertise
Designing Search-Engine Friendly Websites

Don’t only design for search engines.

Design for people who use search engines.
SEARCH-
ENGINE
FRIENDLY
DESIGN

Questions?
Shari Thurow, Founder and SEO Director
Omni Marketing Interactive
sthurow@search-usability.com

How To Design Search Engine Friendly Websites by Shari Thurow

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Ähnlich wie How To Design Search Engine Friendly Websites by Shari Thurow

Ähnlich wie How To Design Search Engine Friendly Websites by Shari Thurow (20)

Mehr von Search Marketing Expo - SMX

Mehr von Search Marketing Expo - SMX (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

How To Design Search Engine Friendly Websites by Shari Thurow