SEO web design refers to developing, creating, improving, and maintaining a website that’s both search engine-friendly and user-friendly.
How do you build a website that ranks well and is user-friendly?
Why Does SEO Matter When Designing a Website?
Your local business website can rank in two places: the map pack, sometimes referred to as local SEO and below the map pack in the organic search results.
For example, we’ve been able to rank Salt Water Digital for local SEO vancouver organically and 1,700 people viewed our Google Business Page in November of 2023.
Here’s our Google Search Console overview for Salt Water Digital, showing the number of clicks, impressions, and the average click-through rate on the SERPS: Some of those clicks come from organic search results and others come from our Google Business Page.
Carefully considering on-page SEO during the web design process sets you up for success if you run SEO campaigns in the future. Your well-built website will complement these SEO efforts, especially when the site also meets the needs of the users you gain from these efforts.
In fact, user satisfaction is a key indicator to Google that you have designed your website well with users in mind.
Google uses user metrics like click-through rate, bounce rate, and completion to determine their search results. .
Completion is an ideal scenario where a user clicks through to your website on the SERPS, reads an article or page on the website, finds the right information they need, and doesn’t click back to the SERPS to look for more information on the same query.
Satisfying the user’s intent in this manner requires good on-page SEO, which involves good user experience and search engine experience.
Web Design & SEO
I’ll split these aspects into three groups based on their importance:
- Very important
- Important
- Somewhat important
Very Important Elements for SEO and Web Design
This category includes the following factors:
- The three horsemen—URLs, H1 tags, and SEO titles
- Site indexing and crawling
- A keyword for each page
- Website layout and CTAs
- Keyword intent that matches user search
URLs
A URL or web address is a unique identifier that directs users to a specific resource or webpage on the Internet. It includes a domain name and a slug after the name.
The slug is the most important part of the URL because it carries the keyword you are trying to rank for. Good local keyword research can help you determine a good site structure.
For example, this is an example of a good URL for the target keyword “local SEO Vancouver”:
The URL slug should give search engines a concrete idea of your target keyword and what that page is about.
Here’s an example of a poor URL slug targeting the keyword “air conditioning repair Vancouver”:
Note that the slug doesn’t match the target keyword, which is one reason the page is buried in Google’s results.
Ideally, use a slug with 2-4 words. Using too many words will be over-optimizing, a practice that doesn’t work well.
This would be an over-optimized slug: “/local-seo-company-in-vancouver-for-smal-/businesses”.
You’ll want to get the URL right in the first place because changing it can negatively affect your page’s SEO. Even if you handle the change correctly (with a 301 redirect) you will still lose some of the authority that URL has accrued from the links that reference it once you remove it from your website.
If you don’t handle the redirect correctly, changing or removing a URL can break the bookmarks and links that point to that page and lead to error pages instead of your content.
H1 Tags
Each page on your website should have only one H1 tag. The header can be any length provided it explains what you do or the purpose of the page.
Your H1 tag should include your target keyword for the page, such as “self storage units in Seymour, TN”.
Here’s an example of an H1 tag for one of our clients ranking for the target keyword:
The H1 tag doesn’t have to be the first header on the page.
For example, our business website has an H2 tag as the first header to drive clicks and conversions.
Further down the page the H1 Tag is:
A Local SEO Company In Vancouver Tailored For Small Businesses
You can use H1 Checker or Screaming Frog to show how many H1 tags you have on your page. You’ll want to remove extra H1 tags to ensure they aren’t competing with the right one.
While H1 Checker is a quick option, Screaming Frog SEO Spider is better because the free version crawls up to 500 URLs and shows URLs, meta descriptions, H-tags, and page SEO titles. It also shows issues you can optimize, such as long, missing, multiple, or duplicate headings.
SEO Title
The SEO title shows in the SERPS after your business name and the page URL.
SEO titles appear like a headline and usually carry the page or post’s title but may include other items like the name of your site or business description.
Be sure to add your target keyword in the SEO title without stuffing it.
Site Indexation and Crawling
Is your site indexed and being crawled by search engines?
Ensure you have allowed Google and other search engines to crawl your website. This makes your website and its pages indexable and rankable on the SERPS.
Some elements to disallow indexing include your staging site, categories, internal site search URLs, and tags.
If your website is built on WordPress, here’s one area you should check:
- Access your admin dashboard
- Go to Settings ~ Reading ~ Search Engine Visibility
- Ensure the Search Engine Visibility button is unchecked.
You will also want to submit the site to Google Search Console and Bing Webmaster Tools and submit a sitemap. If a page isn’t indexing correctly you manually submit each page for indexation using the URL Inspection tools.
Google Search Console has a page indexing section that shows you all the indexed and unindexed pages. It shows reasons and sources for the unindexed pages for you to validate or correct, such as:
- 404 errors
- Pages with redirects
- Pages blocked because of other 4xx errors
- Pages excluded from indexing using ‘noindex tags’
- Server errors
- Discovered but not currently indexed pages
More advanced users can use a robots.txt file to tell Google which files or pages to crawl or not crawl on your website.
One Target Keyword Per Page
Ideally, your service or area pages should target one keyword. This means having only one page for each area or service, complete with its accompanying H1 tag, SEO title, and call-to-action.
As a local company, you might have problems using one page to rank multiple locations or services.
Note that a single page can rank for multiple keywords and not just the main target keyword. These other keywords are secondary and variations of the main one.
For example, if your target keyword is “HVAC Nashville”, you may also rank your page for “HVAC services in Nashville”, “HVAC services and repairs in Nashville”, or “Nashville HVAC service”.
Matching Keyword Intent with User Search
The kind of page you create for a given keyword should match the user’s search intent. For example, “HVAC repair Calgary” requires a service page, while “How to fix a noisy AC unit” requires a blog post.
One way to confirm the search intent is to search the keyword and see what Google shows in the SERPS. If the SERPS are populated with service pages, you will do well with a high-quality service page for that keyword.
Layout and CTAs
A good website layout with distinct call-to-action (CTA) buttons makes it easy for visitors to see what you want them to do on the page.
A good practice is to place the first call ,to action buttons at the top of the page in a prominent location.
You can add other call buttons between or after content like social proof, FAQs, discount banners, and reviews.
Using a uniform CTA button leading to the same page is important, even if the anchor text varies.
Here’s an example of a page with a good layout that balances content and CTAs:
Important Elements
Medium SEO web design elements to consider include:
- Responsive website
- Website speed
- Site structure
- Content
- Topical authority
- Your business address
- Internal links
Let’s look at each of the medium aspects in detail.
Responsive Website
Your website needs to function at a high level on both mobile and desktop devices.
Your website should load correctly on mobile and tablet devices that have smaller screens.
A website that doesn’t adjust depending on the user’s screen size or device orientation (portrait vs horizontal) may result in higher bounce rates, which as we discussed above is a ranking factor.
Website Speed
You’ll want your website to load fast to reduce the bounce rate. Most users do not wait for your website to load. Instead, they go back to the SERPs and click on other sites.
You can use PageSpeed Insights to check your website’s speed on mobile and desktop devices. A page speed of 2-3 seconds is fine for mobile devices. For desktop devices, aim for <1.5s,.
Several actions can help reduce the loading time for your website or pages.
First, resize images before you upload them to the website. The right size will depend on the type of image. Below are some parameters to guide you:
- Large or fullscreen images: 1000px on the shortest side
- Icons & Logos (e.g., social proof icons on a service or area page): 150px on the shortest side
- Half Screen Images : 750px on the shortest side
Secondly, use the Imagify plugin to compress your files further once you upload them to the website.
Thirdly, use a good website host like WPX.
Use WP Rocket to optimize your website speed.
- Use Caching This will speed up the website for mobile devices when you enable caching for mobile devices.
- Minifying your CSS files: This removes white space and comments to reduce the file size.
- Minifying your JavaScript files: This also removes white space and comments to reduce file size.
- Deferring load JavaScript: This eliminates render-blocking JavaScript on your website and can improve the loading speed.
- Using LazyLoad for media: This improves the loading time for videos, images, and iframes, as they will be loaded only as they enter or are about to enter the viewport. It can also add missing image dimensions.
Site Structure
We have already discussed URL structure regarding the domain name and the slug. According to Google URL structure guidelines, your URLs should be intuitive for search engines and users.
For example, using hyphens rather than underscores makes the URL more readable, as in the example below:
Similarly, a URL is easier to read if the words aren’t joined. Below is an example of a poorly designed URL:
URL structure matters for user experience and search engine experience. Logically structured URLs make it easy for users to navigate your website as they can see a pattern in the URLs that takes them from point A to B.
Include relevant keywords in each URL to clearly describe the content on your web page. This makes it easy for visitors to see what to expect if they click your link and for Google to know beforehand what the page is about and include it in relevant results.
With a URL such as https://www.example.com/blog/homemade-burger, it’s easy to see what the page is about.
A URL like https://www.example.com/index.php?id_ppi=5802&dcpa38spa is unfriendly because it doesn’t show what the page is about.
Another crucial aspect of your site structure is the crawl depth of your pages. The ideal site structure is one where your service or area pages have a crawl depth of one.
A crawl depth of one means that once the user is on your website homepage, any service page or area page is accessible with a single click.
If you run a blog on your business website, aim for a maximum of two clicks to find a blog post. Check out the example below from one of our clients. The blog posts are accessible with only two clicks from the homepage.
A maximum of three clicks is ideal for a paginated blog with multiple pages and several articles per page. Here’s a good example from another of our clients. The articles from the second page to the last are accessible with only three clicks from the homepage.
If you have a bigger website or multiple sub-services, you can use subnesting, such that the service or area pages are accessible with a hover and one click from the homepage. The website below is a good example:
An easy way to maintain a minimum crawl depth is to have your area, service, and blog pages added to your header and footer.
Content / Writing
To help with SEO, adding relevant content on your area and service pages is important. Each page should have its H1 tag and SEO title with the target keyword.
The number of words to write per page will differ depending on the page type. You can use Surfer SEO to determine the approximate number of words each page should have to satisfy user intent fully.
Some content you can put on the website includes locations you serve, services and sub-services you offer, and FAQs. Reviews and testimonials from past clients are ideal for adding to serve as both social proof and user-generated content.
Use a good content structure to make your pages or blog posts scannable or easy to skim and read.
Some suggestions to make content easy to read:
- Relevant images to break up content
- Short sentences
- Short paragraphs
- Bolded content
- Headers
- Tables/Graphs/Charts, where applicable
- Bulleted lists
- Table of contents, as in blog posts
- Distinct call-to-action buttons
Topical Authority
Topical authority applies more to your website’s blog. To gain topical authority, cover each topic or subject extensively and exhaustively. This can help you rank your website for bigger keywords that you’d otherwise be unable to rank for.
Lots of helpful content on a particular subject makes Google see you as a reliable authority, thus showing your website to searchers.
For example, if you are an HVAC company or contractor, you can have a blog category dedicated to discussing heat pumps with different articles, each targeting a specific keyword.
Your Business Address
Add your business address in the footer and schema to show customers and search engines where you are located.
Listing your address can help your website rank for searches directly related to your location in your industry, such as when someone searches “SEO Vancouver” and you are located in Vancouver.
Internal Links
Internal links help with both user experience and search engine results. They make it easy for users and search engines to tell how your pages relate to each other. Users can navigate your site to find new resources easily.
Use natural and descriptive anchor text without stuffing keywords when linking one page to other related or relevant ones.
For example, you can link from your homepage to service pages, blog posts to the homepage, or blog posts to area or service pages.
Less Important Elements
These elements are good to consider but if an SEO over emphasizes them that’s a red flag.
- Homepage vs internal pages
- Images
- Schema
Homepage vs Internal Pages
Use your homepage to rank for the main keyword relevant to your services or industry.
Then, link your other internal pages, like area or service pages, to your homepage to distribute the link juice to these other pages.
For instance, if you are a moving company based in Austin, Texas, try to rank your homepage for “Austin Texas movers” rather than “movers”. And if you do have an internal location page for “Austin” don’t over-optimize it. You want it to be easy for Google to understand which page is targeting that keyword.
Images Alt Tags
An image alt tag or text allows you to describe an image so blind people navigating your site can have it read to them to know what the image is about.
Image alt tags are important, but you shouldn’t get hung up on them. The trick is to keep them simple and natural. If you target image SEO rankings, add keywords in the alt text without stuffing.
Here are examples of ideal image alt texts:
- “Company XYZ logo”
- “Image of a laptop on an office desk”
Abusing an accessibility feature for SEO is a little underhanded (and it doesn’t work terribly well).
Schema
Schema allows search engines like Google understand details like your business name, address, and organization type.
You can use RankMath Pro to set up a schema for your website.
Frequently Asked Questions
Here are a few questions local business owners ask about SEO web design:
Should Web Designers Know SEO?
Yes. I think your web designer or web design company should be proficient in SEO.
As we have seen, good keyword research precedes website design. Your website’s service and area pages will each target a specific keyword. These keywords should be predetermined.
What is the Difference Between SEO and Web Design?
SEO stands for “search engine optimization” and refers to improving a website to rank high on search engines.
Web design refers to developing and creating a website with elements like URLs, pages, blog, content, navigation menu, branding, and footer.
When the two come together, SEO web design becomes the development, creation, and maintenance of search-optimized websites.
