Finding a Balance Between SEO and Amazing Website Design

Finding a Balance Between SEO and Amazing Website Design

 

When putting together your client’s website, there are two major things you have to consider: consumers and search engines. You need an SEO-friendly website that’s optimized for search engines so that you show up in Google when consumers are searching for your products. This is the first challenge, especially since even back in 2016, Google told Search Engine Land that they “processed at least 2 trillion searches per year."

You also need a creative, user-friendly designed website so consumers can easily find what they want to buy. The conflict for site owners, especially sites that have hundreds of products available, becomes finding a balance between being user-friendly and SEO friendly. You have the development team fighting to keep the visual and user aspect of the site very simplistic. On the other hand, you want the site to have enough content on it so Google can rank the site effectively for user search queries.

To further complicate things, businesses often have two separate teams for SEO and web development. Even if both teams are in-house, having them work together to build a beautifully successful ecommerce website becomes challenging.

Conflict often arises with the design of a website and how to make it SEO-friendly, especially when you’re bringing in two different teams and expecting them to understand the complexities of each other’s work.

So how do you find the balance when you have conflicting suggestions coming from the SEO team and the web development team?

In this article, we’ll look at different website elements to consider, and some ways you can find some common ground between these two goals.

You may also like: Canonical URLs: What Are They and Why Are They Important?

Website navigation

Web developers are typically focused on the site’s overall look, feel, and user experience. Designers and developers will care about a page’s visual elements and how consumers interact with those elements. They often like to keep things as simple as possible, especially since consumers using mobile devices have long surpassed consumers using desktop or laptop devices.

On the other hand, SEO marketers will say you need to focus your navigation efforts on optimizing for search engines.

A basic example of this can be found on teacollection.com:

SEO web design site navigation

The main navigation has standard category pages and some favorite collections. Once you click on the boy ‘pants’ category page, you are taken to nice looking page with all of the types of pants they carry, such as corduroys, joggers, etc.

SEO web design product listing

They don’t have a ton of products for each category, so a simpler site navigation would have fewer categories and tabs. However, the expanded navigation with more detailed subcategory pages aids in SEO efforts.

There is a large search volume for various longer tail terms in each of these new subcategories that could drive organic search traffic to the site. Here is what that search volume looks like for some of the new subcategories they could build out for the pants category:

SEO web design keyword research

To rank higher on a Google Search Engine Results Page (SERP), these subcategory pages should target the keywords they’re hoping to rank for.

When you consider large ecommerce sites with hundreds or thousands of products, site navigation becomes even more crucial.

REI’s website is a great example of SEO-friendly site navigation—they have a very large navigation for each category on the site. For example, when you click on the ‘Camp and Hike’ category, you get a massive list of subcategory pages.

SEO web design catalog menu

They have an extensive navigation, which is good for SEO, but not always on point with the brand. How do you balance the two conflicting suggestions?

Whether the two teams realize it or not, the goal is the same, which is to have a site that has organic search visibility and is easy for people to navigate and make purchases from. When considering website navigation best practices, both groups need to focus on solving these two issues.

This means making a site easy to navigate for people, and then optimizing for search engines without hindering user experience. A good starting point is to look at what ranks on page one of Google for your keywords, and take a look at what those sites are doing.

For example, if you do a Google search for the keyword ‘joggers for boys’ from the example above, you will see a mix of sites ranking.

SEO web design Google Shopping listing

SEO web design SERP

Nearly all of the organic search results are subcategory pages, so having a dedicated page for this keyword is highly useful from a search and likely user perspective. Using the same process as above, when you Google ‘boy’s corduroy pants,’ most of the pages ranking are product pages rather than subcategory pages. This means you could likely optimize a product for that keyword, and not need to build out a dedicated subcategory page.

Additional points to consider when trying to optimize for people and search engines include:

  • Using a content hierarchy. This organizes your website pages through categories and subcategories. If you have more than a dozen products on a page, you could consider building out a subcategory page.

  • Cross-linking between pages. SEO and content teams create useful blog posts, FAQs, and other content that can direct more traffic to product pages and vice versa. Horizontal linking easily navigates consumers to more information about your products and/or company, and also boosts your SEO efforts.

  • No thinking required. Ultimately, navigating your website shouldn’t require much brain power. Your website should clearly guide users where to go.

You may also like: 10 Technical SEO Tips to Get the Most from an Ecommerce Website.

Content: is less more, or is more more?

The term content encompasses everything on your site, from the text, to animations, and everything in between. All this content helps inform and engage customers through their customer journey until they purchase. However, in Google’s eyes, not all content is created equal.

Web developers often don’t have this in mind when designing a site. For example, a `.jpg` image with text overlay is not considered content to a search engine. The search engine will see the image, but be unable to read the text unless it is put onto the site in HTML text code.

SEO teams often push for more content, but fail to understand how it will impact the site design, functionality, and layout. Encourage your SEO teams to consider and understand the content funnel for your store, and to create copy that does not conflict with user experience.

Development teams and SEO teams should work side-by-side to place SEO-optimized copy in areas of the website that do not conflict with UX or overall design.

"Development teams and SEO teams should work side-by-side to place SEO-optimized copy in areas of the website that do not conflict with UX or overall design."

What kinds of content?

A simple way to think about the kind of content that should go on the site is to consider each phase of the customer journey. This will help with the layout of the text, as well as let you know where text versus visual content is needed.

For Shopify stores, that means potentially having content on your clients’:

  • Homepage
  • Collection pages
  • Category pages
  • Subcategory pages
  • Product pages

