Web Design for SEO


Published on

Talk for SMX Sydney Australia

Published in: Technology, Business
  • Great presentation Michael, also placing the right keywords in the website content is a major factor in SEO process success. Not only just throwing the keywords in the page, but placing it in the right places is the trick, places like: title tags, navigation, Url’s, meta description and website slogan and also breadcrumb trails. All of these places are useful to let the search engine read, and index it easily.
    Ann Daniel
    Are you sure you want to  Yes  No
    Your message goes here
  • Michael, what a awesome presentation, really insightful information, great work....really love the process of developing Persona... every business should do that otherwise you are targeting your customers blindly without know who are your customers.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design for SEO

  1. 1. WEB DESIGN FOR SEOThe winning process for buildingwebsites that perform in Organic SearchMICHAEL KINGDIRECTOR OF INBOUND MARKETING @ipullrank
  2. 2. DOWNLOAD THIS DECK:http://slidesha.re/seo-design @ipullrank
  3. 3. MEET GARY & COGSWELL What’s up Sydney?! Hi, I’m I’m Gary! Cogswell! Before we get started I wanted to introduce you to Gary & Cogswell, the stars of a new SEO comic strip that I write on the iAcquire blog. Check them out! http://blog.iacquire.com/ @ipullrank
  5. 5. MY GENERAL STANCE“Building a userexperience without SEOin mind is like building acar with no engine.” After arguing with Creative Directors for years about the importance of SEO, I’ve settled on this analogy to get my point across. Large brands especially rely on paid media and neglect SEO leaving their sites stranded once campaigns end. @ipullrank
  6. 6. BUT ADAM AUDETTE MAKES A GREAT POINT “SEO should be an invisible layer beneath a strong user experience, a beautiful site, and a clear, coherent message and purpose.” Read more about @audette’s stance http://www.rimmkaufman.com/blog/make-seo-invisible/04042012/ @ipullrank
  7. 7. SEO IS NOT AN EXCUSE FOR BAD UX User Experience is only compromised by SEO when it is retrofitted into the design process. SEO absolutely must be baked in as early as possible. @ipullrank
  8. 8. SEARCH IS ABOUT PEOPLE People search to fulfill specific needs; build websites that fulfill those needs atop of strong technical SEO and you will always be ahead of the algorithm @ipullrank
  9. 9. EVERY PAGE IS A LANDING PAGE Every page on any site is an opportunity to rank for a keyword and drive traffic. Therefore SEO is largely about preparing every page to earn its keep and support the rest of the site by attracting visitors. @ipullrank
  10. 10. GOOGLEBOT IS SMARTER THAN YOU THINK Hey Gary, you gonna ask for his autograph … I wrote an article for SEOmoz building on research by Joshua Giardino (@techarity) called “Just How Smart Are Search Robots?” that examined the large possibility that Googlebot and Bingbot are headless web browsers. Read all about it: http://www.seomoz.org/blog/just-how-smart-are-search-robots @ipullrank
  11. 11. EXAMPLE OF GOOGLEBOT BEING SMART That Googlebot is so awesome! This site renders meta data using JSON objects which means page titles and descriptions are populated at load, but Google still has them indexed. @ipullrank
  12. 12. PANDA & ABOVE THE FOLD ALGO UPDATES Panda and the Above the Fold updates are clear indications that Google is visually examining pages and including user metrics as a proxy for the quality of user experience. @ipullrank
  13. 13. HEAL THE WEB, MAKE IT A BETTER PLACE… LESS OF THIS MORE OF THIS Build compelling user experiences designed with utility for people, but account for search engine robots as well. @ipullrank
  14. 14. DESIGN FAILS #FACEPALM@ipullrank
  15. 15. THE NAVIGATION FROM HELL 2012 - LG US finally gets faceted navigation LG’s website featured 1997-esque recreation of framed navigation that’s hard to properly mouseover and leaves every page with nearly 400 links. More recently LG US finally rolled out faceted navigation with less links on the page, unfortunately other countries haven’t. @ipullrank
  16. 16. FLASH FOR NO REASON The full functionality of Alison Carmichael’s site could been created using HTML, CSS and JavaScript. As it stands Googlebot is will not index the content this site. @ipullrank
  17. 17. VIDEO, BUT NO TRANSCRIPT Google cannot see video. It is very important to provide text-related content around videos. Transcripts are the easiest way to do this. Check out https://www.speechpad.com/ for this. @ipullrank
  18. 18. THE GIANT IMAGE I guess they can just blame it on the brownies… Too soon? This site was launched as a part of an awesome Fiber One viral video campaign featuring Cheech & Chong on a Magic Brownie Adventure, but all of the text is on one really large image and the page didn’t even have a title tag. @ipullrank
  19. 19. YOU CAN’T WIN ‘EM ALL2011 version was a giant flash movie 2012 version is a little better Sometimes you have to bite your tongue and wait for a redesign, but sometimes that redesign finally comes and it’s still a mess. Sigh… @ipullrank
  21. 21. THE NEW SEO PROCESS Opportunity Discovery Optimization Content Measurement Strategy / Development Social Strategy / Implementati Technical on Development I recently wrote about what I call the New SEO Process and designing for SEO falls into the Opportunity Discovery, Content Strategy/Development and Technical Development phases. Read the post: http://www.seomoz.org/blog/the-new-seo-process-quit-being-kanye @ipullrank
  23. 23. USE SOCIAL LISTENING TOOLS Scout Labs Alterian SM2 Social Mention Use social listening tools to perform audience research to understand what your audience is truly looking for. Social Mention and Topsy are free http://www.socialmention.com & http://www.topsy.com @ipullrank
  24. 24. PERSONAS Personas are representations of the user segments in a website’s target audience based on market research and business goals. Typically 4 personas with defining attributes and alliterated names like “Professional Pam” are the output. @ipullrank
  25. 25. THE CUSTOMER DECISION JOURNEY Where a user is in the customer decisions journey is called their “need state.” Need states can be explicitly spelled out per keyword and should be as part of the keyword portfolio. Need states can also be custom. @ipullrank
  26. 26. OUTPUT – KEYWORD PORTFOLIO The Keyword Portfolio is a spreadsheet that outlines keyword opportunities by search volume, current ranking, landing page, need state, and target segment. @ipullrank
  28. 28. OUTPUT – SEO COPY BRIEF This Document outlines a keyword-relevant information architecture, objective, audience, key performance indicators and best practices for content development. @ipullrank
  29. 29. OUTPUT – ANNOTATED WIREFRAMES The wireframes are your opportunity to make sure the site is visually adhering to SEO recommendations and the place for dev and creative teams to make sure they are doing things right @ipullrank
  30. 30. TECHNICAL IMPLEMENTATION SITE MIGRATION CONSIDERATIONS QUALITY ASSURANCE Perform an implementation audit once the site is built At this point, you will have laid down all SEO considerations.. Site migrations are to handle all 301 redirects. All that remains is ensuring that everything is implemented correctly. @ipullrank
  31. 31. DOES IT WORK? WHY, YES IT DOES!@ipullrank
  32. 32. CASE STUDY – AUDIENCE RESEARCH 1. 2. 3. 4 5. 6. 7. Motivation Decision- Research Booking Pre-flight Travel Post-travel to travel making How do I crystallize Need StatesI want to collect new What is out there that Who’s going to help What do I need to do my travels so that Of the options Who can I rely on to experience, add to would be fun and me fine tune and to activate my trip so they are easy to available, what is help me make the my personal story, interesting to do make the plan that it’s as easy as share, and provide feasible given time & most of my trip? and create special alone and/or with the possible? possible? inspiration to me and budget constraints? memories people I care about? others evermore?Occasion: Get Ideas: Search for: Search for: Locate: Connect: Organize: Examples of What’s happening-Season/Holiday Key trip info: -With local info -Memories/events From friends, Activity and experience -Cheapest flight options-NY’ eve -Luggage rules -With resources (guides, -Evidence you’ve been there/ family,colleagues, extended options at different based on timings-Valentine’s D -Check in time gurus) Memorabilia social media network, destinations - Cheapest flight options-Honeymoon -Terminal to go to -Activity ideas -New ideas bloggers, TV personalities, based on destination (look for-Birthday gift movies, activity groups & promos and time suggestions) -Currency exchange-Anniversary forums -Ways to and from airport-Stag do Compare: -Travel tips Package:-Reunion Destination options based on Record:-Accomplishment timings, costs, and ease of Compare: -Experiences Trip takeouts so as to extend-Time off Search for: getting there Time options vs. budget Book: -Memories the benefits gained from the trip Occasion or experience across key providers -New ideas, contacts, -Car hire knowledge sought on google, -AccommodationExperience: publications, forums, social -Airport bus-Broaden horizon media groups,etc Commit: Share:-Hobby/skill To a scenario To build on and showcase-Well-being/R&R-Adventure Manage: who you are-Landscape (sea, mountain, Info updates, efficient andplant) easy task completion-Weather (sun, snow, wind) Inspiration Research Commitment Experience We used social listening to identify need states and build personas which then dictated SEO, content strategy and User Experience. @ipullrank
  33. 33. CASE STUDY – INFORMATION ARCHITECTURE 1. 2. 3. 4 5. 6. 7. Motivation Decision- Research Booking Pre-flight Travel Post-travel to travel making Occasion Activity Destination Offering Simplify Connect RememberCore Semantic Groups FlightsCountry/Region Logistics Timing City/Airport Cheap Flights We identified the need state matched the client’s business goals and mapped them to semantic groups to dictate the information architecture. @ipullrank
  34. 34. CASE STUDY – KEYWORD RESEARCH Identify what people want and present it in a way that matches their expectations using the language they expect in order to provide the best user experience to your target audience and improve conversion. @ipullrank
  35. 35. CASE STUDY – SITE DEVELOPMENT Navigation and sub- navigation reflect need states UX and content developed with the concerns of our personas We built a user experience indicative of these considerations @ipullrank
  36. 36. CASE STUDY – RESULTS Bookings Organic Traffic We improved rankings and conversions dramatically by marrying these concepts. @ipullrank
  37. 37. PRO TIPS ACTIONABLE STUFF@ipullrank
  38. 38. SPEAK YOUR TEAM’S LANGUAGE “We need to implement “We need ALT tags on ALT attributes so Google images to comply with can understand images” Users with Disabilities mandates.” Your team won’t But they will care about ALT care if there tags this way. are potential legal issues! Explain SEO recommendations in context of things that matter to your team to get them to actually move on initiatives that impact SEO. @ipullrank
  39. 39. THE EXPANDABLE DIV IS YOUR FRIEND Matt Cutts says this just fine! Use the expandable DIV to allow large blocks of text in your design without having them to obtrusive. See this in action at http://www.lg.com/us/laundry/laundry-tips.jsp @ipullrank
  40. 40. USE WEB SAFE FONTS http://www.google.com/ webfonts http://www.typekit.com Typekit was recently acquired by Adobe. There’s no reason to use them at this point. They have a large amount of fonts. If not them then check out the Google Font API @ipullrank
  41. 41. USE HTML5 PUSHSTATE() FOR AJAX Malie Ohye says this is okay! Use this HTML5 function to dynamically update the page’s URL whenever certain AJAX events happen to ensure that the page is crawlable and link-friendly. Read @robousbey’s post about it: http://www.seomoz.org/blog/create- crawlable-link-friendly-ajax-websites-using-pushstate @ipullrank
  42. 42. USE STANDARD META DATA Page titles and Meta Descriptions are still the first impression you get to make on a user to encourage them to click through to your site. @ipullrank
  43. 43. USE FACEBOOK META DATA Facebook Metadata is the first impression your page will make on users that discover your page via Facebook. Put your best foot forward. Use the Open Graph Helper Bookmarklet to check your FB Meta Data http://ipullrank.com/open-graph-helper/ @ipullrank
  44. 44. OPTIMIZE FOR SITE SPEED Shout out to @usethedorr for making us fast! The site speed plugin for Chrome & Firefox provide explicit insights into how to improve the speed of a site. Use these to ensure that your design is optimized for speed. @ipullrank
  45. 45. USE MICROFORMATS (SCHEMA.ORG) Search Engines are making a large attempt to move to object-orient the web and are rewarding sites by placing annotations and images in the SERPs. Embrace these in your site builds. http://www.schema.org @ipullrank
  46. 46. USE PAGINATION MARKUP For paginated content tell Google what are the component pages and the view all page. Watch Maile Ohye’s video - http://www.youtube.com/watch?v=njn8uXTWiGg @ipullrank
  48. 48. MICHAEL KINGDirector of Inbound Marketing www.iacquire.com mike@iacquire.com @iPullRank THANK YOU / Q&A