search engine friendly web design by shari thurow

#SMX #14D @sharithurow

How to Design Websites for People Who Use Search Engines

SEARCH ENGINE FRIENDLY WEB

DESIGN


• Founder & SEO Director at Omni Marketing Interactive.

• Co-author of When Search Meets Web Usability & author of Search Engine Visibility.

• Columnist for Marketing Land & Search Engine Land.

• SEO professional since 1995, pioneering search-engine friendly website design.

• Web designer/developer since 1995.

• Website usability & UX professional since 2002.

• Information architect/scientist since 1989.

Introductions:


• User Experience Professionals Association (UXPA)Board MemberFormerly the Usability Professionals Association

• Information Architecture Institute (IAI)Board Member & Advisory Board

• ASLIB Journal of Information ManagementEditorial Advisory Board

• Bing Ads Accredited Professional Advisory Board


• What is Search-Engine Friendly?

• SEO & User Experience (UX)

• Universal Rules of Search-Engine Friendly Design

• SEO Principles

- Keywords, content, & labels

- Accessibility & navigation

• Home Pages

• Questions & Answers

• Lists of Tools & Resources

Session Goals:


Before we begin….


This is a good idea, or this website implemented a best practice.

Some symbols:

This is a bad idea; don’t do this; or this website did not implement a best practice well.

This is a good idea, or this website implemented a best practice.

Use this tool (or these tools) to help identify & fix any SEO/UX issues.


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.


Computing is evolving again. We're moving from mobile first

to AI-first….”- Sundar Pichai, Google CEO

http://www.zdnet.com/article/google-bets-on-ai-first-as-computer-vision-voice-recognition-machine-learning-improve/

“


Algorithms


Mobile First Index: Google will create & rank its search listings based on the mobile version of content, even for listings that are shown to desktop users.


WHAT IS SEARCH-ENGINE FRIENDLY?


Search engine friendly design is not about……optimizing or designing a website for search engines ONLY.

spam

technology-centereddesign


SEARCH-ENGINEFRIENDLYDESIGN

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

technology-centereddesign

user-centereddesign


…a user-friendly website design that enables websites & content to be easily found via the crawler-based web search engines, other types of search engines, & industry-related websites.

In other words, a search-engine friendly website is one that is made primarily for users (searchers) but also accommodates search engines.

Search engine friendly design is:

2

1


Importance of website design & architecture:

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

• Secondary: Crawler-based search engines/technologiesNiche & industry-related sites


Importance of content design & layout:

You communicate important content to search-engine technology based on how words (copy), graphic images, & multimedia files are:

• Labeled• Placed

• Formatted


To remember about SEO:

• SEO is optimizing for people who use search engines.

• You communicate important content to search-engine technology based on how words (copy), graphic images, & multimedia files are:– Labeled– Placed– Formatted


SEO & USER EXPERIENCE (UX)


The first law of e-commerce is that if users cannot find the

product, they cannot buy it either. ”

- Dr. Jakob Nielsen, Usability Guru & Authorhttp://www.nngroup.com/articles/usability-101-introduction-to-usability/

“


Peter Morville’sUser Experience Honeycomb

findable

desirable

useful

valuable

accessible

credible

usable

http://semanticstudios.com/user_experience_design/

findable


Browse/navigate:


Search/retrieval:

SearchKeyword(s)Results

(SERP)


Ask:

?


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.

TIP: Treat most pages on your website as a point of entry.


To remember about SEO & UX:

• A great user experience includes findability.

– People can’t use what they can’t find.

– Make sure your technical, design, marketing, & usability teams do not dismiss or overlook this UX facet.

• When implementing user-centered SEO, treat most pages on your website as a point of entry.


5 UNIVERSAL RULES OF SEARCH-ENGINE FRIENDLY DESIGN


5 Universal Rules of Search-Engine Friendly Design:

1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistency & clarity in layout, design, interaction, & labeling

5. Quick to download


1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistency & clarity


5 Universal Rules of Search-Engine Friendly Design:

IMPORTANT:

All of these rules ARE ranking factors or directly AFFECT ranking factors.


• Legible

• Readable

• Understandable

• Scannable

• Text makes sense in search listings

1. Easy to read:

IMPORTANT:

Readability is a ranking factor!


• Techniques & Relevancy Factorshttp://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418

