SMX Boot Camp: SEO Friendly Web Design (#smx #14A)

Ah. This is a good one. In this session Shari Thurow (@sharithurow, 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… highly respecting the feedback of web designers who aren’t convinced you can have SEO friendly web design without compromising user experience.

Yay for SEO and UX working together, and yay for educating entire teams on the value of both! Let’s go.

About Shari Thurow – 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.  Web usability and UX professional since 2002.

There’s “no other field where there is more swearing than website usability” says Shari. (CA: I love this and agree.)

All of the recommendations is this presentation are based on data!

Findability has three areas:

Browsing
Searching
Asking social network

When you are UX testing a website you’re not testing the person, you’re testing the website.

We’re playing a game now.  It’s called “Is this website SE friendly or not. “

Shari says our brains (male and female) are wired to think three things:
Can 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!)

The Mayo Clinic is a site that does extraordinarily well in regards to SE friendly web design.

Things you need to know:

1) Designing a website for people who use search engines

2) SE Friendly design is NOT designing just for obtaining SERP ranking. Don’t want to focus on technology-centered design.

3) Grant access to desirable content

4) Limit access to undesirable content (IE: Duplicate content)

5) How you place words and graphic images on your website – how you physically arrange things – tells SEs what you think is important. If it’s important SEs assume you’ll put it higher up on your page.

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.

 

5 Rules of web design: Make It….

1)   Easy to read

(legible, scannable, understandable, makes sense in search listing. Can people read it?? Can people read it ON A SMARTPHONE?)

Content needs to be easy to read, and easier to scan.

 TEST! Is this easy to read?

No!

Be careful about using Grey. A lot of people don’t recognize grey as clickable.

Don’t format your clickable and nonclickable text to look alike. This is a bad user experience and for SEs this looks like spam.

 

2)  Easy to navigate

(People scan before they read;  can humans understand your content as well as technology?) All clickable text should look clickable, all not clickable text should look NOT clickable.

Easy to navigate answers the questions: Where am I? Where can I go? How Can I get there?

Make it easy for people to decide which link to click on. 

Be careful about putting navigation in the “Banner blindness” zone

Apple Germany and Apple UK = really good examples of navigations that rock.

TEST: Which site navigation is easier to read?

 

Types of site navigation schemes (from most to least SE friendly)

Text links
Navigation buttons
Image maps
Menus (form and DHTML)
Flash

Expanding and collapsing navigations (The ones that show the + and – sign) are the WORST for Search Engines).

Flyout menus have the most errors; dropdown menus tend to have the least amount of errors.

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.

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’t know where to begin. You want something in between; that “in between” you will feel out with testing.

[Having trouble condensing your MegaMenu? Hire an information architect; that’s what they do. It’s called a “card sort test” and there’s two types; open and closed. You need both of them.]

If a site navigation scheme is NOT search engine friendly should you not use it? NO! USER EXPERIENCE FIRST! If your users like to use the navigation, use it, but make sure to include text links as well.

Always try to have some form of text navigation on your website.  A fat footer can be really helpful WHEN DONE RIGHT.

Really big websites need to have a site index as opposed to a site map.

 

3)  Easy to find.

Before people can interact with your website they have to find your website.

If you don’t want people to notice something, put it in the lower right hand corner of the screen. People are less likely to look down there.

After arriving people don’t mind clicking through pages as long as they feel like they are making progress.

 

4)  Consistent in layout, design and labeling

This is how SEs are able to determine the “aboutness” of your website. Layout/design/labeling communicates trust…

5)   Quick to download

There’s 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’t get what they want they will perceive the time as slow.

Perceived download time depends on context:

 

How Search Engines Read Websites

• Index text
• Follow links
• Measure popularity
• Accommodate searcher goals and behaviors

Are people saying the same or similar things about your website as you are saying about your website? (This is where inbound link and “link building” is very important.)

Searcher goals are HUGELY important! Does your searcher want navigational, information (63-80% of SE queries), or transactional  (24-24%) queries. Shari calls these “Go, Know or Do”  goals.

 

What kind of text should you use on your website?

Primary Text – ALL Search Engines read and use to determine relevancy

• Title tags (spell out your abbreviations in your title tag if there is room!)
• Body copy
• Text at the top of the web page
• Text In and around hyper links

Secondary text – SOME search engines read an duse to determine relevancy

• Meta tag content (VERY important for video optimization)
• Alt text
• Domain and file names

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.

 

These are all no nos:

Mobile

Mobile users read! (shocker!)

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) as desktop websites.

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)

Responsive design DOES increase the download time of a website. Count the numbers of images; the number of scripts – those both bog down mobile websites.

Popularity component

Social signals and popularity are both forms of validation. The idea is to get a quantity of quality links.  

When you are logged in, Search Engines remember click popularity and adjust your SERP results based on that.

 

Some other random mishmash

Read this book! Emotional Design by Donald Norman

“I don’t expect you to KNOW everything, I just expect you to have an AWARENESS.”

Search engines don’t read punctuation marks

Right column should be at least 200px wide (if it’s less than that people tend to ignore it because they think the column is ads)

People tend to look three or four inches from the top of the screen; this is why the H1 is incredibly important.

Generally 7-12 FAQs per page is ok; after 16 it gets really hard to scan (which is a bad user experience.

People are going to decide to scroll during the first initial few seconds based on what’s visible. Which is one reason why it’s important to get the most important information above the fold. (Beyond the fold, Shari doesn’t recommend the page being longer than 2.5 screens.)

A lot of people ignore “banner blindness” ads (in the first 200px of the page)

FreeDictionary.com = bad ad saturation and placement
Mayo Clinic and ABC News = great ad saturation and placement

 

Search Engine Visibility  = Shari’s book. Read it for more information on getting a PDF to rank.