search engine friendly web design boot camp smx west 2015

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:


•  SEO and the user experience

•  What is search-engine friendly?

•  Universal Rules of Web Design

•  SEO Principles

•  Home pages

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 THE USER EXPERIENCE


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 Ambient Findability and Search Patterns


findable

desirable

useful

valuable

accessible

credible

usable Peter Morville’s User

Experience Honeycomb

findable


Browsing:


Search Keyword(s) Results

(SERP)

Searching:


Asking:


findable

Search engine advertising

Search engine optimization

Social media optimization

Z BROWSE

Z

SEARCH

Z

ASK


WHAT IS SEARCH ENGINE FRIENDLY?


spam

technology-centered design

Search-engine optimization is NOT… …optimizing for search engines only.


“In the long run, technology-centered design is generally counterproductive to project and business goals.” -Kalbach, J. (2007). Designing Web Navigation. O’Reilly.


technology-centered design

Search-engine optimization is… …optimizing a website for people who use search engines.

user- centered design

SEARCH-ENGINE

FRIENDLY DESIGN


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

_____________________


•  Primary: •  Secondary:

Importance of site design:

End users/site visitors/searchers/target audience Crawler-based search engines/technologies Niche and industry-related sites


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.


Search rankings depend on:

+ Technical Factors Human Factors


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

5 Universal Rules of Web Design:


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


ü Legible

ü Readable

ü Scannable

ü Understandable

ü Make sense in search listings

Easy to read:


Legibility is how well users see the letters.

Readability refers to the ease with which a user can scan over paragraphs of type.


Users with limited vision

Reading on tiny screens

Glare and poor lighting

Low quality monitors


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.


Site navigation - easy to scan:


ü Distinguishable

ü Scannable

ü Clickable/tappable

ü Predictable

ü Consistent

Easy to navigate:


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


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


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


•  Where am I? (orientation)

•  Am I in the right place? (arrival)

•  Where can I go? (information scent)

Purpose of site navigation:


The purpose of site navigation is to enhance website effectiveness to enable task completion for both humans and technology. -adapted from Nielsen Norman Group


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


ü Before arriving

ü After arriving

Easy to find:


Searchers follow information scent:

1


2


Another example:

1


2


It’s the same with social media:

1


2


•  Go directly to the relevant page •  Within 7-8 clicks, preferably less, as long as…

After arriving:


http://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760


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


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


“…well-designed, easy-to-use navigation is important in establishing credibility, authority, and trust.” -Kalbach, J. (2007). Designing Web Navigation. O’Reilly.


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


ü  Actual download time – machine speed

ü  Perceived download time – human speed

(5) Quick to download:


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


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:


SEO PRINCIPLES


•  Index text

•  Follow links

•  Measure popularity

•  Accommodate searcher goals and behaviors

Search engines:

} All crawlers


•  Index text

•  Follow links

•  Measure popularity

•  Accommodate searcher goals and behaviors

Search engines:

} Ranking factor


Bring in a search engine optimization specialist during the design, redesign, wireframe, or template stage, NOT after the site has already been created.


Keywords & Labels

Navigation & Accessibility

Links & Social Signals

Searcher Goals & Behaviors

} •  Architecture

•  Design

•  Format


Informational

(What can I know?)

Navigational

(Where can I go?)

Transactional

(What can I do?)


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


KEYWORDS & LABELS


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


ü  Content ü  Navigation

ü  Document

Types of labeling systems:


A URL is a label:


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


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.


Location-based breadcrumbs:

Home > Category > Subcategory > Content Heading


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


NAVIGATION & ACCESSIBILITY


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


•  Text links

•  Navigation buttons

•  Image maps

•  Menus

•  Flash

Types of navigation schemes:


23 22 15 26

Percentage of Menu Errors


Responsive menus:


Hamburger menus:


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:


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


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

Question:


Always have at least two forms of navigation on

your website: one for your target audience and one

for the search engines.

Optimization tip:


•  Navigation scheme

•  Location-based breadcrumb links

•  Embedded text links

•  Site map (wayfinder) or site index

Types of text links:


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.


Optimization tip:


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


Parent

Child

Sibling Sibling

Types of contextual links:


Grandchild

Grandparent


Cousin Cousin


Uncle

Niece


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


LINK DEVELOPMENT & SOCIAL SIGNALS


•  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 and building an audience (qualitative)

•  Links can be a by-product of a great social campaign

Social media = signal:


•  Substantial and unique content

•  How other sites are linked to your site (anchor text)

•  Social signals

•  Website usability

Factors that affect link earning:


•  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


HOME PAGES


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


•  Screen real estate

•  Number of items

•  Animation speed

•  Ability to start/stop


•  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


Shari Thurow, Founder and SEO Director Omni Marketing Interactive

[email protected]

Questions?

search engine friendly web design boot camp smx west 2015

Marketing

d findability

d browsing

d asking

search engine land

search patterns

d search keywords results

d ux hierarchy of needs

crawlerbased search