March 2, 2015
SEARCH ENGINE FRIENDLY WEB DESIGN
Shari Thurow
Founder & SEO Director Omni Marketing Interactive
@sharithurow
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
About me:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
• SEO and the user experience
• What is search-engine friendly?
• Universal Rules of Web Design
• SEO Principles
• Home pages
Session goals:
searchmarketingexpo.com @sharithurow #SMX #14D
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.
searchmarketingexpo.com @sharithurow #SMX #14D
SEO AND THE USER EXPERIENCE
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
UX Hierarchy of Needs @Uxhow on Twitter
searchmarketingexpo.com @sharithurow #SMX #14D
“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/
searchmarketingexpo.com @sharithurow #SMX #14D
“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 Ambient Findability and Search Patterns
searchmarketingexpo.com @sharithurow #SMX #14D
findable
desirable
useful
valuable
accessible
credible
usable Peter Morville’s User
Experience Honeycomb
findable
searchmarketingexpo.com @sharithurow #SMX #14D
Browsing:
searchmarketingexpo.com @sharithurow #SMX #14D
Search Keyword(s) Results
(SERP)
Searching:
searchmarketingexpo.com @sharithurow #SMX #14D
Asking:
searchmarketingexpo.com @sharithurow #SMX #14D
findable
Search engine advertising
Search engine optimization
Social media optimization
Z BROWSE
Z
SEARCH
Z
ASK
searchmarketingexpo.com @sharithurow #SMX #14D
WHAT IS SEARCH ENGINE FRIENDLY?
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
spam
technology-centered design
Search-engine optimization is NOT… …optimizing for search engines only.
searchmarketingexpo.com @sharithurow #SMX #14D
“In the long run, technology-centered design is generally counterproductive to project and business goals.” -Kalbach, J. (2007). Designing Web Navigation. O’Reilly.
searchmarketingexpo.com @sharithurow #SMX #14D
technology-centered design
Search-engine optimization is… …optimizing a website for people who use search engines.
user- centered design
SEARCH-ENGINE
FRIENDLY DESIGN
searchmarketingexpo.com @sharithurow #SMX #14D
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.
In other words, it is a website that is created for users and accommodates search engines.
1
___________
2
_____________________
searchmarketingexpo.com @sharithurow #SMX #14D
• Primary: • Secondary:
Importance of site design:
End users/site visitors/searchers/target audience Crawler-based search engines/technologies Niche and industry-related sites
searchmarketingexpo.com @sharithurow #SMX #14D
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.
searchmarketingexpo.com @sharithurow #SMX #14D
Search rankings depend on:
+ Technical Factors Human Factors
searchmarketingexpo.com @sharithurow #SMX #14D
UNIVERSAL RULES OF WEB DESIGN
searchmarketingexpo.com @sharithurow #SMX #14D
1. Easy to read
2. Easy to navigate
3. Easy to find
4. Consistent in layout, design, and labeling
5. Quick to download
5 Universal Rules of Web Design:
searchmarketingexpo.com @sharithurow #SMX #14D
• Techniques & Relevancy Factors http://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418
• https://www.google.com/webmasters/tools/mobile-friendly/
Readability is a ranking factor!
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
ü Legible
ü Readable
ü Scannable
ü Understandable
ü Make sense in search listings
Easy to read:
searchmarketingexpo.com @sharithurow #SMX #14D
Legibility is how well users see the letters.
Readability refers to the ease with which a user can scan over paragraphs of type.
searchmarketingexpo.com @sharithurow #SMX #14D
Users with limited vision
Reading on tiny screens
Glare and poor lighting
Low quality monitors
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
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.
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.
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.
searchmarketingexpo.com @sharithurow #SMX #14D
Site navigation - easy to scan:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
ü Distinguishable
ü Scannable
ü Clickable/tappable
ü Predictable
ü Consistent
Easy to navigate:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
"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, Pearson Education.
searchmarketingexpo.com @sharithurow #SMX #14D
“Small children like minesweeping (passing the mouse around the screen to see what's hidden), but teenagers don't like it, and adults hate it.” -Dr. Jakob Nielsen, Usability Guru and author http://www.nngroup.com/articles/top-10-ia-mistakes/
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
Inceptor’s pyramid:
searchmarketingexpo.com @sharithurow #SMX #14D
• Where am I? (orientation)
• Am I in the right place? (arrival)
• Where can I go? (information scent)
Purpose of site navigation:
searchmarketingexpo.com @sharithurow #SMX #14D
The purpose of site navigation is to enhance website effectiveness to enable task completion for both humans and technology. -adapted from Nielsen Norman Group
searchmarketingexpo.com @sharithurow #SMX #14D
Global Utilities
Contextual
Loca
l
Supplemental
Where am I? Need help?
What’s related to this content?
Wha
t’s n
earb
y?
Site map
searchmarketingexpo.com @sharithurow #SMX #14D
ü Before arriving
ü After arriving
Easy to find:
searchmarketingexpo.com @sharithurow #SMX #14D
Searchers follow information scent:
1
searchmarketingexpo.com @sharithurow #SMX #14D
2
searchmarketingexpo.com @sharithurow #SMX #14D
Another example:
1
searchmarketingexpo.com @sharithurow #SMX #14D
2
searchmarketingexpo.com @sharithurow #SMX #14D
It’s the same with social media:
1
searchmarketingexpo.com @sharithurow #SMX #14D
2
searchmarketingexpo.com @sharithurow #SMX #14D
• Go directly to the relevant page • Within 7-8 clicks, preferably less, as long as…
After arriving:
searchmarketingexpo.com @sharithurow #SMX #14D
http://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760
searchmarketingexpo.com @sharithurow #SMX #14D
“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, Pearson Education.
searchmarketingexpo.com @sharithurow #SMX #14D
“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, Pearson Education.
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
“…well-designed, easy-to-use navigation is important in establishing credibility, authority, and trust.” -Kalbach, J. (2007). Designing Web Navigation. O’Reilly.
searchmarketingexpo.com @sharithurow #SMX #14D
ü 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
(4) Consistent in layout, design, and labeling:
searchmarketingexpo.com @sharithurow #SMX #14D
ü Actual download time – machine speed
ü Perceived download time – human speed
(5) Quick to download:
searchmarketingexpo.com @sharithurow #SMX #14D
• 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
Download time depends on context:
searchmarketingexpo.com @sharithurow #SMX #14D
1. Easy to read
2. Easy to navigate
3. Easy to find
4. Consistent in layout, design, and labeling
5. Quick to download
To remember:
searchmarketingexpo.com @sharithurow #SMX #14D
SEO PRINCIPLES
searchmarketingexpo.com @sharithurow #SMX #14D
• Index text
• Follow links
• Measure popularity
• Accommodate searcher goals and behaviors
Search engines:
} All crawlers
searchmarketingexpo.com @sharithurow #SMX #14D
• Index text
• Follow links
• Measure popularity
• Accommodate searcher goals and behaviors
Search engines:
} Ranking factor
searchmarketingexpo.com @sharithurow #SMX #14D
Bring in a search engine optimization specialist during the design, redesign, wireframe, or template stage, NOT after the site has already been created.
searchmarketingexpo.com @sharithurow #SMX #14D
Keywords & Labels
Navigation & Accessibility
Links & Social Signals
Searcher Goals & Behaviors
} • Architecture
• Design
• Format
searchmarketingexpo.com @sharithurow #SMX #14D
Informational
(What can I know?)
Navigational
(Where can I go?)
Transactional
(What can I do?)
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
All components are essential:
searchmarketingexpo.com @sharithurow #SMX #14D
KEYWORDS & LABELS
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
What kind of text?
searchmarketingexpo.com @sharithurow #SMX #14D
ü Content ü Navigation
ü Document
Types of labeling systems:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
A URL is a label:
searchmarketingexpo.com @sharithurow #SMX #14D
• Short but descriptive.
• Use natural word order (help-desk-software vs. help-software-desk)
• Use hyphens instead of underscores.
• All lowercase.
• 2 or less parameters (ideally, no-parameter URLs are best).
• No “funky” characters in URL (?, &, %, =, etc.)
• No trailing forward slashes at the end of a URL.
• Eliminate or minimize stop words.
• Proper file format.
URL guidelines:
searchmarketingexpo.com @sharithurow #SMX #14D
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.
searchmarketingexpo.com @sharithurow #SMX #14D
Location-based breadcrumbs:
Home > Category > Subcategory > Content Heading
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
Keywords and labels:
searchmarketingexpo.com @sharithurow #SMX #14D
NAVIGATION & ACCESSIBILITY
searchmarketingexpo.com @sharithurow #SMX #14D
“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.
searchmarketingexpo.com @sharithurow #SMX #14D
• Text links
• Navigation buttons
• Image maps
• Menus
• Flash
Types of navigation schemes:
searchmarketingexpo.com @sharithurow #SMX #14D
23 22 15 26
Percentage of Menu Errors
searchmarketingexpo.com @sharithurow #SMX #14D
Responsive menus:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
Hamburger menus:
searchmarketingexpo.com @sharithurow #SMX #14D
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.
Principle of choices:
searchmarketingexpo.com @sharithurow #SMX #14D
- “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.
searchmarketingexpo.com @sharithurow #SMX #14D
If a site navigation scheme is not search-engine friendly, should you avoid using it in your site design?
Question:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
Always have at least two forms of navigation on
your website: one for your target audience and one
for the search engines.
Optimization tip:
searchmarketingexpo.com @sharithurow #SMX #14D
• Navigation scheme
• Location-based breadcrumb links
• Embedded text links
• Site map (wayfinder) or site index
Types of text links:
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
Embedded text link overkill: 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.
searchmarketingexpo.com @sharithurow #SMX #14D
Optimization tip:
searchmarketingexpo.com @sharithurow #SMX #14D
Global Utilities
Contextual
Loca
l
Supplemental
Where am I? Need help?
What’s related to this content?
Wha
t’s n
earb
y?
Site map
searchmarketingexpo.com @sharithurow #SMX #14D
Parent
Child
Sibling Sibling
Types of contextual links:
searchmarketingexpo.com @sharithurow #SMX #14D
Grandchild
Grandparent
searchmarketingexpo.com @sharithurow #SMX #14D
Cousin Cousin
searchmarketingexpo.com @sharithurow #SMX #14D
Uncle
Niece
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
• 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.
• Usability counts!
Navigation and accessibility:
searchmarketingexpo.com @sharithurow #SMX #14D
LINK DEVELOPMENT & SOCIAL SIGNALS
searchmarketingexpo.com @sharithurow #SMX #14D
• 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
searchmarketingexpo.com @sharithurow #SMX #14D
• Signal = maybe
• Directive = absolutely
• One goal is to get more followers and building an audience (qualitative)
• Links can be a by-product of a great social campaign
Social media = signal:
searchmarketingexpo.com @sharithurow #SMX #14D
• Substantial and unique content
• How other sites are linked to your site (anchor text)
• Social signals
• Website usability
Factors that affect link earning:
searchmarketingexpo.com @sharithurow #SMX #14D
• Reference • FAQs, Q&As • Coupons • Articles • Checklists • Fact sheets • Guides
Digital assets:
• Quizzes • Comparisons • White papers • Tools • Infographics • Slideshows • Videos
• Audio files • Spreadsheets • Presentations • Links & resources
searchmarketingexpo.com @sharithurow #SMX #14D
HOME PAGES
searchmarketingexpo.com @sharithurow #SMX #14D
ü 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
Items to include on your home page:
searchmarketingexpo.com @sharithurow #SMX #14D
• Screen real estate
• Number of items
• Animation speed
• Ability to start/stop
searchmarketingexpo.com @sharithurow #SMX #14D
searchmarketingexpo.com @sharithurow #SMX #14D
• Easy to read • Easy to navigate • Easy to find • Consistent in layout,
design, and labeling • Quick to download
In summary
• Keywords and labels • Navigation and accessibility
(architecture and design) • High-quality link
development • Accommodate searcher
behaviors
Searchers Search engines
searchmarketingexpo.com @sharithurow #SMX #14D
Shari Thurow, Founder and SEO Director Omni Marketing Interactive
Questions?
searchmarketingexpo.com @sharithurow #SMX #14D