How To Implement Dynamic Technical SEO for Ecommerce the Smart Way

At Electric Enjin, we believe that an effective SEO strategy is integral to redesigning an ecommerce website. Everything begins with a website’s historical data, competitor landscape, and current data trends. From there, insights are developed into a sales conversion strategy.

Our sales conversion strategy includes keywords, personas and their pain points, and many other elements. The outputs are a sitemap and user journey. Next, we move into wireframing, design prototypes, and finally, the web build.

The common thread throughout this entire process is SEO. It’s the foundation for driving all online sales, including organic, referral, social, and even word of mouth. Think about it, most people are finding your website through one of the above as organic traffic drives 51 percent of all website traffic. This potentially snowballs into shares, tweets, reviews, videos, blogs, threads on Reddit or Quora, or just casual conversation with friends and family. And yet, technical SEO is one of the most overlooked areas for building a successful ecommerce business.

Threading SEO into metadata

There are several areas that search engines like Google and Bing leverage to rank your website in Search Engine Results Pages (SERPS). This includes, but is not limited to, content keywords, meta tags, headline and alt tags, image names, URL structure, structured data, page speed, links, robots.txt, and sitemap. Within all of these areas there needs to be alignment on keywords. Keywords give context to users and search engines; therefore, they are an important factor for how you appear in SERPS. Many ecommerce websites have a similar site structure of primary and secondary pages. Off-the-shelf ecommerce platforms like Shopify and BigCommerce force you into this structure simply because they know what converts best.

Each site template (primary company pages, product categories, product detail pages, etc) should have its own set of keyword categories, which we often refer to as keyword packs, that are threaded throughout each page. Keyword packs are essentially tags that help us to manage and track performance on a weekly basis. Examples keyword packs are brand, product category, and product attributes. We can get a lot deeper than that, but for the sake of simplicity, these are the best areas to start for ecommerce SEO. Next, we identify which keyword packs should be threaded into your templates' metadata. As an example, your product detail pages might be something like Product Name | Product Category | Brand. Next, we have to thread the page-level content.

Shopify and Craft CMS example written in Twig or Liquid.

<meta name="title" content="{{ productName }} | {{ productCategory }} | {{ Brand }}">

Threading headlines tags

One common mistake we often see is multiple H1 tags, or headline tags that are respectively out of order. This confuses the crawlers, and also means your website isn’t ADA compliant or screen reader friendly. This issue often occurs because developers will hardcode a headline structure into every page. While the text that’s CMS-powered is editable, often the order is not. This becomes an issue if you leverage movable units like Craft CMS’s content matrix blocks or Shopify’s theme sections. While one way to optimize user experience is by shifting content up or down on a page, this unfortunately will put your headline tags out of order. The simple fix is having your developers allow you to choose which headline tag your content block uses. However, this can be a pain to manage if you have a lot of content on a page. In this instance, we recommend that developers implement conditionals for understanding the respective order on the page. This means headline tags will dynamically adjust when content managers need to shift content on the fly.

Threading images and alt tags

This step is best managed starting with the creative production of assets. Similar to our product detail page example, we’ll want to use the same keyword packs into our images and alt tags. Designers should know these guidelines while in the production of assets. Because SEO is a zero-sum game, updating your keywords within images, alt tags, headlines, and meta will be crucial to gaining upward mobility in SERPS. One successful method is implementing dynamic alt tags. This can be done in two different ways. The first is programming the alt tag to dynamically leverage the image file name. As a best practice, image file names use hyphens as spaces. Developers can have the “-” replaced with a space with a simple code on the front end. Now, simply update your images and alt tags will follow suit. The second method gets a bit more technical and provides less control, but can be just as impactful. This involves creating a dynamic alt tag with variables, such as product category and product name. These variables are pulled from the website’s site structure, which isn’t changed as often. However, using this method will keep your alt tags very focused on where it matters the most. You can also apply this technique to the meta and structured data as well.

Example in Liquid

<img src="{{ product | img_url: '250x250' }}" alt="{{ product.category}} {{product.title}}">

Using variables adds a few extra steps to your development, but you get a bigger return on the time and investment with SEO maintenance. If you’re in the process of an ecommerce website redesign that hasn’t yet reached development, then it’s not too late to execute on the above. If you currently have a website with no plans to redesign in the near future, it’s still possible to implement these smart techniques for maximizing your website’s search performance.