Once you determine the kind of content the site will need, the design team can be extremely valuable in creating a solution that ties everything together.

A great example of this is once again REI’s site. They have done an exceptional job of tying in content with the site design to help consumers get educated about the product, in addition to explaining the benefits these kind of products offer.

For example, if you land on the ‘Camping and Hiking’ page of the site, the site design provides you with a number of pages you can visit and a list of over 4,000 products to look through.

SEO web design image optimization

As you filter down to specific subcategory pages using the filters on the left side of the page, you start to find useful information, outside of just products. For example, when you land on the main backpack page, you can filter the results a number of ways, including by backpacking packs, daypacks, travel packs, etc.

SEO web design sub categories

As you dig further and start to select the type of packs you want, you get additional quick links. For example, when you click backpacking packs, you find a new mini menu with weekend, multi-day, extended, or learn more options.

SEO web design site listing

If you click ‘learn more’, you are taken to a page that explains the types of bags for various trips, fit and features of different bags, etc. This is a basic but effective way of tying in content to help in the purchase process for users, and helping Google crawl and index information easily, in order for the content to rank well in search results.

SEO web design expert advice

As a result, you get a site that doesn’t have too much text on the category and subcategory pages, but ties in the right kind of content when needed. Users can navigate the site, and Google has the information to help REI rank for their desired terms.

SEO web design to appear in Google images

As designs become more complex, the SEO and web development teams need to be more aligned and work together to make sure the UI/UX doesn’t hinder search engines, and vice versa. Again, the question both teams should ask is: What information does a user need to help them make a purchase?

Once that is defined, you can come up with a solution for integrating indexable content.

Indexable Content

If a search engine can easily crawl a site— easily exploring, reading, and understanding the content on each page of the site—then it’s considered an SEO-friendly site, and the probability of the pages appearing in the search engine results pages becomes much higher.

In order for the site to be crawlable, the main content on each page should be in HTML text format, since that is the easiest way for Google to understand what the page is about.

"If a search engine can easily crawl a site— easily exploring, reading, and understanding the content on each page of the site—then it’s considered an SEO-friendly site"

One of the biggest challenges that web development and SEO teams run into is the use of JavaScript vs. HTML. HTML is great for Google but lacks the functionality that JavaScript brings, since sites are designed with various JavaScript frameworks like Angular, React, and more. Because of this, many developers like to use JavaScript to make the site look and function a certain way.

However, all of these different Javascript programs can cause issues for search engines, due to things like code errors, client-side rendering, etc. It takes Google a large amount of time to download, render (parse, compile, and execute JS code), fetch external resources, and then index that information. The more you add to your JS library, the more resources it takes Google to crawl and index that information. Both teams need to be aware of this fact, since all of this impacts site speeds and Google’s crawl budget.

SEO web design and the effects on Google's crawl budget
The difference in time and resources needed to crawl HTML and CSS versus JS on a site

Additionally, you should always check to see if Google is able to crawl and index the content on your site. A quick way to check to see if the site content can be seen is to do a quick search in Google using the exact text on a certain page.

For example, when I search for text on the Tea Collections page, this is what comes up:

SEO web design: Google site research

The Tea Collections page shows up in the SERP, which means Google can crawl and index the information. You should always check content that is pulled in using JavaScript to make sure Google can find it.

If you copy and paste the text into Google and your site doesn’t show up, you need to troubleshoot the JavaScript coding to identify where the problem is, and work with the development team to find a good solution that allows Google to crawl and index your content.

Ultimately, users want a site that loads fast—40 percent of users are likely to abandon a site if it doesn’t load within 3 seconds. It’s in the best interest of both teams to create a site that looks good, has the information a user needs, and loads fast.

And yes, you can strike a balance between the need for JavaScript and the need for an SEO-friendly site. You can look into methods to make JavaScript work for your site without causing SEO issues, so everyone wins.

You may also like: The Key Aspects to Consider When Building Multilingual Websites.

Product and website images

Too-large images on your site can slow down the site’s load time, making Google less likely to prioritize it in the SERPs.

It’s fairly common for developers to add high quality images to the site regardless of their size. They typically do this because most ecommerce platforms resize the images on the front-end of the site to look a certain way. The SEO team, on the other hand, wants smaller, compressed images to further improve load times.

Looking for free stock photos for websites and commercial use? Download free, high-resolution images with Burst. Try Burst now.

While this is great for SEO, the development team likely doesn’t want to compress all of the images they upload to the site for every page, since most product pages have multiple images of the product.

Fortunately, image compression tools have gotten better, to make compression more convenient. You can typically compress an image to reduce file size without sacrificing noticeable image quality.

SEO web design image size optimization

There are numerous image compression tools out there that can reduce your image size and keep the quality high, while improving your SEO.

Walking the line between SEO and design

The key to a well-designed, SEO-friendly website is to bridge the gap between the web development and SEO optimization process. Encourage your SEO and development teams to coordinate from the beginning, so major changes don’t need to be made last minute in order to accommodate one or the other. SEO copy doesn’t have to be ugly, and beautiful sites can be search engine friendly. It just takes a coordinated effort and the forethought to work together.

How do you bridge the gap between SEO and good web design? Share your experience in the comments below!

About the Author

TJ Welsh is the VP of Marketing at Stryde. He has been working in digital marketing for over 10 years and has helped hundreds of businesses grow through SEO, content, social, and paid ads. If he isn’t learning the latest digital marketing trends, he is spending time with his family.

Grow your business with the Shopify Partner Program

Learn more