SEO for Small Business Websites Part 2: Design for Better SEO

When people think of Search Engine Optimization, they tend to think of things like links, keywords, and meta tags. Those things are all very important, as you’ll know if you read part one of this series where we got into content optimization in detail. What some people don’t know, however, is that Google cares about design, too, and high-ranking websites use good design for better SEO. No, Google doesn’t judge you if you have too many pictures of cats on your site, but they do care about things that make your site easy for people to use and sites that make it simple for people to find the information they’re looking for. So right here in part 2 we’ll find out how design affects the SEO of your small business website.

In Part 1 I made the analogy that people building websites are Google’s suppliers, providing a product (good content) for Google’s search users. Google wants their search users to be happy with the content that they find using Google, because the attention of their search users (and the data that Google collects about their searches) are the product that Google sells to its paying customers (people who buy ads).

That’s a long and convoluted way of saying that Google wants its suppliers (website owners like you) to be creating good product (your content) that keeps their search users coming back for more.

Great content is wasted if the page it lives on doesn’t display correctly on your screen, and Google evaluates the technical and visual design of your site along with its content when determining your ranking.

Originally this grew out of the need to counter “keyword stuffing” techniques that filled pages full of keywords hidden in text the same color as the page background or in HTML markup that made them invisible to humans but visible to Google. Today Google’s tests include accessibility for people with limited vision, and how well sites work on mobile devices.

The markup code that web pages are made of (HTML, CSS, JavaScript, and others) is described in detailed specs that make it possible for those pages to work (roughly) the same on the wide variety of software and devices that people use to access the web.

In the days when everyone wrote their website code by hand it wasn’t uncommon to find a page that was written using code that worked more or less but wasn’t correct and could cause slowdowns, strange visual results, or even crashes.

That sort of bad behavior is rare today, but Google still evaluates your page markup and rewards well-structured pages that use header tags (h1, h2, etc.) to indicate section headers and hierarchy, as well as looking for content that may be hidden either on purpose or accidentally.

Google also dings you if you overload your site with flashy animations and transitions that slow users’ computers to a crawl and suck up their batteries, but now we’re getting into stuff I’m saving for part 3.

Web site accessibility is a series of articles by itself, but in the context of design for better SEO, what makes a page good for a screen reader also makes it good for Google.

These are things like complete and descriptive alt text for images, tags that identify navigation menus in code so that they can be skipped over, avoiding the use of images containing important text, and using header tags to structure your content. Some of these things can be added to existing pages easily, while others are best incorporated from the beginning when the site or theme is being designed and built.

Whoever builds your site, be it your niece or Squarespace, needs to structure the markup code of each page so that the hierarchy of the code matches the hierarchy of the content.

This is what every web consultant wants to do in a perfect world but gets lost in the rush to add more features as the launch date approaches, so if you start your discussions asking for that as a core requirement you’ll be their favorite client.

In early 2015 Google announced that they would begin to favor “mobile-friendly” sites in searches performed on devices like smartphones and tablets. I can’t speak for your website but on my clients’ sites mobile is roughly 50% of all their traffic, and that percentage is getting bigger each month.

In order to get the “mobile-friendly” designation sites need to follow a set of best practices that Google spells out, such as providing the same content (but not necessarily the same design) to users of all screens, using font sizes and user interface elements big enough to read and tap on when viewed on a small touchscreen, and sending smaller images to smaller screens so that users don’t waste their data plans downloading giant desktop-sized images on their phones.

When smartphones and tablets as we know them first came out sites responded by building two or three different designs that would be delivered to users based on what device the web server thought they were using to view the site. That was cumbersome, inaccurate, and confusing for everyone.

Today the recommended practice is to use a single design and make it “responsive”. This means that they design will adjust automatically to different sized screens in order to provide the optimal user experience, with all of the same content available to all users.

If done correctly (as an old teacher of mine liked to say) it works like magic and doesn’t require any extra work for the person maintaining the site. Responsive design is still new enough that not all CMS themes support it, so before choosing a theme or having a custom one designed make sure that responsiveness is built-in.

Now that you know the basics of tuning your website so its design is clean, lean, and mean, let’s talk tools that can help you figure out what your site needs. Don’t forget to install Google Analytics if you don’t have it already. With its reports you’ll be able to set a baseline to measure the results of all your improvements against.

Here are three free tools that you can use to test your site and see how well it puts into action the recommendations I set out above:

• Google Design Resizer – A new addition to Google’s design resources, it lets you see how your site looks on multiple sizes of screens all in one window. Great for testing your own responsive designs, and for checking out other (competitors’) sites to see how they stack up.
• The original Five Second Test – Want to test your site design with actual users? Of course you do. Sign up for an account and recruit your friends to try your design out and give their feedback, or pay $1 per user for random testers provided for you. Use tools like this early and often. You can use a simple sketch or a fully functional website, but whether real people understand your idea is your most important question.
• WAVE Web Accessibility Tool – A through audit of how accessible your site is and plain-language explanations of the results. Remember, to be accessible a website needs to be structured and tagged in the same way that Google wants it to be, so by making your site accessible you’re helping other people and helping yourself. High five.