6 Steps An SEO Agency Took To Create An Ecommerce Page For A Bakery
We’ve previously covered several steps the agency took to improve Edelweiss Bakery’s website ranking, including creating solid blogs and checking technical errors.
Before working with the agency, the bakery had an existing section for eCommerce.
However, it was a small section of the main page and did not contain product cards or categories. An eCommerce page was needed to increase the agency’s purchase potential, allowing customers to view products by category and add product cards.
This episode will show how an SEO agency revamped the bakery’s e-commerce features to increase product visibility online
The Process
The agency decided to begin with the design to determine the layout of the pages, the categories that would be required, and the overall design.
The first thing they did was create a layout to display the “Shop” section. This layout included two additional layouts.
- Category page layout: This allows users to browse various products by type. It helps them find the kind of bakery goods they are looking for.
- The layout of the product card page: This provides additional information about a particular product
After the layouts were designed, the agency added the necessary information to each product card. Let’s look at each step.
Step 1 - Preparing mockups for design
The WooCommerce plugin is a standard WordPress plugin that provides ready-made eCommerce templates and features. The agency also analyzed similar elements from when they created the site’s overall structure.
- Websites of competitors to the bakery, were selected during the early stages of the agency’s work.
- Common sales-driven queries such as “buy bread online” or “buy sourdough loaf” are listed below.
Here is a screenshot from a competitor’s category search results for “buy Sourdough Bread”:
This allowed the agency to see what its competitors were doing and what customers might be looking for.
Following a similar process as when Edelweiss updated its homepage design, the agency created mockups of the design and sent them off to a designer.
Step 2 - Preparing Category pages
The agency determined that the following elements were essential during the analysis of the previous step:
- Listing of products
- Title and SEO text
- FAQ block (*might not be necessary in all cases)
- Navigation buttons for page-by-page (pagination).
- Menü
- Breadcrumbs
If you want to elevate a product card page in search engine results over a page for product categories, the FAQ page might not be necessary.
The agency also found that specific categories, such as the Ciabatta category, are too small to optimize.
The product category contained only three products. It was more sensible to optimize individual product pages for high ranking than a single category page with only a handful of items. The product card page could still be optimized, as there were at most two product cards among the top 10 results for “buy Ciabatta.”
WSS Agency
This is the layout that the design team created for the Category pages.
To prepare technical specifications for Category pages, the agency used the Keyword Magic tool . The agency also used Semrush’s “Questions” feature to create the FAQ block.
Semrush has recently updated its Keyword Magic Tool to display a keyword’s search intention. This stores time and eliminates the need to research the keyword for commercial or informative content.
Step 3 - Creating product cards.
The agency decided that the Product Card page should include the following elements during the initial analysis. This explains the different products better and increases the chance that people will purchase them.
- Images of the product in high-quality
- Pre-order/product purchase button
- Description of title and SEO
- FAQ section
- Description and features of the product
- A brief description of payment and delivery systems
- Optional menu
- Breadcrumbs
This is the Edelweiss bakery Product Card design.
These are some things you should know about this design.
- We carefully considered the placement and accents surrounding some aspects of the page. The product image, price, and add to cart button were, for example, the most prominent and visible elements on the page.
- The Product Card provides all information necessary to increase your chances of buying something. These included product photos, customer reviews, and detailed descriptions.
Step 4 -- Product cart optimization
Edelweiss had a Product Cart page, so they didn’t have to create one. Their cart page had customers’ most critical elements before they checked out.
- What items are in their cart?
- How much does each item cost
- The number of items in the cart
Here is Edelweiss’ Product Cart Page:
Edelweiss’s product page was already in good order and optimized well. However, the agency wanted the following suggestions to be made to readers who are looking to improve the customer experience on their site:
- It should contain the cart’s contents and an image of each product.
- Customers should be able to easily remove, add, and change the quantity of any product within it.
- When placing an order, the total price must include shipping + VAT. It is best to note that this will be calculated at checkout.
- It should enable customers to place orders without registering (optional but strongly recommended).
Checkout form
Edelweiss’s checkout process was already simple and quick, so there were no suggestions from the agency to improve it. This is what their checkout page looks like:
Here are few tips to help you evaluate the checkout process on your website.
- The checkout process and form should be easy and transparent
- Instructions about how to enter text fields should be included
- Customers should highlight the areas they need to fill out
- Only ask for the necessary information/data to complete the purchase.
5 -- Layout, technical optimization
After selecting the layouts, the agency’s programmers could start creating product listings using the templates. Before they began to work, the agency provided the following recommendations to programmers. We’ll break them down by category.
Creating a product listing
The agency began by looking at how product listings should be displayed on product pages and when products were viewed by category. These were the requirements that they provided to the team.
- You can make purchases directly from the category page’s product listing without going to the product card. This will allow you to click the “Quick Add To Cart” button. It will be easy to purchase from the listing if the customer is familiar with the product.
- These product names should have links to the website. Tag and purchase buttons should both be created via.
- The agency stated that this is a simple rule to help search engines understand pages’ content and elements.
- JavaScript should not be disabled, but the menu content must still be accessible. The menu should serve as a navigation guide for humans and search bots. Links in the menu can be used to link to other local resources.
- Search engines will consider your categories disconnected if your menu is in Javascript. Orphan pages will be created, pages that have no link authority and may not be indexed. This issue can be resolved by developing a menu using CSS to ensure all links are accessible, even if Javascript is disabled.
Filters, sorting, Canonicalization
It was clear to the agency that filters, sorting, and Canonicalization needed to be organized to make it easy for users and keep customer traffic flowing.
They were pleased with this.
- Configure the canonical self-reference tag (which points to the current page) for all pages that do not have the get parameter.
- The canonical tag should place to the main page for pages with the get parameter (including filter pages). This is the page that has had the filter applied.
Setting up pagination
The agency understood pagination was necessary for user experience and indexing purposes. These were their recommendations:
- All pages should have the canonical self-reference tags configured. The pages should also be available for indexing.
- All pages, except the main page, should have a meta tag that is Title — Page N mask. N is the page’s ordinal number in pagination chai.
- You need to set-up 301 redirects to page-1 type pages (which can be made in various ways depending on the CMS). There should not be links to page-1 pages in the pagination chain. Self-referencing links are also prohibited.
Markup
The markup can help brands build trust and leverage social proof to provide vital information to customers. The agency suggested that developers include the following markup in product listings:
The agency suggests the following markup for product cards and categories:
- Breadcrumbs micro markup
- Product markup with price or price range
- Rating of the product
This allows the page to have rich snippets in Google’s SERP. The FAQ Page markup will be required if there are question-answer blocks.
This is where you can find help with your markup.
Step 6 - Filling in the categories and product card information
After the design layouts were completed for the Category and Product Card pages, the next step was for the agency to enter the product information* and optimize the content.
*A single product may appear in different categories but should only be accessible through one URL. This will help prevent product duplicates and maximize product visibility on your website.
According to the agency, it is recommended that product cards and categories be indexed in the order they are completed. This prevents search robots from crawling and indexing empty product pages.