• Google Quality Guidelineshttps://support.google.com/webmasters/answer/66353

Readability citations:


• Legible

• Readable

• Understandable

• Scannable

• Text makes sense in search listings

1. Easy to read:Legibility refers to how easy it is to distinguish one letter from another in a typeface.

Readabilityrefers to how easy it is to read /comprehend words, phrases, & blocks of text.


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

Google’s Mobile Friendly Test:


https://www.bing.com/webmaster/tools/mobile-friendliness

Bing’s Mobile Friendly Test:


https://varvy.com/mobile/

Varvy mobile-friendliness tool:


• Readers with limited vision

• Small or tiny screens

• Glare & poor lighting

• Low-quality monitors

Be aware of:


http://wave.webaim.org


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, & 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 & 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













Search Engine Optimization is an important part of any search engine marketing initiative. Some people believe that














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

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

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


• Clickable/tappable

• Distinguishable

• Scannable

• Predictable

• Consistent & clear

2. Easy to navigate:


Navigation usage is higher on mobile devices:

Mobile first is NOT mobile onlyhttps://www.nngroup.com/articles/mobile-first-not-mobile-only/


Test mobile-navigation formatting on Google:


Test mobile-navigation formatting on Bing…


…and Varvy :


Conradi, J., Busch, O., & Alexander, T. (2015). Optimal touch button size for the use of mobile devices while walking. Procedia Manufacturing, 3,387-394.

Touch target size – between 42x42 and 53x53 pixels:

ERROR COUNT & BUTTON SIZE

Standing

Walking


• Before users arrive (information scent)

• After they arrive (orientation/placemaking)

3. Easy to find:


1

2


3


4


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

True False


If this rule were true:

___ ___ ______ ___ ______ ___ ______ ___ ______ ___ ___

Site Map ContentContent

___ ___ ______ ___ ______ ___ ______ ___ ______ ___ ___

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 Rulehttps://articles.uie.com/three_click_rule/

– User Experience Myth Or Truth: The Three-Click (Or Tap) Rulehttps://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760

Content should be easy to find after arriving on site:


Frequently Asked Questions:Before: After:


Accordions:

• Increase the readability & legibility of text content.

• Increase the effectiveness of click/tap signifiers.

• Add location-based breadcrumb trail.

• Add intro paragraph and/or content tagline.

• Add the links Expand All | Collapse All.


…one thing holds true: well-designed, easy-to-use navigation

is important in establishing credibility, authority, & trust. ”- James Kalbach

From Designing Web Navigation

“


findable

desirable

useful

valuable

accessible

credible

usable

In the UX Honeycomb:


• Design/formatting

• Interaction

• Layout/placement

• Labels

– Document labels

– Content labels

– Navigation labels

4. Consistency & clarity:


KISSKeep it simple stupid.

KICKKeep it clear kids.


CLARITY TRUMPS CONSISTENCY. If you can make something significantly clearer by making it slightly inconsistent, choose

in favor of clarity.”- Steve Krug

Author, Don’t Make Me Think Revisited

“


• Actual download time – machine speed

• Perceived download time – human speed

5. Quick to download:


https://developers.google.com/speed/pagespeed/insights/

What search engines measure:

https://search.google.com/test/mobile-friendly


https://www.bing.com/webmaster/tools/mobile-friendliness

What search engines measure:


1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistency & clarity in layout, design, interaction, & labels


5 Universal Rules of Search-Engine Friendly Design

To remember:


4 SEO PRINCIPLES


All web search engines:

} All crawlers1. Index text

2. Follow links

3. Measure popularity

4. Accommodate searcher goals & behaviors


All web search engines:

} Ranking factors

1. Index text

2. Follow links

3. Measure popularity

4. Accommodate searcher goals & behaviors


https://searchengineland.com/seotable

Periodic table of SEO factors:


Let’s simplify this:

Keywords, Content,& Labels

Accessibility & Navigation

Searcher Goals & Behaviors

Link Development & Social Signals


On-page criteria






Off-page criteria






We will focus on:

On-page criteria






To remember about SEO principles:

• 4 building blocks

- Keywords, content, & labels

- Accessibility & navigation

- Searcher goals & behaviors

- Link development (earning)

• When on-page criteria & off-page criteria reinforce each other, long-term SEO should improve.


