From the SMX West Conference in San Jose, California, March 1-3, 2016. SESSION: Search Engine Friendly Web Design. PRESENTATION: Search Engine Friendly Web Design: Designing For People Who Use Search Engines - Given by Shari Thurow, @sharithurow - Omni Marketing Interactive, Founder and SEO Director. #SMX #12D
2. #SMX #12D @sharithurow
§ Founder
and
SEO
Director
at
Omni
Marketing
Interactive.
§ Author
of
Search
Engine
Visibility
and
co-‐author
of
When
Search
Meets
Web
Usability.
§ 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.
§ Information
architect/scientist
since
1989.
Introductions:
3. #SMX #12D @sharithurow
• User
Experience
Professionals
Association
(UXPA)
Board
Member
Formerly
the
Usability
Professionals
Association
• Information
Architecture
Institute
(IAI)
Board
Member
and
Advisory
Board
• ASLIB
Journal
of
Information
Management
Editorial
Advisory
Board
• Bing
Ads
Accredited
Professional
Advisory
Board
4. #SMX #12D @sharithurow
§ SEO
and
User
Experience
(UX)
§ What
is
Search
Engine
Friendly?
§ SEO
Principles
§ Universal
Rules
of
Web
Design
§ Home
Pages
§ Questions
&
Answers
Session Goals:
5. #SMX #12D @sharithurow
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.
8. #SMX #12D @sharithurow
“The
first
law
of
e-‐commerce
is
that
if
users
cannot
find
the
product,
they
cannot
buy
it
either.”
-‐
Dr.
Jakob
Nielsen,
Usability
Guru
and
Author
http://www.nngroup.com/articles/usability-‐101-‐introduction-‐to-‐usability/
9. #SMX #12D @sharithurow
Findability
precedes
usability.
In
the
alphabet
and
on
the
Web.
You
can’t
use
what
you
can't
find.
-‐
Peter
Morville,
Information
Architect
Author
of
Search
Patterns
&
Intertwingled
10. #SMX #12D @sharithurow
Peter Morville’s
User Experience Honeycomb
findable
desirable
useful
valuable
accessible
credible
usable
http://semanticstudios.com/user_experience_design/
findable
15. #SMX #12D @sharithurow
“…
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.”
24. #SMX #12D @sharithurow
…a
user-‐friendly
website
design
that
enables
websites
to
be
easily
found
via
the
crawler-‐based
search
engines,
other
types
of
search
engines,
and
industry-‐related
websites.
In
other
words,
it
is
a
website
that
is
made
for
users
(searchers)
but
also
accommodates
search
engines.
Search engine friendly design is:
1
2
25. #SMX #12D @sharithurow
Importance of website design:
§ Primary:
End
users/site
visitors/searchers/target
audience
§ Secondary:
Crawler-‐based
search
engines/technologies
Niche
and
industry-‐related
sites
26. #SMX #12D @sharithurow
To remember about SEO:
§ SEO
is
optimizing
for
people
who
use
search
engines.
§ How
words
(copy),
graphic
images,
and
multimedia
files
are
labeled,
formatted,
and
placed
on
web
pages
communicates
the
content
that
you
feel
is
important
to
both
search
engines
and
to
site
visitors.
33. #SMX #12D @sharithurow
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.
34. #SMX #12D @sharithurow
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.
40. #SMX #12D @sharithurow
An image’s file name is a label:
http://www.mayoclinic.org/~/media/kcms/gbs/patient
%20consumer/images/2013/11/15/17/37/ds00050_
%20my00164_im01229_mcdc7_cataracts2_jpg.png
41. #SMX #12D @sharithurow
URL (web address) guidelines:
1. Short
but
descriptive.
2. Use
natural
word
order.
3. Use
hyphens
instead
of
underscores.
4. All
lowercase.
5. 2
or
less
parameters
(ideally,
no-‐parameter
URLs
are
best).
6. No
“funky”
characters
in
URL
(?,
&,
%,
=,
etc.)
7. No
trailing
forward
slashes
at
the
end
of
a
URL.
8. Eliminate
or
minimize
stop
words.
9. Proper
file
format.
43. #SMX #12D @sharithurow
Primary text Secondary text
§ Title
tags
§ Visible
<body>
copy
§ Text
at
the
top
of
a
web
page
§ In
and
around
hypertext
links
§ Domain
and
file
names
(accessibility
&
searcher
goals)
For text-based documents:
§ Meta-‐tag
content
§ Alternative
text
§ Domain
and
file
names
(descriptive)
44. #SMX #12D @sharithurow
To remember about keywords, labels, & copywriting:
§ 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
content
appears
focused,
but
don’t
overdo
it.
Hint:
Use
the
5-‐Second
Usability
Test
https://articles.uie.com/five_second_test/
46. #SMX #12D @sharithurow
Peter Morville’s
User Experience Honeycomb
findable
desirable
useful
valuable
accessible
credible
usable
accessible
http://semanticstudios.com/user_experience_design/
47. #SMX #12D @sharithurow
Accessibility:
§ Human
users,
as
well
as
technology,
should
have
user-‐friendly
access
to
your
website’s
content.
– URL
structure
– Website
navigation
§ Websites
should
be
accessible
to
people
with
disabilities
(more
than
10%
of
the
population).
48. #SMX #12D @sharithurow
Search engines follow links:
§ Search
engine
follow
links
from
one
web
document
to
another.
§ How
your
web
documents
link
to
each
other
communicates
(to
both
humans
and
technology)
how
important
you
believe
your
content
is.
§ In
other
words,
site
navigation
matters!
§ Search
engines
and
searchers
look
at:
– Information
architecture
– Technical
architecture
– Site
navigation
(global,
local,
contextual,
supplemental)
– URL
structure
50. #SMX #12D @sharithurow
“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.
52. #SMX #12D @sharithurow
Purpose of site navigation:
§ The
purpose
of
site
navigation
is
to
enable
task
completion
effectively
for
both
human
users
and
technology.
§ Answers
the
questions:
– Where
am
I?
(orientation/placemaking)
– Am
I
in
the
right
place?
(arrival)
– Where
can
I
go?
(information
scent)
– How
can
I
get
there?
56. #SMX #12D @sharithurow
“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.
57. #SMX #12D @sharithurow
Adapted
from
Brown,
D.
(2011).
Principles
of
Information
Architecture.
UIE
Virtual
Seminars
presentation.
Available
at:
https://aycl.uie.com/virtual_seminars/5_simple_principles_to_improve_your_information_architecture
Schwartz,
B.
(2005).
The
Paradox
of
Choice:
Why
More
is
Less.
New
York:
HarperCollins.
Principle of choices:
59. #SMX #12D @sharithurow
Global navigation – fat footers:
§ If
your
website
largely
consists
of
pages
with
short
content,
then
a
fat
footer
is
not
necessary.
§ If
your
website
largely
consists
of
pages
with
long
content,
then
a
fat
footer
is
highly
recommended.
60. #SMX #12D @sharithurow
Search Featured States
Alabama Real Estate
Alaska Real Estate
Arizona Real Estate
View More States
Search Popular Metros
Atlanta Homes for Sale
Chicago Homes for Sale
Dallas Homes for Sale
View More Popular Metros
Search Popular Cities
Atlanta Homes for Sale
Boston Homes for Sale
Charlotte Homes for Sale
View More Popular Cities
Reasons why this is a footer don’t:
61. #SMX #12D @sharithurow
Contextual navigation:
§ Complement
the
existing
navigation
systems
by
adding
flexibility
and
increased
time
on
site.
§ When
used
excessively,
it
can
create
clutter
and
confusion.
§ Let’s
look
at
some
examples….
70. #SMX #12D @sharithurow
Types of text-based navigation:
§ Formal
navigation
(global
+
local)
§ Location-‐based
breadcrumb
links
§ “Inline”
or
embedded
text
links
§ Site
map
or
site
index
(supplemental)
72. #SMX #12D @sharithurow
Spool,
Jared.
(2006).
“Why
Good
Content
Must
Suck:
Designing
for
the
Scent
of
Information.”
Available
at:
https://www.uie.com/brainsparks/2006/09/26/webmaster-‐jam-‐presentation-‐online/
Inline or embedded text links provide context and scent:
75. #SMX #12D @sharithurow
Don’t do this:
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.
76. #SMX #12D @sharithurow
To remember about accessibility & navigation:
§ 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.
– Type/format
– Placement
– Selection
§ Don’t
assume…test.
§ Try
to
make
the
URLs
to
your
most
popular
pages
as
human-‐friendly
and
technology-‐
friendly
as
possible.
§ Usability
counts!
78. #SMX #12D @sharithurow
Peter Morville’s
User Experience Honeycomb
findable
desirable
useful
valuable
accessible
credible
usable
http://semanticstudios.com/user_experience_design/
useful
79. #SMX #12D @sharithurow
§ 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
What is popularity?
}
Link
popularity
80. #SMX #12D @sharithurow
§ Signal
=
maybe
§ Directive
=
absolutely
§ One
goal
is
to
get
more
followers
/
build
an
audience
(qualitative)
§ In
terms
of
SEO,
links
can
be
a
by-‐product
of
great
social
campaigns
Social media optimization (SMO):
81. #SMX #12D @sharithurow
§ Substantial
and
unique
content
(is
content
linkworthy?)
§ How
other
sites
are
linked
to
your
site
(anchor
text)
§ Social
signals
§ Website
usability
– Organization
&
placement
of
content
assets
– Clear
labels
– Placement
to
support
task
completion
Factors that affect link development:
83. #SMX #12D @sharithurow
To remember about link development & SMO:
§ Quality
trumps
quantity.
§ Link
development
=
directive.
Social
media
=
signal.
§ Your
website
should
contain
user-‐friendly
digital
content
assets.
§ Learn
to
optimize
each
digital
asset!
– Site
architecture
&
navigation
– Labels
– Link
prospecting
and
outreach
– Social
sharing
§ Link
development
is
ongoing
(iterative).
85. #SMX #12D @sharithurow
Remember – Go, Know, Do:
§ Go
(Navigational)
Searchers
want
to
go
directly
to
a
website,
or
go
to
a
specific
page
on
a
website.
§ Know
(Informational)
Searchers
want
to
know
or
learn
more
about
a
topic.
§ Do
(Transactional)
Searchers
want
to
do
or
perform
some
web-‐mediated
activity.
87. #SMX #12D @sharithurow
1. Easy
to
read
2. Easy
to
navigate
3. Easy
to
find
4. Consistency
and
clarity
in
layout,
design,
and
labeling
5. Quick
to
download
5 Universal Rules of Website Design:
88. #SMX #12D @sharithurow
§ Legible
§ Readable
§ Scannable
§ Understandable
§ Text
makes
sense
in
search
listings
1. Easy to read:
89. #SMX #12D @sharithurow
§ Techniques
&
Relevancy
Factors
http://searchengineland.com/bing-‐mobile-‐ranking-‐techniques-‐relevancy-‐
factors-‐209418
§ Google
Quality
Guidelines
https://support.google.com/webmasters/answer/66353
Readability is a ranking factor!
91. #SMX #12D @sharithurow
§ Readers
with
limited
vision
§ Tiny
screens
§ Glare
and
poor
lighting
§ Low-‐quality
monitors
Be aware of:
92. #SMX #12D @sharithurow
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.
103. #SMX #12D @sharithurow
If this rule were true:
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
Site
Map
Content
Content
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
Home
Site
Map
Content
104. #SMX #12D @sharithurow
§ Go
directly
to
the
relevant
page
§ Within
7-‐8
clicks,
preferably
less,
as
long
as…
§ Please
see:
– Testing
the
3-‐Click
Rule
http://www.uie.com/articles/three_click_rule/
– User
Experience
Myth
Or
Truth:
The
Three-‐Click
(Or
Tap)
Rule
http://marketingland.com/user-‐experience-‐myth-‐truth-‐
three-‐click-‐tap-‐rule-‐104760
Easy to find after arriving:
106. #SMX #12D @sharithurow
“…well-‐designed,
easy-‐to-‐use
navigation
is
important
in
establishing
credibility,
authority,
and
trust.”
Kalbach,
J.
(2007).
Designing
Web
Navigation.
O’Reilly.
111. #SMX #12D @sharithurow
1. Easy
to
read
2. Easy
to
navigate
3. Easy
to
find
4. Consistency
and
clarity
in
layout,
design,
and
labeling
5. Quick
to
download
5 Universal Rules of Website Design
To remember:
113. #SMX #12D @sharithurow
§ Keyword-‐focused
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
§ Recommended
reading:
http://www.nngroup.com/articles/113-‐design-‐guidelines-‐homepage-‐usability/
Items that should appear on a home page:
114. #SMX #12D @sharithurow
For searchers For search engines
§ Easy
to
read
§ Easy
to
navigate
§ Easy
to
find
§ Consistent
and
clear
in
layout,
design,
and
labeling
§ Quick
to
download
In summary:
§ Keywords
&
labels
§ Accessibility
&
navigation
§ High-‐quality
link
development
§ Accommodate
searcher
goals
&
behaviors