{"id":28103,"date":"2013-10-01T14:59:02","date_gmt":"2013-10-01T21:59:02","guid":{"rendered":"http:\/\/www.bruceclay.com\/blog\/?p=28103"},"modified":"2023-01-31T12:57:16","modified_gmt":"2023-01-31T20:57:16","slug":"seo-friendly-web-design","status":"publish","type":"post","link":"https:\/\/www.bruceclay.com\/blog\/seo-friendly-web-design\/","title":{"rendered":"SMX Boot Camp: SEO Friendly Web Design (#smx #14A)"},"content":{"rendered":"
Ah. This is a good one. In this session Shari Thurow<\/a> (@sharithurow<\/a>, Founder and SEO Director at Omni Marketing Interactive) will be showing us how to create search engine friendly sites that can be read and indexed by search spiders, but are also equally appealing to human visitors. A great resource for those dealing with, ahem, I mean\u2026 highly respecting the feedback of <\/i>web designers who aren’t convinced you can have SEO friendly web design without compromising user experience.<\/p>\n <\/a>Yay for SEO and UX working together, and yay for educating entire teams on the value of both! Let\u2019s go.<\/p>\n About Shari Thurow \u2013 She’s the (wo)man when it comes to SE friendly design. Been doing this since 1995. She is a designer and a developer; good technical resource.\u00a0 Web usability and UX professional since 2002.<\/p>\n There\u2019s \u201cno other field where there is more swearing than website usability\u201d says Shari. (CA:\u00a0I love this and agree.<\/em>)<\/p>\n All of the recommendations is this presentation are based on data!<\/p>\n Findability has three areas<\/span>:<\/span><\/p>\n Browsing When you are UX testing a website you\u2019re not testing the person, you\u2019re testing the website.<\/p>\n We\u2019re playing a game now. \u00a0It\u2019s called \u201cIs this website SE friendly or not. \u201c<\/p>\n Shari says our brains (male and female) are wired to think three things: The Mayo Clinic is a site that does extraordinarily well in regards to SE friendly web design.<\/p>\n 1) Designing a website for people who use search engines<\/p>\n 2) SE Friendly design is NOT designing just for obtaining SERP ranking. Don\u2019t want to focus on technology-centered design.<\/p>\n 3) Grant access to desirable content<\/p>\n 4) Limit access to undesirable content (IE: Duplicate content)<\/p>\n 5) How you place words and graphic images on your website \u2013 how you physically arrange things \u2013 tells SEs what you think is important. If it\u2019s important SEs assume you\u2019ll put it higher up on your page.<\/p>\n Google is not going to like you; Google is not going to subscribe to your newsletter; Google is not going to add a pair of ski Googles to cart. Google and Yahoo and Bing are trying to figure out what searchers want and give it to them; so YOU have to figure out what they (the humans) want and give it to them, too.<\/p>\n <\/p>\n (legible, scannable, understandable, makes sense in search listing. Can people read it??<\/b> Can people read it ON A SMARTPHONE?<\/b>)<\/p>\n Content needs to be easy to read, and easier to scan.<\/p>\n \u00a0TEST! Is this easy to read? No!<\/p>\n Be careful about using Grey. A lot of people don\u2019t recognize grey as clickable.<\/p>\n Don\u2019t format your clickable and nonclickable text to look alike. This is a bad user experience and for SEs this looks like spam.<\/p>\n <\/p>\n (People scan before they read;\u00a0 can humans understand your content as well as technology?) All clickable text should look clickable, all not clickable text should look NOT clickable.<\/p>\n Easy to navigate answers the questions: Where am I? Where can I go? How Can I get there?<\/b><\/p>\n Make it easy for people to decide which link to click on.\u00a0 <\/a><\/p>\n Be careful about putting navigation in the \u201cBanner blindness\u201d zone<\/p>\n Apple Germany and Apple UK = really good examples of navigations that rock.<\/p>\n TEST: Which site navigation is easier to read? <\/a><\/p>\n <\/p>\n Types of site navigation schemes (from most to least SE friendly)<\/span><\/strong><\/p>\n Text links Expanding and collapsing navigations (The ones that show the + and \u2013 sign) are the WORST for Search Engines).<\/b><\/p>\n <\/b>Flyout menus have the most errors; dropdown menus tend to have the least amount of errors.<\/b><\/p>\n MegaMenus tend to lose up to 20% revenue! If you NEED to do a MegaMenu, the FoodNetwork has a good example that is SE friendly and user friendly.<\/p>\n If you give people too FEW choices, it ticks off users. But if you give them too MANY choices, they are also ticked off because they don\u2019t know where to begin. You want something in between; that \u201cin between\u201d you will feel out with testing.<\/p>\n [Having trouble condensing your MegaMenu? Hire an information architect; that\u2019s what they do. It\u2019s called a \u201ccard sort test\u201d and there\u2019s two types; open and closed. You need both of them.]<\/p>\n If a site navigation scheme is NOT search engine friendly should you not use it? NO! USER EXPERIENCE FIRST!<\/b> If your users like to use the navigation, use it, but make sure to include text links as well.<\/p>\n Always try to have some form of text navigation on your website. \u00a0A fat footer can be really helpful WHEN DONE RIGHT.<\/p>\n Really big websites need to have a site index as opposed to a site map.<\/p>\n <\/p>\n Before people can interact with your website they have to find<\/i> your website.<\/p>\n If you don\u2019t want people to notice something, put it in the lower right hand corner of the screen. People are less likely to look down there.<\/p>\n After arriving people don\u2019t mind clicking through pages as long as they feel like they are making progress.<\/p>\n <\/p>\n This is how SEs are able to determine the \u201caboutness\u201d of your website. Layout\/design\/labeling communicates trust\u2026<\/p>\n There\u2019s actual download time and perceived download time. The latter is more important than the former. If people get their keywords validated they will regard the download time as good; if they don\u2019t get what they want they will perceive the time as slow.<\/p>\n Perceived download time depends on context:<\/p>\n <\/a><\/p>\n <\/p>\n Are people saying the same or similar things about your website as you are saying about your website? (This is where inbound link and \u201clink building\u201d is very important.)<\/p>\n <\/a><\/p>\n Searcher goals are HUGELY important! Does your searcher want navigational, information (63-80% of SE queries), or transactional \u00a0(24-24%) queries. Shari calls these \u201cGo, Know or Do\u201d\u00a0 goals.<\/b><\/p>\n <\/a><\/b><\/p>\n <\/p>\n Primary Text \u2013 ALL Search Engines read and use to determine relevancy<\/span><\/p>\n Secondary text \u2013 SOME search engines read an duse to determine relevancy<\/span><\/p>\n Primary text items are more important than secondary text elements. Make sure to place keywords in your titles, visible body text, anchor text , meta tags and ALT text.<\/p>\n <\/p>\n <\/a><\/p>\n Mobile users read! (shocker!)<\/p>\n <\/a><\/p>\n Do not assume responsive design is necessarily Search Engine friendly! Websites designed for mobile have to follow the same 5 rules for web design (covered above<\/i>) as desktop websites.<\/p>\n Responsive design works well for some types of websites (a resterautn for instance), but most sites need to have a mobile-specific website created (IE: The Mayo Clinic website)<\/p>\n Responsive design DOES increase the download time of a website. Count the numbers of images; the number of scripts \u2013 those both bog down mobile websites.<\/p>\n <\/b><\/p>\n Social signals and popularity are both forms of validation. The idea is to get a quantity of quality links. \u00a0<\/b><\/p>\n <\/b>When you are logged in, Search Engines remember click popularity and adjust your SERP results based on that.<\/b><\/p>\n
\nSearching
\nAsking social network<\/p>\n
\nCan I eat it? Will it eat me? Can I have sex with it? (So if you are a restaurant, you better make sure your website shows food!)<\/p>\n
\nThings you need to know:<\/span><\/b><\/p>\n5 Rules of web design: Make It\u2026.<\/h2>\n
1)\u00a0\u00a0 Easy to read<\/h3>\n
\n<\/a><\/p>\n2)\u00a0\u00a0Easy to navigate<\/h3>\n
\n<\/a><\/p>\n
\n
\n<\/a><\/p>\n
\nNavigation buttons
\nImage maps
\nMenus (form and DHTML)
\nFlash<\/p>\n3)\u00a0\u00a0Easy to find.<\/h3>\n
4)\u00a0\u00a0Consistent in layout, design and labeling<\/h3>\n
5)\u00a0\u00a0 Quick to download<\/h3>\n
How Search Engines Read Websites<\/h2>\n
\n
What kind of text should you use on your website?<\/h2>\n
\n
\n
These are all no nos:<\/h2>\n
Mobile<\/h2>\n
Popularity component<\/h2>\n