KEYWORDS, CONTENT, & LABELSSEO 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 consistent labeling system that clearly communicates “aboutness” to both humans & technology.


Types of labels:

• Content

• Navigation

• Document


Content heading:

• People use the H1-formatted heading to:

– Get a sense of the page’s main topic

– Validate information scent


The mobile version:


Moving keywords to the front of titles [headings] increases

the likelihood that they get noticed. ”

- Dr. Jakob Nielsen, Usability Guru & Authorhttp://www.nngroup.com/articles/headings-pickup-lines/

“


An image’s file name is a label:

http://www.mayoclinic.org/-/media/kcms/gbs/patient-consumer/images/2013/11/15/17/37/ds00050_-my00164_im01229_mcdc7_cataracts2_jpg.jpg


In the UX Honeycomb, labels should be:

findable

desirable

useful

valuable

accessible

credible

usable

accessiblefindable

usable

credible

desirable


Make sure your site has link-worthy content!

• Reference

• FAQs, Q&As

• Coupons

• Articles

• Checklists

• Fact sheets

• Guides

• Videos

• Audio files

• Spreadsheets

• Presentations

• Blog

• Links & resources

• Humor

• Quizzes

• Comparisons

• White papers

• E-books

• Tools

• Infographics

• Slideshows


In the UX Honeycomb, content assets are:

findable

desirable

useful

valuable

accessible

credible

usable

credible

desirable

useful

valuable


PRIMARY TEXT SECONDARY TEXT

• Title tags

• Visible <body> copy

• Text at the top of a web page

• In & around hypertext links

• Domain & file names (accessibility & searcher goals)

For text-based documents:

• Meta-tag content

• Alternative text

• Domain & file names (descriptive)


To visualize aboutness (quantitative):


This is a page on a healthcare website. Can you tell what the page’s topic is?


To test aboutness (qualitative):

• 5-Second Tests: Measuring Your Site’s Content Pageshttps://articles.uie.com/five_second_test/


To remember about keywords, content, & labels:

• Remember to focus most of your efforts on primary text, not secondary text.

• Create a clear & consistent labeling system − KICK!

• Ensure that your site has desirable content assets.

• Place keyword phrases prominently on your pages.

• Use keywords frequently enough on your pages so that content appears focused, but don’t overdo it.

- Qualitative data

- Quantitative data


Web search engines measure keyword density as part of their algorithms (i.e. keyword density is a ranking factor).

True False


ACCESSIBILITY, ARCHITECTURE, & NAVIGATIONSEO Principles


In the UX Honeycomb:

findable

desirable

useful

valuable

accessible

credible

usable

accessiblefindable

usable

credible


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


Web 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 & technology) how important you believe your content is.

• In other words, site navigation matters!


SEO jargon:

Internal links = Site navigation


GlobalUtilities

Contextual

Loca

l

Supplemental

Where am I?Need help?

What’s related tothis content?

Wha

t’s n

earb

y?

Types of website navigation:

Site map


Utilities

Contextual

Supplemental

MENULOGO

Utilities

Contextual

MENULOGO

Utilities

Contextual

SiteMap


Purpose of site navigation:

• The purpose of site navigation is to enable efficient task completion for both human users & technology.

• Answers the questions:

– Where am I?

– Am I in the right place? (arrival)

– Where can I go? (information scent)

– How can I get there? (tap/click signifiers)


Menus as global & local navigation:


• Too many navigation options? Users won’t read all of the options.

• Too few? Errors in selection because navigation labels are less informative & specific.

Be careful with complex menus:


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.


What we want to avoid or minimize:

• Orphaned or nearly orphaned pages

• Content silos


Orphans & silos communicate:

IMPORTANT


To identify orphans & near orphans:


Content silos:

• In information systems (IS), a silo is an isolated point or section in a system where data is kept & segregated from other parts of the architecture.

• Content silos make content more difficult to find.


How to fix silos & orphans:• Contextual navigation

– Some examples include alternatives, upsells, & shortcuts.

– Curated navigation carries more ‘weight’ than aggregated navigation.

– When used excessively, contextual navigation can create clutter & confusion.

• Supplemental navigation

– All websites should include a (wayfinder) site map or site index.

– As a site gets larger, guides can be very useful.


Shortcuts:

• The goal of shortcuts is to help users find information more easily & rapidly.


Supplemental navigation:

