Website architecture is a key component of technical SEO. To create a technically optimized website architecture, you must create a low-depth page hierarchy, a logical URL structure, and intuitive website navigation. Today, we’ll show you how to do it!
What you’ll learn
- What is website architecture & why is it important?
- How to create a low-depth page hierarchy?
- How to create a logical URL structure?
- How to create intuitive navigation in Shopify?
What is website architecture & why is it important?
Brian Dean (Backlinko) describes website architecture as the way the pages of a website are structured and linked together.
Creating a clean and streamlined website architecture is essential to your technical SEO success. Here’s why:
- It will help search engines crawl and index your Shopify store faster and more efficiently.
- It will help search engines discover new web pages (e.g., new product pages) much faster. In this way, Google will index your new product pages faster. This means more exposure and more sales opportunities.
- It will spread link equity around your website. As a result, it will boost the rankings of your most important web pages, i.e., the pages that directly impact your bottom line - your category and product pages.
- It will help search engines understand the structure of your website and define the hierarchy of your web pages. As a result, search engines will crawl your most important pages more frequently.
- It will help users navigate your website more easily. Thus, it will help you deliver a better shopping experience.
- It will reduce your bounce rate and increase your customers’ time on site.
- It will help you get sitelinks - when your page hierarchy is logical and streamlined, Google can easily analyze your URL structure and add shortcuts to your high-priority pages in your product listings. This will make your listings more appealing and user-friendly. Also, it will increase CTR (click-through rate).
Today, we’ll show you how to create a technically optimized website architecture and reap these benefits. As we mentioned, a technically optimized website architecture consists of three components: a low-depth page hierarchy, a logical URL structure, and intuitive website navigation.
How to create a low-depth page hierarchy?
Having a low-depth (or flat) page hierarchy means that all important pages in your Shopify store are no more than three clicks away from your homepage. For example:
- Homepage > Category pages > Product pages
- Homepage > Category pages > Subcategories / Filters > Product pages
In this way, your homepage can pass link equity to your high-priority web pages - your category and product pages. Then, Google can easily assess their importance and, respectively, crawling priority.
Essentially, the closer a page is to your homepage, the more link equity your homepage will pass to it, i.e., the higher its page authority (PA) will be. Higher page authority means two things:
- Your page will rank higher on the SERPs.
- Google will know it is a high-priority page that should be frequently crawled.
Best practices for creating a low-depth page hierarchy
- The simpler your page hierarchy is, the better. In this way, both humans and search engines will be able to easily navigate your website. Also, a straightforward and simple page hierarchy is important for scalability - having a plan in place right from the start will help keep your website clean, logical, and organized. This is key to delivering a good user experience. It is also essential for SEO.
- Create categories and subcategories. Grouping products based on similar traits is the foundation of a well-organized Shopify store. This is important for scalability as well - as your business grows, so will your inventory. At some point, you may have thousands of product pages. Without categories and subcategories, both search engines and your customers will have a hard time navigating your store.
- Each category should be unique. Don’t create similar categories.
- Don’t create categories you don’t need. Your website has a limited Crawl Budget. Don’t waste it on pages that aren’t important.
- Don’t create categories with very few products as Google may view them as thin content pages.
- Each subcategory should be logically related to its category. Respectively, each product page should be logically related to its subcategory and category.
- Provide filtering and sorting options. Each category/subcategory should have unique filters that cover all possible product characteristics. This will help your customers find what they need much faster. Also, it will help search engines understand your website better.
- Ensure your categories, subcategories, and filtering options are listed in an intuitive manner.
- Your categories and subcategories should have short and descriptive names. If possible, include keywords. Note that the closer a page is to your homepage, the more SEO weight its title will have.
Ultimately, your goal is to create a “clear conceptual page hierarchy” (Google Webmaster Guidelines) and design it with both your customers and search engines in mind.
To create such a hierarchy, you must understand how Shopify menus work and how you can use them to list your products in an intuitive manner. We’ll discuss this in the section on website navigation.
We saved the best for last
In Shopify, your web pages will follow a logical hierarchy by default.
Source: Shopify, Optimizing your site structure for search engines
Pro tip: To further optimize your Shopify store structure, pay attention to the anchor text of internal links - it should be descriptive and, preferably, keyword-rich. In this way, Google will be able to easily understand your internal links and assess their relevance.
Here’s an example of a descriptive anchor text: “Welcome this spring season in style with this beautiful silk shirt!” And here is an example of a vague anchor text that has no SEO weight “Click here to view this year’s summer trends!”
How to create a logical URL structure?
Your URL structure should follow your page hierarchy. For example: Homepage > Collection page > Product page = https://www.yourshopifystore.com > https://www.yourshopifystore.com/collections/sample-collection > https://www.yourshopifystore.com/collections/sample-collection/products/sample-product
Luckily, Shopify takes care of this by default.
View example: https://www.rebelnell.com/ > https://www.rebelnell.com/collections/defiant-collection > https://www.rebelnell.com/collections/defiant-collection/products/kamala-necklace-8
Best practices for creating a logical URL structure
- The page title should match the page URL. For example, if the page title is “Everyday collection” the page URL should be “https://www.yourshopifystore.com/collections/everyday-collection” or “https://www.yourshopifystore.com/collections/everyday”. View example: https://www.rebelnell.com/collections/everyday
- The URLs of your web pages should be comprehensive and easy to read for both humans and search engines. Luckily, one of Shopify’s built-in SEO features is that the URLs have readable structures. For example “https://final.co/products/finalcutlery” instead of “https://www.yourshopifystore.com/products/1234abcd&-3456” Pro tip: If necessary, use punctuation to make your URLs more comprehensive (e.g., “https://www.yourshopifystore.com/collections/womens-shoes/products/brown-oxford-shoes” is better than “https://www.yourshopifystore.com/collections/womensshoes/products/brownoxfordshoes”). It is better to use hyphens (“-”) instead of underscores (“_”) to divide the words in your URLs.
- Include keywords but avoid keyword stuffing so that your URLs don’t look spammy.
- Keep your URLs below 60 characters (including symbols like “-”). Longer URLs are more difficult to parse and cannot be entirely displayed on the SERPs.
- Keep your URLs clean. In Shopify, symbols (e.g., exclamation marks (“!”), question marks (“?”), ampersands (“&”), etc.) are excluded from your URLs by default. However, filler words (e.g., “and,” “the,” “a,” “an,” “if,” etc.) aren’t. Therefore, before publishing a page, ensure to remove all filler words from its URL - they don’t add value to your URLs and distract readers.
The bottom line
Your URL structure should follow your page hierarchy. Your URLs should be short, clean, comprehensive, relevant, and descriptive.
Creating an intuitive navigation structure is essential to providing а good user experience. It is also important for SEO.
There are two types of website navigation: primary (e.g., header menus, drop-down menus, hamburger menus, footer menus, etc.) and secondary navigation (e.g., breadcrumb trails).
In this section, you’ll learn:
- How to add, edit, and remove menu items from the default Shopify menus (your Main and Footer menus)? Also, you’ll learn how to add new menus (if your Shopify theme allows it).
- How to create breadcrumb navigation in Shopify?
Understanding menus in Shopify
Intuitive navigation should be a primary concern when you’re setting up your Shopify store - you must organize your products, collections, blog posts, etc., in a way that helps customers and search engines find them. This is also a key component of technical SEO.
You can edit your online store navigation from the Navigation page in your Shopify admin. To reach the Navigation page, open your Shopify admin > Sales channels > Navigation:
Note: Keep in mind that the appearance and location of your menus depends on your Shopify store’s theme. Compare navigation in different themes
Default menus in Shopify
Your Shopify store has two default menus that appear sitewide:
- Main menu. The main menu can be displayed in the header of your Shopify store, or in a sidebar. It is a form of primary navigation that both your customers and search engines use. In Shopify, your main menu has two default menu items: Home & Catalog. You can create drop-down menus from each menu item. In this way, you can organize your web pages and enhance your store navigation. For example, you can list your categories/collection pages in a drop-down menu from the Catalog menu item.
Source: final.co, header menu
Learn how to set up drop-down menus:
Source: Set up drop-down menus in your online store
- Footer menu. Footer menus are displayed as lists of pages across the width of the footer. Usually, they contain important company information, a contact page, policy pages, FAQ page, and more.
Source: final.co, footer menu
You can edit, add, and remove menu items in your default menus at any time. Learn how:
Source: Add, remove, or edit menu items in your online store
Depending on your theme, you may also be able to add a new menu (e.g., “About,” “Contact,” etc.). There are several ways to achieve this: you can edit the settings in the theme’s Header section, customize your theme code, or work with a certified Shopify Expert.
Breadcrumbs
Breadcrumb trails are a form of secondary navigation that helps your customers navigate your website and easily reach higher-level pages. Also, they improve the discoverability of your web pages and help Googlebot (and other search engine crawlers) define the hierarchical order and the importance of your web pages. In this way, search engines can easily prioritize the order in which they should crawl your web pages. As a bonus, your most important pages will be crawled more frequently.
Simply put, using breadcrumbs will make your website more accessible, comprehensive, and attractive to both users and search engines.
How do breadcrumb trails look?
Here’s an example of a breadcrumb trail:
As you can see, the breadcrumb trail shows exactly where I am in the website hierarchy - a product page. Also, it shows all parent pages of the page I am currently on - “Shoes” (filter), “Balenciaga” (subcategory), “Women” (category), and “Home” (homepage).
Every higher-level page in the breadcrumb trail is clickable. In this way, customers can go back to the homepage or the category page in a single click. Convenient, right?
Best practices for creating breadcrumb trails
- Breadcrumbs are a form of secondary navigation. As such, they should not be considered as a substitute to your primary navigation (e.g., header and drop-down menus and their mobile-friendly alternative - hamburger menus; sidebar menus, footer menus, etc.).
- Breadcrumbs should also be less prominent than your primary navigation. It is a good practice to use a smaller font and a subtler color for your breadcrumbs.
- You can display breadcrumbs at the top of a web page, or at the bottom. You can also choose a combination of the two options. For example, Farfetch displays breadcrumb trails at the top of category pages and below the product details on product pages.
Category page
Product page
- Breadcrumb navigation reads from left to right, and it should progress from highest to lowest level, i.e., Homepage > Category page > Subcategory page > Filter > Product page.
- Breadcrumb trails should include the full navigational path from the homepage to the page a customer is currently on. In other words, don’t omit any categories or subcategories.
- The breadcrumb titles should match the titles of your pages.
- Design your breadcrumb trails with your customers in mind. Usually, the different links in the breadcrumb trail are separated by a greater-than sign (“>”). You can use other symbols as well (e.g., a dash (“-”), a slash (“/”), or a vertical bar (“|”), etc.). However, the best practice is to stick to the greater-than sign (“>”) as it doesn’t interfere with voice over or screen readers.
- Breadcrumbs shouldn’t be displayed on 404 pages, list-collection pages, or cart pages.
How to create breadcrumb navigation in Shopify?
To create an accessible breadcrumb menu in your Shopify theme, you need to know how to edit your theme.liquid file. Also, you need to be familiar with the WIA-ARIA specification (e.g., aria labels and attributes, etc.), and CSS.
To implement a breadcrumb trail in Shopify, you need to:
- Create a Liquid snippet - breadcrumbs.liquid
- Add the breadcrumbs.liquid snippet into layout.liquid
- Set up a case statement for various templates so that you can output the needed URL structure based on the template type.
- Check for page templates and output an aria-current=”page” list item. Note: You can also use linkist to output multilevel-page links. This will make your page hierarchy more robust.
- Add a check for product templates.
- Create a collection template and a collection.handle. Also, you need to make sure collections can be filtered by tagged products.
- Create a blog template.
- Create article templates.
- Use the unless statement to ensure your breadcrumbs don’t appear on 404 pages, list-collection, or cart pages.
- Use CSS to add the greater-than sign (“>”) between breadcrumb links.
- In your theme.liquid, wrap the breadcrumb output in an if statement, so that you can enable or disable breadcrumbs globally on your website.
Learn more → Building an Accessible Breadcrumb Navigation with Liquid and Shopify
If you’re not tech-savvy, we strongly recommend you contacted a Shopify Expert who can add breadcrumb navigation to your Shopify store.
Wrap-up
Today, we showed you how to create a technically-optimized website architecture in 3 steps:
- Create a low-depth page hierarchy
- Create a logical URL structure that follows the page hierarchy
- Create intuitive website navigation. Namely: (1) Add, edit, and remove menu items in Shopify & create new menus (if your theme allows it), and (2) Implement breadcrumbs
