Web Design and SEO: When, Where, and How to Bring SEO into Your Next Website Project

Design & Development | SEO

Successful websites integrate SEO into some of the earliest planning stages of a web development project. From your site’s taxonomy and menu to considering how design elements will be viewed on a mobile device, SEO touches a surprising number of decisions throughout the web design process. If you’re considering a website redesign or creating a new site, pay close attention to some of the largest SEO touch points discussed in this article. Ignore one of these and your site may not reach its full potential!

Generally speaking, web design and SEO work together to make sure your web pages are fully indexable by search engines, set up to maximize ranking signals, and to appropriately funnel users to conversion points when they’re ready to take the next step. Depending on the size of the team and the diversity of stakeholders, SEO may get lost in favor of flashy web design or user experience decisions. At the end of the day, SEO website design requires a balance that will be unique to each website depending on its goal. As a marketer, our goal is to get marketing qualified leads so we always start web projects with SEO in mind. Just remember, SEO requires careful planning early on to not only grab as many relevant users as possible but to maximize conversions on those you reel in.

In this article, we’ll be discussing the following factors and why they should be ingrained in the design and planning phase of a web project:

Crawling & Indexation

For search engines to understand your website, they must be able to crawl your content. Search engines and humans alike need substantial text to fully understand what it is you do. Ranking signals are based heavily on the text-based content that search engines need to crawl to understand. This means page templates need to focus on fundamentals such as placing easily crawlable text above the fold but also on smaller intricacies such as layering text above your hero image and not baking it into the image itself where it can’t be crawled.

Although Google is better at crawling this, don’t hide your text content behind external JavaScript resources as search engines have a history of trouble crawling content in external JS sheets. Place the text on your pages within the HTML and don’t be shy about linking to other pages on your site when they provide value to your users. This ensures all your content remains crawlable but also gives your users a clear and interactive follow-up if they need more information.


Taxonomy can easily make or break a website’s user experience if you haven’t set up your site in a way users are expecting. SEO comes into play here by offering insights into how your audience is searching for your products and services. Are searchers more interested in your product’s styles, the material it’s made of, or its main applications? Let’s take garage doors as an example.

You may go into a web project with 5 different garage door product lines and think materials, style, price, and dimensions should revolve around these 5 brands.  You may ask your marketing intern to do a bit of keyword research and find that searchers are more interested in garage doors by style (modern, classic, carriage house, etc.) then narrow their options further by dimension, materials, then price. This information now completely shapes the structure of your site as you now know searchers are primarily interested in a “modern garage door” over your D1 Elite Garage Door product line. Web teams can now use this information when setting up a new site’s hierarchy.

This leads us into our next topic quite nicely, your site’s navigation.


Now that you know how your audience is searching, it’s important to structure your menu around their primary interests. Taking our previous example, making your parent menu links centered on styles instead of your product lines may be the right decision to maximize garage door installations. Now searchers can easily click between modern and classic doors, then narrow down their secondary criteria of materials, size, and price to eventually find the product line right from them. Instead of forcing them to learn about your 5 brands and figure out which is right for them, your site puts what they care about first, then allows them to funnel down to the product line right for their garage. Not the other way around. Taking search habits into account on your main menu structures your site around what’s important to your audience, not what you think they care about.

URL Structure

As Search Engine Optimizers, we are bound by the law of the land to appease algorithms. Providing context for these complex formulas make their ranking decisions easier, getting your relevant content a better chance at hitting position 1 or 0 for your target keywords. Your 6-year-old nephew should be able to look at your URL and tell you what’s on that page without even needing to see the content. This distinction is very clear when best practices aren’t followed and you get a URL like this:


instead of this:


Out of the two URLs above, which do you think search engines have an easier time understanding? Making it easy for Google to understand your content is a large part of SEO, so taking proper URL structure into account early on in the design process avoids redirects and headaches down the line. Best practices include the utilization of simple folder structures while following consistent naming patterns to give search engines no doubt about a page’s topic. SEO website design is all about clarity and keeping no secrets!

Mobile-Friendly Design

In 2019, mobile devices browse the internet more than any other device. Mobile-friendliness is not only a ranking factor, but the mobile version of your site is now used by search engines to determine rankings. This makes your site’s mobile experience completely un-ignorable if you’re looking to succeed in the world of search. It goes without saying responsive design is a must in 2019 if you’re looking to succeed in search.

Google offers a number of tools to analyze mobile friendliness, focusing on technical elements such as avoidance of Flash and interstitials, configuring you viewport to scale correctly to a number of different devices, ensuring font sizes are large enough to read on smaller mobile devices, and that touch points are spread far enough to avoid a fat finger click.

Page Speed

Page speed is an area of site optimization where it’s better to follow Google’s lead and optimize toward a set criteria. An old, but great quote from Matt Cutts of Google:

…a lot of people within Google think that the web should be fast.  It should be a good experience, and so it’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don’t want that as much.

This quote was from 2009 and site speed has only become more of a factor in search since this statement. In fact, site speed was announced last year as an official ranking factor. Let that sink in. Your site’s speed has a direct influence on how well your site ranks for target keywords.

A popular trend in the web design world utilizes heavy imagery for a simple, sleek layout. While this has many benefits on how users interact and engage with your content, be wary of media overuse and ignoring text content. Rich image files are one of the biggest ways to hurt site speed, causing long load times with users twiddling their thumbs while they wait for your high-resolution photo to download. If you ever see “Optimize Images” as a Google recommendation from their site speed report, this is what they’re referring to.

The truth is that most users can’t tell much of a difference when images are compressed properly. Lossless compression (AKA taking enough of a hit on image quality to decrease the size of the file, but not enough to make a noticeable change to the human eye) has always been popular, but it’s more useful than ever in assuring mobile devices aren’t taking 10 seconds to populate your webpage.

Make sure your balance of text content and image content is healthy and don’t rely only on rich media to push your point. Having this idea present as early as possible in the design process avoids any page speed fiascos down the road. Design must bake in text areas as well as imagery and videos in order for search engines and users alike to understand your message.

These are the biggest factors that brands should be aware of before starting a web redesign or new SEO web design project. If you have any questions on the above, please reach out to Top Floor and see how an SEO expert can save your next project time, money, and improve your search rankings.