how to design search engine friendly websites by shari thurow

Designing Search Engine Friendly Websites

ByShari Thurow, Founder and SEO Director

Omni Marketing Interactive

Copyright 2007-2013. All rights reserved.

Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved.

About Shari Thurow:

• Author of Search Engine Visibility, which has been translated into 5 languages.

• Co-author of When Search Meets Web Usability.

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

• Web designer/developer since 1995.

• Website usability and UX professional since 2002.


Facets of the searcher experience:

desirable

useful

valuable

accessible

credible

usable

findable

desirable

useful

valuable

accessible

credible

usable

findable

http://searchengineland.com/findability-seo-and-the-searcher-experience-61038

Goals of this session:

• Define a search-engine friendly website design What it is and is NOT

Why it is important

What it depends on

• Search engine optimization essentials Text component

Link component» Navigation schemes

» Page interlinking

Popularity component

(Behavior component)

• Home pages

Copyright 2007-2013. All rights reserved.Designing Search-Engine Friendly Websites

Copyright ©1997-2013. All rights reserved.

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.


Search-engine friendly design is NOT…

…a design created primarily for obtaining top search engine positions.


In other words, search-engine friendly design is not:

spam

SearchEngines

technology-centered

design


“In the long run, technology-centered design is generally counterproductive to project and business goals.”

--Kalbach, J. (2007). Designing Web Navigation, p. 21.


Search engine optimization is….

SEARCH-

ENGINE

FRIENDLY

DESIGN

technology-centered

design

user-centered

design

…optimizing a website for people who use search engines.


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.

Importance of site design:

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

• Secondary: Crawler-based search enginesNiche directories and other industry-related sites


How words, graphic images, and multimedia files are arranged on web

pages communicates the content that you feel is important to both

search engines and to site visitors.


5 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


Easy to read

• Legible

• Scannable

• Understandable

• Make sense in search listings


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.




Multipledevices

Desktop Notebook

MobileTablet


Mobile users read:

“Mobile users, moreover, are not just checking headlines on their devices…. Many also are reading longer news stories - 73% of adults who consume news on their tablet read in-depth articles at least sometimes, including 19% who do so daily. Fully 61% of smartphone news consumers at least sometimes read longer stories, 11% regularly.”

http://www.journalism.org/analysis_report/future_mobile_news


Easy to navigate

• Findable

• Clickable

• Scannable

• Distinguishable


Answers the questions

• Where am I?

• Where can I go?

• How can I get there?


“Findability Precedes UsabilityIn the Alphabet and on the WebYou Can’t Use What You Can’t Find”

-- Morville, P. (2005). Ambient Findability, p. 111.


“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, p. 184.


Easy to find

• Before arriving

• After arriving


Searchers follow an information scent:

After arriving:

• Go directly to the relevant page

• Within 7-8 clicks, preferably less, as long as…


Porter, J. (2003). “Testing the Three-Click Rule.” Available at http://www.uie.com/articles/three_click_rule/


“People don’t mind clicking through multiple pages as long as each click brings them closer to [their] desired content.”



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



“When people can’t find what they need, they often assume that the information isn’t available there. In frustration, they may go elsewhere.”



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

--Kalbach, J. (2007). Designing Web Navigation, p. 17.

Consistent in layout, design, and labeling:

• 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


Quick to download:

• Actual download time

• Perceived download time

If people cannot find what they want on a site, they will regard the download time as slow.1


(1) Perfetti, C. and and Landesman, L. (2001) “The Truth About Download Time.” Available at: http://www.uie.com/articles/download_time/.


“… 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 siteabandoning, and stage of delay. The Service Industries Journal 28 (10), 1415-1429.

Download time depends on context:

• 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


To remember:

• 5 Rules of Web Design

Easy to read

Easy to navigate

Easy to find

Consistent in layout, design, and labeling

Quick to download


Search engines:

• Index text

• Follow links

• Measure popularity

• Accommodate searcher goals and behaviors


} All crawlers

Bring in a search engine optimization specialist during the

design, redesign, wireframe, or template stage, NOT after

the site has already been created.

Principles of SEO (present):

1. Text component (index text)Using words and phrases that your target audience types into search queries.

2. Link component (follow links)Giving search engine spiders easy, user-friendly access to content through site and page architecture.

3. Popularity component (measure popularity) Number and quality of objective, 3rd-party links pointing to a URL, commonly referredto as link development.

4. Behavior componentAccommodating searcher goals and behaviors.


Keywords and labels

Architecture and design

Link development

& social

Searcher goalsand behaviors


Searcher goals:

Navigational Informational Transactional

All components are essential:

• In order for a site to receive consistent search engine traffic over time, all 4 components should be present on awebsite.

• If a website has missing pieces, it gives competitor sites the opportunity to rank higher and receive more search engine traffic.


Keywords and labels

Architecture and design

Link development

& social

Searcher goalsand behaviors


Text component

What kind of text?

• The words your target audience is typing into search queries are called keywords or query words

• When visitors view a web page, does the content appear to be focused? How to make your content appear focused…

Title tag, headings, contextual links, cross links

Introductory and conclusion paragraphs

Product/service descriptions

Graphic image (with alternative text)

• Visible body text