• Site map

• Site index

• Guides

• Site search

TIP: Well-written, formatted guides provide context & can be a digital content asset…one that is useful for link outreach.


TIP: ALWAYS communicate visited & unvisited link statusin your site map &/or site index.


Website navigation formats:• Text links

• Navigation buttons

• Image maps

• Menus– Dropdown

– Flyout

– Expanding/collapsing

• Flash

• Sliders

• Carousels

• Parallax


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:https://marketingland.com/breadcrumb-links-good-user-experience-yes-97848

Home > Category > Subcategory > Article


Spool, Jared. (2006). “Why Good Content Must Suck: Designing for the Scent of Information.” Slides available at: https://www.uie.com/handouts/UIE_ScentOfInformation.pdf

Inline or embedded text links provide context & scent:


Press release − before:


Press release − after:


To remember about accessibility & navigation:

• Include 5 types of website navigation on your site to ensure findability.

• Know when & how to use text links effectively.

• Avoid or minimize orphans, near orphans, & content silos.

• Try to make the URLs to your content as human-friendly & technology-friendly as possible.


HOME PAGES


• 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:https://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Items that should appear on a home page:


5 Rules of Search-Friendly Design 4 SEO Principles• Easy to read

• Easy to navigate

• Easy to find

• Consistent & clear in layout, design, interaction, & labels

• Quick to download

In summary:

• Keywords, content, & labels

• Accessibility & navigation

• High-quality link development (earning)

• Accommodate searcher goals & behaviors


Questions?

Shari Thurow, Founder & SEO DirectorOmni Marketing Interactive

[email protected]


LISTS OF TOOLS & RESOURCES


• 113 Design Guidelines for Homepage UsabilityJakob Nielsenhttps://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

• Multi-Device Layout Patterns Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1514

• Search Patterns Library: Design for DiscoveryPeter Morvillehttp://searchpatterns.org/library.php

• Yahoo Design Pattern Libraryhttps://developer.yahoo.com/ypatterns/

Online pattern libraries:


Recommended design books:


(Web) design book citations:

Brinck, T., Gergle, D., & Wood, S. D. (2001). Usability for the Web: Designing Web Sites That Work. San Francisco, CA: Morgan Kaufmann.

Cooper, A., et al. (2014). About Face: The Essentials of Interaction Design, 4th Edition. Indianapolis, IN: Wiley Publishing, Inc.

Hinman, R. (2012). The Mobile Frontier: A Guide for Designing Mobile Experiences. Brooklyn, NY: Rosenfeld Media.

Kalbach, J. (2007). Designing Web Navigation: Optimizing the User Experience. Sebastopol, CA: O'Reilly Media, Inc.

Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design, Revised & Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, & Teach Through Design. Gloucester, MA: Macmillan.


(Web) design book citations:

Mullet, K., & Sano, D. (1994). Designing Visual Interfaces: Communication Oriented Techniques. Mountain View, CA: Prentice Hall.

Nielsen, J., & Pernice, K. (2010). Eyetracking Web Usability. Berkeley, CA: Peachpit Press.

Porter, J. (2010). Designing for the Social Web. Berkeley, CA: Peachpit Press.


Recommended search books:


Search book citations:Enge, E., et al. (2012). The Art of SEO. Sebastopol, CA: O'Reilly Media, Inc.

Hearst, M. (2009). Search User Interfaces. New York, NY: Cambridge University Press.

Morville, P., & Callender, J. (2010). Search Patterns: Design for Discovery. Indianapolis, IN: Wiley Publishing, Inc.

Pirolli, P. (2007). Information Foraging Theory: Adaptive Interaction with Information. Oxford University Press.

Rosenfeld, L. (2011). Search Analytics for Your Site: Conversations With Your Customers. Brooklyn, NY: Rosenfeld Media.

Thurow, S., & Musica, N. (2009). When Search Meets Web Usability. Berkeley, CA: Peachpit Press.


Search book citations (cont’d):

White, R. , & Roth, R. (2009). Exploratory Search: Beyond the Query-Response Paradigm (Synthesis Lectures on Information Concepts, Retrieval & Services). San Rafael, CA: Morgan & Claypool Publishers.

White, R. W. (2016). Interactions with Search Systems. Cambridge University Press.


SEE YOU AT THE NEXT #SMX

THANK YOU!