how to design search engine friendly websites by shari thurow
DESCRIPTION
From the SMX East 2014 Conference in New York City, NY. SESSION: Search Engine Friendly Web Design . PRESENTATION: How To Design Search Engine Friendly Websites by Shari Thurow - Given by Shari Thurow, @ShariThurow, Founder & SEO Director - Omni Marketing Interactive. #SMX #14CTRANSCRIPT
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.
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.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Copyright 1997-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Pop quiz:
Are these pages search-engine friendly? Why or why not?
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Museum site:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
A restaurant site:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Another restaurant site:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Mayo Clinic:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Search-engine friendly design is NOT…
…a design created primarily for obtaining top search engine
positions.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
In other words, search-engine friendly design is not:
spam
SearchEngines
technology-centered
design
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Search engine optimization is….
SEARCH-
ENGINE
FRIENDLY
DESIGN
technology-centered
design
user-centered
design
…optimizing a website for people who use search engines.
Copyright ©1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
5 UNIVERSAL RULES OF WEB DESIGN
Designing Search-Engine Friendly Websites
Copyright 1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
(1) Easy to read:
Legible
Scannable
Understandable
Make sense in search listings
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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?
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“Findability Precedes UsabilityIn the Alphabet and on the WebYou Can’t Use What You Can’t Find”
-- Morville, P. (2005). Ambient Findability, p. 111.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Is this site navigation easy to use?
Copyright ©1997-2014. All rights reserved.
“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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Which link should you click on?
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Searchers follow an information scent:
1
2
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Another example:
1
2
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
It’s the same with social media:
1
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
2
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
3
After arriving:
• Go directly to the relevant page
• Within 7-8 clicks, preferably less, as long as…
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Porter, J. (2003). “Testing the Three-Click Rule.” Available at http://www.uie.com/articles/three_click_rule/
Copyright ©1997-2014. All rights reserved.
“People don’t mind clicking through multiple pages as long as each click brings them closer to [their] desired content.”
--Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, p. 32.
Copyright ©1997-2014. All rights reserved.
“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.”
--Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, p. 102.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“When people can’t find what they need, they often assume that the information isn’t available there. In frustration, they may go elsewhere.”
--Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, p. 172.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
People commonly use site search when…
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“…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.
Copyright ©1997-2014. All rights reserved.
“…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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Be consistent with communicating ‘aboutness’ to both
humans and technology.
(5) Quick to download:
Actual download time – machine speed
Perceived download time – human speed
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“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.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
http://developers.google.com/speed/pagespeed/insights/
Copyright ©1997-2014. All rights reserved.
“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/.
Copyright ©1997-2014. All rights reserved.
“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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
OPTIMIZATION PRINCIPLES
Designing Search-Engine Friendly Websites
Copyright 1997-2014. All rights reserved.
Search engines:
• Index text
• Follow links
• Validate citations
• Accommodate searcher goals and behaviors
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
} All crawlers
Search engines:
• Index text
• Follow links
• Validate citations
• Accommodate searcher goals and behaviors
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
} Ranking factor
Search engines:
• Index text
• Follow links
• Validate citations
• Accommodate searcher goals and behaviors
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Bring in a search engine optimization specialist during the design,
redesign, wireframe, or template stage, NOT after the site has
already been created.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Types of labeling systems:
• Document labels
• Navigation labels
• Content labels
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Labeling example:
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
Navigation & Accessibility
Copyright ©1997-2014. All rights reserved.
“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.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Remember Inceptor’s Pyramid:
Types of site navigation schemes:
• Text links
• Navigation buttons
• Image maps
• Menus
• Flash
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“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.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
These menus tested well:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Question:
If a site navigation scheme is not search-engine friendly, should you avoid
using it in your site design?
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
“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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Multiple text links:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Embedded text link recommendations:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Let’s look at some examples….
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Interlinking example #1:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Interlinking example #2:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Interlinking example #3:
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Interlinking example #4:
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
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!
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Copyright ©1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
} 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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Factors that affect link development:
• Substantial and unique content
• How other sites are linked to your site (anchor text)
• Social signals
• Website usability
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Both humans and technology try to validate your labeling
system and your link relationships (navigation).
HOME PAGES
Designing Search-Engine Friendly Websites
Copyright 1997-2014. All rights reserved.
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….
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
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
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Designing Search-Engine Friendly Websites Copyright 1997-2014. All rights reserved.
Final thought:
Don’t design for search engines. Design for
people who use search engines.
Designing Search-Engine Friendly Websites Copyright 2007-2014. All rights reserved.
Questions?
Shari Thurow, Founder and SEO DirectorOmni Marketing Interactive