Should not have perform any type of action to view the most important text of an

individual web page in a browser


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.


Types of labeling systems:

Content

Navigation

Document


Some labels are hilarious:

Text component summary:

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



Link component

Types of site navigation schemes:

• Text links

• Navigation buttons

• Image maps

• Menus (form and DHTML)

• Flash



Menu errors:

23 22 15 26

Percentage

Mega-menus:

• Lose up to 15%-20% in revenue after deployment

• Occlusion

• Hover in touch screens


Spool, J. (2011). “6 Epic Forces Battling Your Mega Menus.”

Available at http://www.uie.com/articles/mega_menus/


These menus tested well:


Question:

If a site navigation scheme is not search-engine friendly, should you avoid

using it in your site design?


Optimization tip:

Always have at least two forms of navigation on your website: one for your target

audience and one for the search engines.

They often complement each other.


Facets of searcher experience:

desirable

useful

valuable

accessible

credible

usable

findable

desirable

useful

valuable

accessible

credible

usable

findable

http://searchengineland.com/findability-seo-and-the-searcher-experience-61038

Types of text links:

• Navigation scheme

• Locational breadcrumb links

• Embedded text links

• Site map (wayfinder) or site index



Embedded text link overkill:


Information(al) page characteristics:

• Contains information your target audience is interested in.

• Do not contain a lot of sales hype but rather factual information.

• Are spider-friendly web pages.

• Often have a simpler layout.

• Visually match the rest of your website.


Page interlinking:

• In addition to a spider-friendly navigation scheme and a (wayfinder) site map, all sites should have related, relevant page interlinks.


Sibling SiblingParent

Child


Grandchild

Grandparent


CousinCousin


Interlinking examples:

Category page Product page


Interlinking examples (cont’d):

Be careful with companies that claim to build pages:

• Doorway pages/domains

• Hallway pages

• Envelope pages

• Mini or micro sites

• Satellite sites

• Attraction pages

• Magnet sites

• PageRank sculpting

• Channel pages

• Shadow domains

• Theme-based sites/pages

• Advertising pages

• Instant link popularity

• Permanent positions

• Guaranteed positions

• Country-specific engines



Do NOT assume that responsive design is naturally search-engine friendly.

Some responsive design advantages:

• Content only has to be managed in one location.

• Maintenance can be easier.

• Can save time.

• Google recommended it.


Some responsive design disadvantages:

• Can significantly increase actual download time of website

Images

JavaScript and other workarounds

» More

» Redirects gone amok

Tailored content sometimes necessary for SEO and the best user experience


Actual download time can significantly increase:

• “The problem is large images have large file sizes. Though not every Web browser will display them at full size, they'll all download them at full size.”

• Workarounds are available, such as not loading unnecessary images in the phone version of the site; however, more JavaScript workarounds also means increased download time.


Source: Wroblewski, L. (2011). Why Separate Mobile & Desktop Web Pages?Retrieved at http://www.lukew.com/ff/entry.asp?1390

Javascript presents the same problem:

• “If there's a lot of additional mark-up on the site that needs to be suppressed to deliver the content users want to see, it will slow down the site and possibly deliver the wrong content,” [Bryson Meunier] said.


Sullivan, L. (2012). Mobile SEO Separate From Responsive Web Design.Available at: http://www.mediapost.com/publications/article/170903/mobile-seo-separate-from-responsive-web-design.html


Redirects gone amok:

Link component summary:

• Always use at least two forms of navigation on your website: one for your site visitors and one for search engines.

• Know when and how to use text links effectively.

• Don’t assume…test.

• Try to make the URLs to your most popular pages as spider-friendly as possible.

• Responsive design and faceted classification…don’t assume!

• Usability counts!



Popularity component

What is popularity?

• 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


} Link popularity

Social media and search engines:

• Currently, social media acts more as a signal than a directive:

Signal = maybe

Directive = absolutely

• Social media = short-term SEO effect

One goal is to get more followers and building an audience (qualitative)

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

• Link development = long-term SEO effect


Factors that affect link development:

• Substantial and unique content

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

• Social signals

• Website usability

Ease of use

Predictability of navigation



Home pages

Splash pages:

• What is a splash page?

• Why don’t search engines like splash pages?

• Why don’t users/searchers like splash pages?

• Let’s look at some examples….


Items to include on your home page:

• Keyword-rich text

• At least one spider-friendly navigation scheme

• Links to the most important sections on your site

• Visible link to a site map


In summary:

• Searchers

Easy to read

Easy to navigate

Easy to find

Consistent in layout, design, and labeling

Quick to download

• Search engines

Keywords and labels

Site and page architecture

High-quality link development and social signals

Accommodate searcher behaviors



• Awareness

• Knowledge

• Expertise

Designing Search-Engine Friendly Websites


Don’t only design for search engines.


Design for people who use search engines.

SEARCH-

ENGINE

FRIENDLY

DESIGN


Questions?

Shari Thurow, Founder and SEO DirectorOmni Marketing Interactive

[email protected]

how to design search engine friendly websites by shari thurow

Business

searchengine friendly

search engine positioning

search engine submission

search engine positions

search listings

good search engine ranking

humanbased search engines

search meets web usability