Upload
search-marketing-expo-smx
View
1.824
Download
3
Embed Size (px)
Citation preview
#SMX #14D @sharithurow
Designing for people who search™
SEARCH-ENGINE FRIENDLY WEB DESIGN
#SMX #14D @sharithurow
• 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:
#SMX #14D @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
#SMX #14D @sharithurow
• SEO and User Experience
• What is Search-Engine Friendly?
• Universal Rules of Web Design
• 4 SEO Principles
• Home Pages
• Questions and Answers
Session goals:
#SMX #14D @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.
#SMX #14D @sharithurow
SEO and User Experience (UX)
#SMX #14D @sharithurow
#SMX #14D @sharithurow
UX Hierarchy of Needs
@Uxhow on Twitter
#SMX #14D @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/
#SMX #14D @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 Ambient Findability and Search Patterns
#SMX #14D @sharithurow
findable
desirable
useful
valuable
accessible
credible
usable
Peter Morville’s User
Experience Honeycomb
findable
#SMX #14D @sharithurow
Browsing:
#SMX #14D @sharithurow
SearchKeyword(s)Results
(SERP)
Searching:
#SMX #14D @sharithurow
Asking:
#SMX #14D @sharithurow
ALGORITHM
#SMX #14D @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.”
#SMX #14D @sharithurow
What is Search-Engine Friendly?
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
spam
technology-centered
design
Search-engine optimization is NOT…
…optimizing a website for search engines only.
#SMX #14D @sharithurow
technology-centered
design
Search-engine optimization is…
…optimizing a website for people who use search engines.
user-
centered
design
SEARCH-
ENGINE
FRIENDLY
DESIGN
#SMX #14D @sharithurow
Search-engine friendly design is…
…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
but also accommodates search engines.
1
2
#SMX #14D @sharithurow
• Primary: End users/site visitors/searchers/target audience
• Secondary: Crawler-based search engines/technologies
Niche and industry-related sites
Importance of site design:
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.
#SMX #14D @sharithurow
Universal Rules of Web Design
#SMX #14D @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 Web Design:
#SMX #14D @sharithurow
Legible
Readable
Scannable
Understandable
Text makes sense in search listings
1. Easy to read:
#SMX #14D @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!
#SMX #14D @sharithurow
Google’s Mobile Friendly Test:
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.
https://www.google.com/webmasters/tools/mobile-friendly/
#SMX #14D @sharithurow
Legibility
is how well users
see the letters.
Readability
refers to the ease with
which a user can scan
over paragraphs of type.
#SMX #14D @sharithurow
• Readers with limited vision
• Tiny screens
• Glare and poor lighting
• Low-quality monitors
Be aware of:
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @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.
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.
#SMX #14D @sharithurow
How about this navigation footer?
#SMX #14D @sharithurow
#SMX #14D @sharithurow
Distinguishable
Scannable
Clickable/tappable
Predictable
Consistent
2. Easy to navigate:
#SMX #14D @sharithurow
Google’s Mobile Friendly Test:
https://www.google.com/webmasters/tools/mobile-friendly/
#SMX #14D @sharithurow
Is this easy to navigate? Why or why not?
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
#SMX #14D @sharithurow
#SMX #14D @sharithurow
Calls to action:
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.
#SMX #14D @sharithurow
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.
#SMX #14D @sharithurow
“Small children like minesweeping (passing the mouse around the screen to see what's
hidden)…
#SMX #14D @sharithurow
“…but teenagers don’t like it…”
#SMX #14D @sharithurow
“…and adults hate it.”
Jakob Nielsen, http://www.nngroup.com/articles/top-10-ia-mistakes/
#SMX #14D @sharithurow
• 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:
#SMX #14D @sharithurow
• Where am I? (orientation/placemaking)
• Am I in the right place? (arrival)
• Where can I go? (information scent)
Purpose of site navigation:
#SMX #14D @sharithurow
The purpose of site navigation is to enhance website effectiveness to
enable task completion for both humans and technology.
-adapted from Nielsen Norman Group
#SMX #14D @sharithurow
Consistency in navigation is important for task completion:
#SMX #14D @sharithurow
Before arriving
After arriving
3. Easy to find:
#SMX #14D @sharithurow
Searchers follow an information scent:
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.
1
#SMX #14D @sharithurow
2
#SMX #14D @sharithurow
Another example:
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.
1
#SMX #14D @sharithurow
2
#SMX #14D @sharithurow
It’s the same with social media:
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.
1 2
#SMX #14D @sharithurow
• Go directly to the relevant page
• Within 7-8 clicks, preferably less, as long as…
• Graph available at:
http://www.uie.com/articles/three_click_rule/
• Also see: http://marketingland.com/user-experience-
myth-truth-three-click-tap-rule-104760
After arriving:
#SMX #14D @sharithurow
Content should be accessible within 3 clicks or
less from the home page.
#SMX #14D @sharithurow
If this rule were true:
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.
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
Site Map ContentContent
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
___ ___ ___
Home Site Map Content
#SMX #14D @sharithurow
• Based on 25M sessions across the web, the
most viewed area of the page is just above the
fold, at about 550 pixels, with just over 80%
viewership.
• See:
http://blog.chartbeat.com/2013/08/12/scroll-
behavior-across-the-web/
To scroll or not to scroll:
#SMX #14D @sharithurow
• There is No Fold
http://www.lukew.com/ff/entry.asp?1946
People don’t scroll when:
#SMX #14D @sharithurow
Before: After:
#SMX #14D @sharithurow
…well-designed, easy-to-use navigation is important in establishing
credibility, authority, and trust.
-Kalbach, J. (2007). Designing Web Navigation. O’Reilly.
#SMX #14D @sharithurow
4. Consistency and clarity in design, layout, and labeling:
Communicates trust, reliability, and dependability
Contributes to cohesive brand and user experience
Contributes to ease & predictability of navigation (information scent)
Increases user satisfaction
Leads to more rankings…and conversions
#SMX #14D @sharithurow
…consistent interfaces can reduce errors and task completion times. It
can also reduce learning curves, and increase user satisfaction.
- http://guidelines.usability.gov/guidelines/109
#SMX #14D @sharithurow
The more users' expectations prove right, the more they will feel in
control of the system and the more they will like it.
Consistency is one of the most powerful usability principles: when things
always behave the same, users don't have to worry about what will
happen.
- http://www.nngroup.com/articles/top-10-mistakes-web-design/
#SMX #14D @sharithurow
5. Quick to download:
Actual download time – machine speed
Perceived download time – human speed
#SMX #14D @sharithurow
• 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:
“Men prioritize download speed.”
“Women prioritize navigation.”
--Whitenton, K. (2010). Principles of Interface Design, p. 59.
#SMX #14D @sharithurow
75
“… 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.
#SMX #14D @sharithurow
“If people cannot find what they want on a site, they will regard the
download time as slow.”
Perfetti, C. and Landesman, L. (2001). “The Truth About Download Time.”
At: http://www.uie.com/articles/download_time/
#SMX #14D @sharithurow
What Google measures:
#SMX #14D @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
To remember:
5 Universal Rules of Web Design
#SMX #14D @sharithurow
SEO Principles
#SMX #14D @sharithurow
1. Index text
2. Follow links
3. Measure popularity
4. Accommodate searcher goals and behaviors
Search engines:
} All crawlers
#SMX #14D @sharithurow
1. Index text
2. Follow links
3. Measure popularity
4. Accommodate searcher goals and behaviors
Search engines:
} Ranking factor
#SMX #14D @sharithurow
1. Index Text (Keywords & Labels)
#SMX #14D @sharithurow
• 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?
#SMX #14D @sharithurow
• Content
• Navigation
• Document
Types of labels:
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @sharithurow
#SMX #14D @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_%20m
y00164_im01229_mcdc7_cataracts2_jpg.png
#SMX #14D @sharithurow
• 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:
#SMX #14D @sharithurow
For text-based documents:
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 (descriptive)
ALL search engines read and use to
determine relevancy.
SOME search engines read and use to
determine relevancy.
#SMX #14D @sharithurow
Keywords are dead.
#SMX #14D @sharithurow
• 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.
Hint: Use the 5-Second Usability Test
Keywords and labels summary:
#SMX #14D @sharithurow
2. Follow Links (Navigation & Accessibility)
#SMX #14D @sharithurow
• 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, navigation matters!
• Search engines and searchers look at:
Information architecture
Site navigation (global, local, contextual, supplemental)
URL structure
Search engines follow links:
#SMX #14D @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.
#SMX #14D @sharithurow
Types of site navigation:
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.
Global
Utilities
Contextual
Loc
al
Supplemental
Where am I?
Need help?
What’s related tothis content?
What’s
nearb
y?
Site map
#SMX #14D @sharithurow
• Text links
• Navigation buttons
• Image maps
• Menus
Dropdown
Flyout
Expanding/collapsing
Types of site navigation formats:
• Flash
• Carousels
• Sliders
• Parallax
#SMX #14D @sharithurow
Responsive design menus:
#SMX #14D @sharithurow
Menus as global and local navigation:
#SMX #14D @sharithurow
Menus as global and local navigation:
#SMX #14D @sharithurow
Hamburger menus:
#SMX #14D @sharithurow
Too much navigation, and our audience is overwhelmed; too little, and
they are lost.
Adapted from Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry
Minds, Inc.
#SMX #14D @sharithurow
Principle 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.
#SMX #14D @sharithurow
Challenge of multi-device design:
#SMX #14D @sharithurow
#SMX #14D @sharithurow
Scrolling contextual navigation:
#SMX #14D @sharithurow
If a site navigation scheme is not search-engine friendly,
you should avoid using it in your site design.
#SMX #14D @sharithurow
#SMX #14D @sharithurow
• Formal navigation (global + local)
• Location-based breadcrumb links
• “Inline” or embedded text links
• Site map (wayfinder) or site index
Types of text-based navigation:
#SMX #14D @sharithurow
For details, please read:
http://marketingland.com/breadcrumb-links-good-user-
experience-yes-97848
Parent
Child
#SMX #14D @sharithurow
Inline or embedded text links provide context and scent:
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/
#SMX #14D @sharithurow
Before:
#SMX #14D @sharithurow
After:
#SMX #14D @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.
#SMX #14D @sharithurow
Example #1 of contextual links:
Sibling Sibling
Cousin Cousin
#SMX #14D @sharithurow
Example #2 of contextual links:
#SMX #14D @sharithurow
Example #3 of contextual links:
#SMX #14D @sharithurow
• 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!
Navigation and accessibility summary:
#SMX #14D @sharithurow
3. Measure Popularity (Validation)
#SMX #14D @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
#SMX #14D @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):
#SMX #14D @sharithurow
• Substantial and unique content (is content linkworthy?)
• How other sites are linked to your site (anchor text)
• Social signals
• Website usability
Organization of content assets
Labels
Placement to support task completion
Factors that affect link development (earning):
#SMX #14D @sharithurow
• Reference
• FAQs, Q&As
• Coupons
• Articles
• Checklists
• Fact sheets
• Guides
Types of digital content assets:
• Quizzes
• Comparisons
• White papers
• Tools
• Infographics
• Slideshows
• Videos
• Audio files
• Spreadsheets
• Presentations
• Links & resources
#SMX #14D @sharithurow
• Quality trumps quantity.
• Link development = directive. Social media = signal.
• Your website should contain user-friendly digital assets.
• Learn to optimize each digital asset!
Site architecture & navigation
Labels
Link prospecting and outreach
Social sharing
Link development summary:
#SMX #14D @sharithurow
4. Accommodate Searcher Behaviors
#SMX #14D @sharithurow
• 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.
Remember Go, Know, Do:
#SMX #14D @sharithurow
Home Pages
#SMX #14D @sharithurow
• 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
• Recommended reading:
http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/
Items that should be on your home page:
#SMX #14D @sharithurow
• Easy to read
• Easy to navigate
• Easy to find
• Consistent and clear 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
For searchers: For search engines:
#SMX #14D @sharithurow
From one of my favorite usability books:
Reiss, E. (2012). Usable Usability: Simple Steps for
Making Stuff Better. John Wiley & Sons.
#SMX #14D @sharithurow
Content is King. Context is the Kingdom.
#SMX #14D @sharithurow
Remember:
SEO is optimizing for people who use search engines.
#SMX #14D @sharithurow
Questions?
Shari Thurow, Founder and SEO Director
Omni Marketing Interactive
This presentation is dedicated in loving
memory to a dear friend and colleague,
Dana Lookadoo.
www.danasfund.org
#SMX #14D @sharithurow
THANK YOU!
SEE YOU @SMX WEST
SAN JOSE, CA
MARCH 1-3, 2016