Technical SEO optimization for e‑commerce

The main goal of an e-commerce is not to maximize traffic volume, but to maximize sales. Therefore, it's crucial to focus our efforts on attracting quality traffic, that is, visitors who are more likely to become customers. Additionally, in an e-commerce, it’s not always necessary to promote all products equally. Depending on performance, margins, or strategic interest, it's more effective to prioritize certain products over others to optimize effort and maximize return on investment. In this post, we will cover different aspects of technical SEO that should be taken into account when optimizing an e-commerce. Let's get started:

1. Basic technical SEO in order

Ensuring that the basics of technical SEO are properly implemented is crucial for ensuring your e-commerce content is properly crawled by search engines. Even the best content may not rank if key technical aspects are not addressed. All URLs of your store that can rank should be indexable, which can be controlled using tags or the robots.txt file. Google Search Console is an essential tool for detecting and fixing errors.

In e-commerce, Google provides specific recommendations on URLs that we should offer, whenever the CMS and/or development allow it. Google specialists also emphasize the optimization of product titles, with as much detail as possible: brand, color, material. Titles should help both users and search engines identify products and distinguish them from each other. The use of structured data is essential in online stores, especially on product pages: using rich snippets, we indicate to Google key properties of a product such as price, brand, or stock availability, among many other attributes. Regarding out-of-stock products, Google explicitly recommends keeping them on our site (do not delete or hide them, as we would lose the accumulated SEO), but clearly indicating to users and Google that the product is currently unavailable, or perhaps suggesting we have a great alternative to the product they were looking for.

We must offer relevant content for users at different stages of the funnel: not only product pages make up an e-commerce. Some users may not be informed enough to go directly to a category page and find their ideal product. Certain users may value content like: reviews from other users, gift suggestions, bestsellers, new arrivals, or recommendations for specific groups. In terms of catalog, in many cases in an e-commerce, we sell products that are also sold in other e-commerce stores. Google advises against using product descriptions from manufacturers, as this would result in duplicate content. The search engine explicitly recommends writing unique product descriptions that provide value.

Finally, in this section, we are advised to properly tag product options: often in an online store, we have products with configuration options such as color or size attributes. We can indicate these attributes to Google, as well as product grouping relationships. Google recommends assigning a unique URL for each product combination, but all should share the same canonical URL.

2. Image Optimization

One of the key aspects of technical SEO is image optimization, as it directly impacts loading speed and user experience. Some key tips:

Eliminate CLS (Cumulative Layout Shift): CLS is one of Google's Core Web Vitals. Poor implementation affects the user experience, as we see elements moving and rearranging while the page loads. It’s important for the browser to know the image size before processing it. In the Google speed test report, the warning asks for explicit width and height for images.

Optimize image size: avoid using images larger than what devices need. Ideally, offer the browser different sizes of an image, so it can choose the most appropriate one. Using a CDN can help improve image load speed through its cache.

Use the best image format possible. JPEG and WebP (or AVIF) are lighter formats than PNG, for example, and SVG can be a good resource for logos or icons. However, it is difficult to choose the best image format, as not all are compatible with all browsers. You can consult caniuse to evaluate compatibility. WebP is the lightest format and is compatible with most browsers (especially Chrome, which is most important for SEO), but not with all, and that can be an issue for some users. In that case, we can implement a solution (typically via CDN) that offers the same image in different formats (WebP and JPEG essentially), depending on the browser.

Compress images. The height and width of images (mentioned earlier) are not necessarily linked to their weight. And weight is closely tied to loading speed. Use the image compression software you prefer. For example, for WebP, Squoosh is an interesting website to compare before and after. Never compress beyond what the user will need, especially if we have a large image or need to show great product detail. User experience should always come before a few points on the speed test — the goal is not to have the speed test green.

Cache images for the browser: this way, we set the cache time for images so browsers don't have to process the same image repeatedly. If you’re going to change images infrequently, extend the default cache time, or use a CDN that already has this functionality.

Optimize loading order: if we use http, we can make multiple images load in a single call, rather than loading individually. If we have to choose, the logic leads us to think that it’s best to load the main image first and then the rest. This improves LCP, as we load the initial content as soon as possible, and then load the rest. Lazy loading is generally the best option to implement. In the speed test report, this optimization is indicated as "Defer image loading".

Implement a CDN: Google recommends implementing a CDN, as a good and properly configured service resolves most of the points described earlier. Choose the one you like best, but it’s important to configure and test the site thoroughly after implementing it or making significant changes.

3. Optimizing Websites with JavaScript

The use of JavaScript is key for interactivity in e-commerce, but improper use can affect web performance and loading speed. JS is currently the most popular programming language due to its great browser compatibility and flexibility for developers. There are many JS libraries, but be aware that many aren’t supported by all browsers. Some advice to keep in mind at this stage:

Limit the number of JavaScript files. Page Speed Insights usually warns us if this is an issue. We should avoid having dozens of JS files, one for each action or group of actions. Ideally, we should combine all JS into a single file, which is much more efficient. However, that’s not always possible, as the technology we use (especially certain CMS) may limit us. Google recommends using HTTP2, as it improves JS processing.

