How To Design Search Engine Friendly Websites by Shari Thurow

3,242 views

Published on

From SMX East 2013 - Boot Camp: How To Design Search Engine Friendly Websites by Shari Thurow

#SMX #14A

Published in: Business, Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,242
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
89
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

How To Design Search Engine Friendly Websites by Shari Thurow

  1. 1. Designing Search Engine Friendly Websites By Shari Thurow, Founder and SEO Director Omni Marketing Interactive Copyright 2007-2013. All rights reserved.
  2. 2. 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.
  3. 3. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. 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
  4. 4. 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
  5. 5. 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.
  6. 6. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Search-engine friendly design is NOT… …a design created primarily for obtaining top search engine positions.
  7. 7. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. In other words, search-engine friendly design is not: spam Search Engines technology- centered design
  8. 8. Copyright ©1997-2013. All rights reserved. “In the long run, technology-centered design is generally counterproductive to project and business goals.” --Kalbach, J. (2007). Designing Web Navigation, p. 21.
  9. 9. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Search engine optimization is…. SEARCH- ENGINE FRIENDLY DESIGN technology- centered design user- centered design …optimizing a website for people who use search engines.
  10. 10. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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.
  11. 11. Importance of site design: • Primary: End users/site visitors/searchers/target audience • Secondary: Crawler-based search engines Niche directories and other industry-related sites Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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.
  12. 12. Copyright ©1997-2013. All rights reserved. 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
  13. 13. Copyright ©1997-2013. All rights reserved. Easy to read • Legible • Scannable • Understandable • Make sense in search listings
  14. 14. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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.
  15. 15. Copyright ©1997-2013. All rights reserved. Multiple devices Desktop Notebook MobileTablet
  16. 16. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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
  17. 17. Copyright ©1997-2013. All rights reserved. Easy to navigate • Findable • Clickable • Scannable • Distinguishable
  18. 18. Copyright ©1997-2013. All rights reserved. Answers the questions • Where am I? • Where can I go? • How can I get there?
  19. 19. Copyright ©1997-2013. All rights reserved. “Findability Precedes Usability In the Alphabet and on the Web You Can’t Use What You Can’t Find” -- Morville, P. (2005). Ambient Findability, p. 111.
  20. 20. Copyright ©1997-2013. All rights reserved. “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.
  21. 21. Copyright ©1997-2013. All rights reserved. Easy to find • Before arriving • After arriving
  22. 22. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Searchers follow an information scent:
  23. 23. After arriving: • Go directly to the relevant page • Within 7-8 clicks, preferably less, as long as… Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Porter, J. (2003). “Testing the Three-Click Rule.” Available at http://www.uie.com/articles/three_click_rule/
  24. 24. Copyright ©1997-2013. All rights reserved. “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, p. 32.
  25. 25. Copyright ©1997-2013. All rights reserved. “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, p. 102.
  26. 26. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  27. 27. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  28. 28. Copyright ©1997-2013. All rights reserved. “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, p. 102.
  29. 29. Copyright ©1997-2013. All rights reserved. “When people can’t find what they need, they often assume that the information isn’t available there. In frustration, they may go elsewhere.” --Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, p. 172.
  30. 30. Copyright ©1997-2013. All rights reserved. “…well-designed, easy-to-use navigation is important in establishing credibility, authority, and trust.” --Kalbach, J. (2007). Designing Web Navigation, p. 17.
  31. 31. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  32. 32. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. (1) Perfetti, C. and and Landesman, L. (2001) “The Truth About Download Time.” Available at: http://www.uie.com/articles/download_time/.
  33. 33. Copyright ©1997-2013. All rights reserved. “… 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.
  34. 34. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  35. 35. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  36. 36. Search engines: • Index text • Follow links • Measure popularity • Accommodate searcher goals and behaviors Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. }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.
  37. 37. 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 referred to as link development. 4. Behavior component Accommodating searcher goals and behaviors. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Keywords and labels Architecture and design Link development & social Searcher goals and behaviors
  38. 38. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Searcher goals: Navigational Informational Transactional
  39. 39. All components are essential: • 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. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Keywords and labels Architecture and design Link development & social Searcher goals and behaviors
  40. 40. Copyright ©1997-2013. All rights reserved. Text component
  41. 41. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  42. 42. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. ALL search engines read and use to determine relevancy. SOME search engines read and use to determine relevancy.
  43. 43. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. Types of labeling systems: Content Navigation Document
  44. 44. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. Some labels are hilarious:
  45. 45. 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. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  46. 46. Copyright ©1997-2013. All rights reserved. Link component
  47. 47. Types of site navigation schemes: • Text links • Navigation buttons • Image maps • Menus (form and DHTML) • Flash Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  48. 48. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Menu errors: 23 22 15 26 Percentage
  49. 49. Mega-menus: • Lose up to 15%-20% in revenue after deployment • Occlusion • Hover in touch screens Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Spool, J. (2011). “6 Epic Forces Battling Your Mega Menus.” Available at http://www.uie.com/articles/mega_menus/
  50. 50. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. These menus tested well:
  51. 51. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Question: If a site navigation scheme is not search-engine friendly, should you avoid using it in your site design?
  52. 52. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  53. 53. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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.
  54. 54. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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
  55. 55. Types of text links: • Navigation scheme • Locational breadcrumb links • Embedded text links • Site map (wayfinder) or site index Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  56. 56. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  57. 57. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  58. 58. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. 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.
  59. 59. 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. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  60. 60. Page interlinking: • In addition to a spider-friendly navigation scheme and a (wayfinder) site map, all sites should have related, relevant page interlinks. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Sibling SiblingParent Child
  61. 61. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. Grandchild Grandparent
  62. 62. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. CousinCousin
  63. 63. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Interlinking examples: Category page Product page
  64. 64. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Interlinking examples (cont’d):
  65. 65. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Interlinking examples (cont’d):
  66. 66. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  67. 67. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  68. 68. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. Do NOT assume that responsive design is naturally search-engine friendly.
  69. 69. Some responsive design advantages: • Content only has to be managed in one location. • Maintenance can be easier. • Can save time. • Google recommended it. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  70. 70. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  71. 71. 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. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Source: Wroblewski, L. (2011). Why Separate Mobile & Desktop Web Pages? Retrieved at http://www.lukew.com/ff/entry.asp?1390
  72. 72. 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. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. 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
  73. 73. Designing Search-Engine Friendly Websites Copyright 1997-2013. All rights reserved. Redirects gone amok:
  74. 74. 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! Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  75. 75. Copyright ©1997-2013. All rights reserved. Popularity component
  76. 76. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. }Link popularity
  77. 77. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  78. 78. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  79. 79. Copyright ©1997-2013. All rights reserved. Home pages
  80. 80. 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…. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  81. 81. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  82. 82. 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 Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved.
  83. 83. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. • Awareness • Knowledge • Expertise Designing Search-Engine Friendly Websites
  84. 84. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Don’t only design for search engines.
  85. 85. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Design for people who use search engines. SEARCH- ENGINE FRIENDLY DESIGN
  86. 86. Designing Search-Engine Friendly Websites Copyright 2007-2013. All rights reserved. Questions? Shari Thurow, Founder and SEO Director Omni Marketing Interactive sthurow@search-usability.com

×