search engine friendly web design: designing for people who use search engines by shari thurow

#SMX #12D @sharithurow

Designing for People Who Use Search Engines

SEARCH ENGINE FRIENDLY WEB

DESIGN


§  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:


•  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


§ SEO and User Experience (UX)

§ What is Search Engine Friendly?

§ SEO Principles

§ Universal Rules of Web Design

§ Home Pages

§ Questions & Answers

Session Goals:


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.


SEO AND USER EXPERIENCE (UX)


UX Hierarchy of Needs @UXHow on Twitter


“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/


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


Peter Morville’s User Experience Honeycomb

findable

desirable

useful

valuable

accessible

credible

usable

http://semanticstudios.com/user_experience_design/

findable


Browse:


Search:

Search Keyword(s) Results

(SERP)


Ask:


ALGORITHM


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


WHAT IS SEARCH-ENGINE FRIENDLY?


Search engine friendly design is NOT… …optimizing a website for search engines only.

spam

technology-centered design


SEARCH-ENGINE

FRIENDLY DESIGN

Search engine friendly design is … …optimizing for people who use search engines.

technology-centered design

user-‐centered design


…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


Importance of website design:

§ Primary: End users/site visitors/searchers/target audience

§ Secondary: Crawler-‐based search engines/technologies Niche and industry-‐related sites


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.


SEO PRINCIPLES


All search engines:

} All crawlers 1.  Index text 2.  Follow links

3.  Measure popularity

4.  Accommodate searcher goals & behaviors


All search engines:

} Ranking factors 1.  Index text 2.  Follow links

3.  Measure popularity

4.  Accommodate searcher goals & behaviors


http://searchengineland.com/seotable

Periodic table of SEO factors:


Let’s simplify this:

Keywords, Content, & Labels

Accessibility & Navigation

Searcher Goals & Behaviors

Link Development & Social Signals


KEYWORDS, CONTENT, & LABELS

SEO Principles


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.


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.


Types of labels:

§ Content

§ Navigation

§ Document


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


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.


Keywords are dead.


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)


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/


ACCESSIBILITY & NAVIGATION

SEO Principles



findable

desirable

useful

valuable

accessible

credible

usable

accessible



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


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


SEO jargon:

Internal links = Site navigation


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


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

Types of website navigation:


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?


Responsive design menus:


Menus as global & local navigation:


Hamburger menus:


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


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:


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.


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:


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


Sibling Sibling

Contextual links example #1:

Cousin Cousin


Supplemental navigation:

§  Site map

§  Site index

§ Guides

§  Site search


Types of website navigation formats:

§  Text links

§ Navigation buttons

§  Image maps

§ Menus

–  Dropdown

–  Flyout

–  Expanding/collapsing

§  Flash

§  Sliders

§ Carousels

§  Parallax


If a site navigation scheme is not search-‐engine friendly, you should avoid using it in your site design.


Types of text-based navigation:

§  Formal navigation (global + local)

§  Location-‐based breadcrumb links

§  “Inline” or embedded text links

§  Site map or site index (supplemental)


For details, please read: http://marketingland.com/breadcrumb-‐links-‐good-‐user-‐experience-‐yes-‐97848

Parent

Child


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:


Before:


After:


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.


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!


LINK DEVELOPMENT & SOCIAL SIGNALS

SEO Principles



findable

desirable

useful

valuable

accessible

credible

usable


useful


§ 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


§ 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):


§ 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:


§  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

§  Humor


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


SEARCHER GOALS & BEHAVIORS

SEO Principles


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.


UNIVERSAL RULES OF WEB DESIGN


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:


§  Legible

§ Readable

§  Scannable

§ Understandable

§  Text makes sense in search listings

1. Easy to read:


§  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!


Google’s Mobile Friendly Test:

https://www.google.com/webmasters/tools/mobile-‐friendly/


§ Readers with limited vision

§  Tiny screens

§ Glare and poor lighting

§  Low-‐quality monitors

Be aware of:


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.


How about this fat footer?


§ Distinguishable

§  Scannable

§ Clickable/tappable

§  Predictable

§ Consistent

2. Easy to navigate:


Google’s Mobile Friendly Test:

https://www.google.com/webmasters/tools/mobile-‐friendly/


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

Jakob Nielsen, Principal

http://www.nngroup.com/articles/top-‐10-‐ia-‐mistakes/


§ Before users arrive (information scent)

§ After they arrive (orientation/placemaking)

3. Easy to find:


2

1


1

2


Content should be accessible within 3 clicks or less from the home page.


If this rule were true:

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

Site Map Content Content

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

Home Site Map Content


§ 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:


Before: After:


“…well-‐designed, easy-‐to-‐use navigation is important in establishing credibility, authority, and trust.”

Kalbach, J. (2007). Designing Web Navigation. O’Reilly.


§ Design/formatting

§  Layout

§  Labeling

4. Consistency & clarity:



findable

desirable

useful

valuable

accessible

credible

usable



§ Actual download time – machine speed

§  Perceived download time – human speed

5. Quick to download:


What Google measures:


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:


HOME PAGE EXAMPLES


§ 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:


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


Content is King. Context is the Kingdom.