Avoid excessive DNS. Not all JS files we use on our site are hosted on our domain. We often include scripts from external tools (Google, Meta...), and when loading our site, they not only call our resources but also external ones. Using external services is inevitable, especially in e-commerce. But we need to ensure that only the necessary ones are included in the code for each case. Sometimes, it might make sense to download an external script and include it in our code to avoid so many external calls or put it in containers like Tag Manager.

Remove inefficient JavaScript: this refers to JS code where resources and calls are not optimized, slowing down processing and negatively impacting the user. In Page Speed Insights, you’ll see this warning as “Reduce JavaScript execution time”. For example, some JS can be executed after the page content is loaded.

Remove unused JavaScript: sometimes we install a lot of components and libraries from the framework we're using, but they're not being used on our website. Avoid letting browsers waste resources downloading unnecessary files. Page Speed Insights usually warns us about this. Use tools like tree shaking to detect it. Most frameworks include compilation tools that automatically optimize JS components.

Compress JS files: like with images, we can compress the JS files to make them lighter. It will usually warn us if it’s an issue. It's important, if you do this, to ensure that compressing doesn't break any key actions on the website that rely on JS. For example, if compressing JS causes the cart add or form submission to stop working, it’s not a good idea.

Configure JS file cache: a good cache configuration reduces the resources browsers need to process our content.

4. Mobile Optimization for E-Commerce

With more than half of traffic coming from mobile devices, it's crucial that an e-commerce is well optimized for these devices. Avoid having separate domains for mobile and desktop. Therefore, it’s important for Google to check that our e-commerce is well implemented for mobiles. Keep in mind:

Mobile and Desktop should go hand in hand: having a separate domain for mobile was once common practice. If you want to do so, you must use tools to synchronize both versions. For Google, it’s better to use one single website that is responsive: through CSS, the website elements are the same for all devices, but they adjust and fit to each one of them.

Mobile web design focused on SEO: you must consider that Google crawls our website as if it were a mobile device. Thus, if in our mobile version we remove basic SEO aspects like texts or links, these won’t be considered for SEO. Use infinite scrolling or “load more” buttons, adapt content for mobile, but don’t remove important content.

Inform Google about content: as with any webpage, you should set up content sitemaps and submit them to Google via Search Console. But since it’s an e-commerce, it’s also highly recommended to set up Google Merchants Center and upload all information about your product catalog through an approved feed.

Optimize page speed: we already covered compressing images and JS in earlier sections. But we need to consider other aspects that can affect loading speed and impact user experience on mobile. Page Speed Insights will give us clues, in its mobile tab. The report will provide data from Google’s speed experiments, but also real user experience data on your site, which you’ll also find in Search Console. Google advises paying special attention to the configuration of fonts on our website: use the fewest possible, preferably available in Google Fonts, and at the same time downloaded and preloaded on our site, not served externally.

Ensure all content is legible on small mobiles: we must test that we don’t have any horizontal scrolling that moves our content, that the font size is large enough to be readable by an average person, or that buttons are not too close, disabling some of them. Google also advises enabling users to zoom in to view more details of certain content (especially on product page photos), and using a recognizable and usable icon system for mobiles. It’s important to test our site on different mobiles and browsers. Using emulators like Chrome’s is useful, but not always 100% accurate compared to actual mobile device behavior.

Ensure a good usability: a mobile user should be able to navigate our entire site without issues. We should especially test key elements of our site such as menus, search bars, or forms. Since we have an e-commerce, we should of course test the entire checkout process on mobile. Use Google’s mobile-friendly test tool, always available to help in these areas.

Enable the best possible user experience: some of Google’s recommendations in this area focus on providing clear information in the purchase process regarding terms of purchase, payment methods, shipping costs, etc. If you’ve ever set up a Google Merchants account, you’ll already have experience solving these issues. Google wants us to be transparent with the user regarding these issues to generate trust and guide the visit towards the purchase. Carousels are also a good solution to offer lots of content and variety in a small space for mobiles, avoiding infinite scrolling. Google recommends using PWAs (Progressive Web Apps), a hybrid of websites with app-like experience, but it has a high implementation cost and is not feasible for many sellers. Another key usability mobile issue is forms: in this case, Google recommends using autocomplete, especially for payment and shipping fields.

Mobile experience customization: we must consider that mobile devices are typically used by only one person and not shared (unless you have kids), and since they have less screen space, users will value more finding content tailored to their tastes. Examples of customization include showing products on the homepage that the user has previously viewed, or showing offers according to their preferences. Enabling users to configure their wishlist of products or implementing a chatbot that helps them navigate the catalog and find the most suitable product for each user could also be useful.

Leverage mobile features: smartphones come with features like microphone, camera, or geolocation, which can also be used for e-commerce websites. Some tips could be: enabling voice search in our search bar, showing products with nearby stock (for hybrid businesses with both online and physical stores), or implementing virtual reality (for example, showing how a certain product would look in our home or on our body). We can even explore other capabilities, like image search using Google Lens.