Web Design for Search: UX Meets SEO

Your website is your primary digital marketing tool.

Landing pages, social media, ads, email campaigns, and search results all lead back to your site. It’s where customers learn more about you, read your helpful blog posts, buy your products, and engage with you.

What frequently happens is that a business builds a great looking website with all sorts of interactive features, fun graphics, and engaging content, but no one can find it because SEO wasn’t built into the design!

The other side of the coin is that the site is beautifully searchable, but no one visits because it’s ugly and boring. But SEO best practices don’t have to restrict design.

Many businesses don’t optimize for SEO until after they’ve designed their website. These sites look nice, but they lack SEO. They may look pretty, but if the digital marketing isn’t integrated at design time, then they’ll have to go back and fix the design components that aren’t SEO friendly, which is a waste of time and money.

The most economical strategy from a time and cost perspective is to make sure the website is fully optimized for search when at the time of design. By following a few fundamental principles, it’s possible to have a site that is both beautiful and beautifully searchable.

This post is about what to think about when planning a website design around SEO best practices. It covers the most common errors designers make that can put you behind the eightball SEO-wise.

What do search engines see?

Search engines are limited in how they interpret the content of a web page. A webpage doesn’t look the same to humans as it does to Google or Bing.

Search engines use software called crawlers to create an index of your website. When a crawler “sees” your pages and posts, what it’s doing is reading them.

Here’s an example of the difference between what you see and what a crawler sees:

Your View
Google’s View


Optimize your images for SEO

Since search engines can’t make sense of pictures, they rely on the written content to provide context. If a website is all images and no text, the search engine won’t see anything and the index will be a blank page. On the other hand, if a site has no images at all, it won’t be much fun to visit, and potential leads won’t stick around to see that you have to offer. So you need to strike a balance between well-written copy and relevant images.

Relevant Images

The photographs and graphics on your website should be chosen carefully to help the reader understand your written content better. Images enhance user experience and help explain your text in a visual way.

It’s best to use your own images. A well-placed headshot can go a long way towards inspiring customer confidence. Photographs of your work or your team in action lend credibility to your business. Graphs and charts can help explain things visually. Your blog posts should always have a featured image that’s relevant to the article topic.

If you don’t have many of your own, you can use unique images from the web, but be careful. You need to avoid using copyrighted images or ones that look like stock photos.

Obviously Stock


Still stock, but much cooler


Unsplash is a great place to find beautiful high-resolution photographs. You can also check CanvaPixabay, and Pexels

Don’t combine text and images in an image

A smart designer will know how to get the look you want while still using indexable content. Your pages should always have H1 tags, H2 tags, and other crawlable elements. Calls to action, trust signals, billboards, coupons, or other elements that are just photoshopped images will deprive your site of important messages that we want Google to crawl.


Alt tags

All on-page images have tags used for describing what they are. Google relies on the alt tag to interpret what’s on the image and its context on the page. All of your pictures should have a purpose, and the alt tag should describe what it is.

An image tag looks like this:

<img src=“image.jpg” alt=“image description” title=“image tooltip”>

So, if you’re a contractor and there’s a picture of one of your projects on your homepage, the alt tag should read something like alt=”image of project X by company Y.”

H1 and H2 tags

Heading tags are super important for SEO. Like other design elements, headings help search engines make sense of your page. They provide context. You should have at least one H1 heading that describes the page or post. In HTML5 you can use H1 tags for each <section> or <article> as well, but this can get confusing, so it’s best to stick with the one.

H2 tags are used for subheadings and are useful for separating blocks of content into manageable chunks. They’re helpful for both the reader and the search engine.


Nav Structure

All of the pages on your website should be crawlable by search engines. It’s vital to avoid orphans — pages with no direct links. If for whatever reason, you don’t want content indexed, you can use the “nofollow” or “noindex” directives to discourage search engines.

Your content should include relevant internal links to other content on your site, and your navigation should be logically structured. If your customers can easily find their way through your website, so can search engines.

Common barriers to good link structure include:

– content only available by site search
– content obscured by required form submission
– iframes
– Flash or Java
– links hidden in JavaScript

Mobile-Friendly Design

It’s essential that both search engines and your customers can access your content on mobile devices. This means that your site should be easy to read and navigate from phones and tablets.

For more information on this topic see our post 6 Reasons Why Your Website Look Good on a Smartphone.

Share on facebook
Share on twitter
Share on linkedin
Share on email

Give us a little info

Get a free website assessment

Open Lock Icon.png
Login to your account

Thank You

We’ll get back to you shortly

Still on the fence ?

Get a free website assessment