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 optimised 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 e-commerce 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.
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 optimising for search engines.
A basic example of this can be found on www.teacollection.com:
The main navigation has standard category pages and some favourite 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.
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:
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 e-commerce 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.
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 realise 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.
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 optimise a product for that keyword, and not need to build out a dedicated subcategory page.
Additional points to consider when trying to optimise for people and search engines include:
- Using a content hierarchy. This organises 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.
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-optimised 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-optimised 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.
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, day packs, travel packs, etc.
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.
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.
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.
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 for:-
— easily exploring, reading, and understanding the content on each page of the site
—then it’s considered an SEO-friendly site,
Resulting in the probability of the pages appearing higher in the search engine results pages
In order for the site to be crawl-able, 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.
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:
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.
Product and website images
Too-large images on your site can slow down the site’s load time, making Google less likely to prioritise 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 e-commerce 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.
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.
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 optimisation 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.
Funky Howler Finds that balance between SEO and Amazing Website Design. Contact us today.