eCommerce SEO: Ultimate Guide For 2022

Psst: we are hiring remote frontend developers and backend developers.

Illustration of a person holding a laptop and a person holding a picture of cat

The days of TITLE and META DESCRIPTION optimization, keyword stuffing, page rank manipulation, fake reviews, and fake backlinks are long gone. Each year Google is getting better and better at providing the searchers with quality results on their search queries (and killing competition alongside, but that's for another post).

With over 200 known ranking signals Google uses, the fact that searchers are getting better at searching, a crazy number of rich search result features in which you can appear (OneBox results, featured snippets, knowledge panels, rich results, etc.), and, of course, competitors there are no shortcuts to better ranking.

One of the perks of being a headless commerce platform is that you can talk with your clients about pretty much anything, including their SEO wins and losses. So each year, we update our eCommerce SEO checklist to stay on top of the best SEO practices and help you boost traffic and increase sales on your online store.

This year with took it a bit further with a guide.

Before we start, let's kick off with the basics first.

[h3]What is eCommerce SEO?

The definition depends on whom you ask. For me, the whole purpose of SEO and eCommerce SEO practices is to help your pages/products be found and rank better in search engines (like Google) for desired/targeted keywords. This way, your pages/products gain more visibility and reach your potential audience in search engines without paying for search ads. Alternatively, check Web Almanac's SEO definition and add eCommerce to it.

[h3]Is SEO Important for eCommerce?

Really? Are we still talking about the value of SEO? Let me fill you in with a couple of stats. 

Google now has 91.66% of the search market share and processes over 40,000 search queries every second. While it is true that Google is referring less traffic to websites than before, it is still the single largest online traffic source. 53% of web traffic emerges from organic search (the #1 spot on Google gains a 28.5% CTR while the #10 gains a meager CTR of 2.5%).

According to Google, 53% of shoppers say they constantly research before buying to ensure they make the best possible choice. That's probably one of the reasons why the average ROI of eCommerce SEO is around $2.75 for every $1 invested (source WebFX).

All of the stats quoted here show that if your product is not appearing in search engine results, you are losing $ big time.

Do I hear you saying, OK, how can I do SEO for an eCommerce website?

Glad you asked.

Table of Contents

eCommerce Technical SEO

  • Ensure Your Website Can Be Crawled & Indexed
  • Resolve Pages with 4XX Errors
  • 301 Redirects
  • Crawl Budget
  • Mobile-Friendly Product Pages
  • Use HTTPS
  • Page Experience Signals
  • 3rd Party Scripts
  • eCommerce API Performance
  • Site Architecture
  • Friendly URLs, Navigation, and Breadcrumbs

eCommerce Keyword Research

  • Defining Keywords
  • Keyword Difficulty, Domain/Page Authority, High Traffic or Long-tail Keywords
  • Focus On Search Intent
  • Avoid the Same KW On Multiple Pages

eCommerce On-Page and Content SEO

  • Page Title and Headings SEO Optimization
  • Meta Description for eCommerce SEO
  • Structured Data
  • Image Optimization
  • Optimize Videos
  • Product Page SEO
  • Link Optimization for SEO (Internal and External Links)
  • Backlinks
  • Avoid Duplicate Content
  • Content Marketing for eCommerce SEO
  • E-A-T and Topical Authority

Downloadable eCommerce SEO guide PDF extras…wait, what? More on that later.

  • Before You Start
  • Tools / Resources
  • Quick Tips: eCommerce SEO Checklist
  • Product Page SEO
  • The Spongebob Squarepants Socks Example

[newsletter]Sign up for Crystallize newsletter!

Join 2000+ ecommerce businesses that are already growing their business with our newsletter.

eCommerce Technical SEO

Technical SEO focuses on making sure your website offers a great web experience for your users and search engines, i.e., the website is easily crawlable and comes with outstanding performance.

[h3]Ensure Your Website Can Be Crawled & Indexed

Before you can appear in search results, Google and other search engines need to crawl your pages. Once a crawler finds your pages, the search engine renders them like a browser would and, while doing so, analyzes content on those pages. All of the gathered information is stored in a search engine index from which ranking algorithms determine the relevancy of the crawled pages regarding keywords they found on the page.

Sure enough, you can wait for search engines to discover your pages naturally. But it’s far better for you to help them out and make sure their web crawler bots can find and crawl all of the important pages while staying away from those you don’t want them to see. So, how do you do that?

Robots.txt Make/use the robots.txt file to control which files and/or folders you want or don’t want bots to crawl. You may want to prevent them from crawling your images, internal search queries, or admin directory (like WordPress installs, for example).

Sitemap.xml Have a sitemap on your website to provide crawlers with valuable information about the website structure and website pages. The basic XML code example is:

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.examplestore.com/product.html</loc>
    <lastmod>2022-01-25</lastmod>
  </url>
</urlset>

Use Google Search Console for Google search and Bing Webmaster Tools to submit your website to Bing, Yahoo (because Bing's index powers Yahoo), and DuckDuckGo (because Bing is one of their search source partners).

[note][nebojsa@crystallize.com]Going headless?

With Crystallize being a headless commerce solution, we decided to give a unique overview of handling specific SEO problems from a headless architecture perspective. For the most part, that would mean presenting solutions for those that use modern frontend frameworks like Gatsby, Next.js, and Nuxt.js as part of their tech stack. Our free eCommerce boilerplates are SEO-ready and give you an excellent head start when starting a project anew.

Using Gatsby? You are in luck because all you have to do is install robots.txt and sitemap.xml plugins by running 

npm install gatsby-plugin-sitemap

and 

npm install --save gatsby-plugin-robots-txt

And add appropriate code to the gatsby-config.js as explained here.

To add robots.txt and sitemap.xml files to your Next.js website, we’ve found it best you use next-sitemap generator.

Finally, if you are running Nuxt, you can use an official sitemap module.

[h3]Resolve Pages with 4XX Errors

One of the most common HTTP response status codes both crawlers and your audience get to encounter are 4XX client errors, most notably the 404 Not Found error. The 404 error occurs when the requested URL contains the wrong syntax or the URL is deleted. A real-life case would be you having a wrongly linked page (like linking website.com/thirt/ instead of website.com/t-shirts/ ) or deleting a page completely but not deleting links to it.

The best way to deal with this problem is to have a dedicated 404 page that you can/should customize by adding links to essential pages or a site search bar, for example. Or you can play on humor just like we did.

Resolve Pages with 4XX Errors

[note][nebojsa@crystallize.com]Going headless?

Gatsby and Next.js create a 404 page for you by default while Nuxt requires you to have an error page, a page component that is always displayed when an error occurs and where the errors are defined.

[h3]301 Redirects

To avoid frequent 404-page shows, deal with duplicate pages and make sure new pages inherit popularity from the old pages link practice, set permanent redirects of old URLs. Proper HTTP 301 header information should be set. This will inform Google that the page has permanently moved so it can update its index. Browsers are automatically redirected when they hit 301 redirects, so customers will automatically find the new page.

Try to avoid so-called redirect chains. Over time, your redirects pile up so much that you may end up having 301 on top of 302 to end with 404 etc. These influence your crawling, link equity, and even website performance.

[note][nebojsa@crystallize.com]Going headless?

You can handle 301 redirects either on your framework (site generator) or your hosting side (here, I refer to static website hosting platforms). Use the gatsby-redirect-from plugin to include redirect_from configuration when working with Gatsby. Use the redirects key in next.config.js for Nextjs projects. The best way to handle redirects with Nuxt is to create redirects.js into your serverMiddleware folder, as explained here.

If you have a project on Vercel, you can configure redirects in the vercel.json file as explained here. Are you using Netlify? Either save a plain text file called _redirects without a file extension to the publish directory of your site or add redirects tables to your Netlify configuration file (netlify.toml). To use redirects on Cloudflare Pages, declare your redirects in a _redirects plain text file in the output folder of your project.

[h3]Crawl Budget

Simply put, the crawl budget helps you communicate with Googlebot on prioritizing what to crawl, when to crawl it, and how many resources to allocate to crawling. The search console is where you handle and track the crawl budgets.

Keeping your website well maintained and having a crawl budget on autopilot should be enough for most websites. In general, this means:

  • Your sitemap is updated regularly.
  • You’ve reduced errors and redirect chains.
  • You’ve done all you can for better website performance.
  • You’ve utilized robots.txt to ensure Google crawls just important pages and excludes internal search result pages, for example. 

However, if you run medium or larger websites (10,000+ unique pages) with rapidly changing content (daily), you might want to check the resource links section of the pdf version of this post (download link is further down this post). I’ve shared a couple of in-depth explanation posts of what you can do about it.

Crawl Budget

[h3]Page Experience Signals

Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value. The link page is a good starting point for you to understand them better, so here I’ll quickly cover the basics.

Mobile-Friendly Product Pages. Google is checking mobile friendliness. It impacts ranking and also conversion. Make sure your pages are mobile-friendly. You can quickly test if your pages are mobile-friendly.

Use HTTPS. This is a housekeeping point, but do not forget to make your site secure with HTTPS. HTTPS is Faster than HTTP, so it is good for user experience, security, and SEO since Google gives a penalty if you are not using HTTPS.

Frontend Performance / Core Web Vitals. Making sure you have optimized your webshop for frontend performance means you’ve dealt with your Core Web Vitals issues. There are a couple of reasons why performance matters and why checking and continuous monitoring and optimizing your webshop performance is essential.

For the most part, your CWV and website performance depend on how well you handle the frontend, depending on the tech stack behind your website. Any stack can be performant. Still, some stacks are better than others.

If you are running headless eCommerce with JavaScript React SPA frontend, we have some additional tips for better SEO for React eCommerce SPA.

Page Experience Signals

[note][nebojsa@crystallize.com]Going headless?

Legacy, traditional eCommerce solutions come with a lot of baggage. What I mean by baggage are the problems related to code bloat, excessive use of 3rd party scripts, poor media asset management, architectural issues, and a whole lot more influencing performance and overall SEO scores.

With performance being one of the selling points of Jamstack and the headless approach in general, the latest findings from HTTP Archive Web Almanac are promising.

[h3]3rd Party Scripts (Manage Them)

While third-party scripts provide a wide range of useful functionalities, they heavily influence website performance and security. How's that?

Performance-wise, every external script you add must be downloaded and then executed, adding up to page size and page load time. Security-wise, well, you can never be sure what the script is doing in the background when your page loads.

What can you do about it? First, consider removing the script if it doesn't add value to your website or business. Second, load the script using the async or defer attribute to avoid blocking document parsing. Finally, opt out to self-host some third-party scripts. It might be the case that the server from which they are served is slow.

[note][nebojsa@crystallize.com]Going headless?

Most JS frameworks I mentioned here do this kind of work for you out of the box. Have a look at the most recent example for Nextjs here.

[h3]eCommerce API Performance

Site speed represented with the Core Web Vitals affects your search engine ranking. That is a fact. Webshop frontends are typically built using a headless approach these days, meaning that you rely on an API service in your backend. 

In Jamstack, you typically pre-generate the pages as static to ramp up the speed and performance benefits. Why is API performance important if you generate static product pages on edge? Well;

  • Product pages have updates like price and stock changes, which means you need to re-generate them quite frequently. Regeneration depends on API speed (faster speed means faster regeneration).
  • Jamstack caching strategy typically involves a subset of your total pages on larger stores, meaning many pages need to be generated on the fly as regular SSR (Server Side Generated pages).
  • Search is heavily used in eCommerce, and in Jamstack builds, it is handled by 3rd party APIs.
  • Finally, eCommerce means you need to handle dynamic pages like a basket, checkout, and order placement.

The live eCommerce API you use to fetch product information and the custom Service API designed for your composable stack affect your overall API performance. This Service API is the glue in your headless architecture and often impacts integrated features like, e.g., dynamically calculating the basket values. Together, they all affect the customer/user experience that affects Page Experience signals.

[h3]Site Architecture

Site architecture (or website structure) is how your pages are organized and interlinked. It should not come as an afterthought because it influences both users' and search engines' website perspectives. How is that? 

From a user experience (UX) standpoint, it's not the same if you have to click 2 or 10 times to get to the product you are looking for.

Search engine-wise, a good structure makes your website more accessible and potentially faster to crawl and appear in the search index. On top of that, the right site structure helps you spread link authority effectively (more on that later).

A good site structure is often defined as a flat rather than a deep structure. The difference is, of course, in the number of levels (clicks) you need to cover to get to the wanted page. As a general rule, make it simple and easily scalable, and keep in mind that no page should take more than three clicks to get to from any other page.

Site Architecture: Flat vs. Deep

Truth be told, will you have categories, subcategories, reviews, and/or variant product pages depending on a couple of things, including conducted product, competition and keyword research, industry, and the sheer number of your products.

It is easy to plan the structure when you start a new website, but what can you do if you already have a website and your structure sucks? 

The first thing is to do the website audit and map all the pages and current structure. Be sure to identify the most popular pages as well. Then do competition and keyword research and find similarities between your products and competitors' websites to identify categories, subcategories, etc. Layout the new structure against old URLs (especially those with high traffic) and start with URL/content pruning and deliberate redirects.

Finally, make and submit a new sitemap to Google and other search engines. Be aware that you will see traffic loss at the beginning in most cases, but if things are planned and executed the right way, you'll see traffic rise soon enough.

[h3]Friendly URLs, Navigation, and Breadcrumbs

In an ideal scenario, while contemplating site architecture and conducting keyword/competitor research, you'd be thinking about URLs, navigation, and breadcrumbs as well. URL slug best practice boils down to two things: use shorter, keyword-oriented URLs with hyphens to break up words and make sure keywords are aligned (if not with product) with the intent you are pushing on the page in question.

Navigation not only helps UX but also helps search engines understand your website structure even more. Navigation should be simple, straightforward, and hold the most important pages.

And for eCommerce businesses, there is also a case of faceted navigation. Faceted navigation allows your audience to narrow down search results based on specific product features and attributes. Purely from a UX standpoint, they have vast potential, especially with businesses that have thousands of products, i.e. users can easily find what they’re looking for.

On top of that, you can also cover long-tail keyword opportunities that otherwise would not be easily available for you. For example, say you have a store that sells socks. You can have categories that match socks by color' red socks' easily. But having a dedicated page for 'size M SpongeBob SquarePants socks' might prove to be hard to pull. This is where faceted navigation shines.

Breadcrumb navigation indicates the page's position in the site hierarchy and aims at helping users navigate your website more effectively.

[note][bard@crystallize.com]Tired of scrolling?

We hear you, and we got you covered. DOWNLOAD a PDF version of this guide with bonus content for easier offline reading and sharing with coworkers.
📝DOWNLOAD eCommerce SEO Guide

eCommerce Keyword Research

Keyword research is the foundation of every SEO campaign, be it for news, eCommerce, or any other website. It will be hard to write about it in just a couple of key takeaways, so bear with me and check the links about it in the Resources part of the downloadable .pdf.

[h3]Defining Keywords

The first step for new businesses/websites/stores would be defining the keywords you want to target. For running businesses/websites/stores, it would be to evaluate the ones you already target. Running keyword research will help you with both.

Why do you need keyword research in the first place? Keyword research is there to help you understand which keywords people use to find similar services/products like yours, how popular are those keywords, i.e., traffic volume, the intent shown in search results for those keywords, what type of content is showing in search results for those keywords, and what will it take to rank for those keywords.

How do you conduct keyword research? Most businesses already have a list of keywords that best describe their service or product. Also, most have a list of real-life competitors. Use them as the starting point of your keyword research.

A couple of tools will help you at this stage:

Google. Study the results for companies that appear in the results and understand the type and intent of the content/pages showing. Use auto‐suggest and similar searches options to broaden your keywords and challenge the assumption of how your audience conducts a search. I am surprised that people look for the keyword ‘spongebob squarepants rehydrated socks’ more than ‘spongebob squarepants socks size M’.

Use auto‐suggest and similar searches options

Amazon Suggest. Use the Amazon website search option, i.e., enter the keyword, and Amazon will provide a list of suggestions surrounding this keyword.

Answer the Public. It is a nifty free tool that helps you discover what people ask about when searching your keywords.

SEMRush/ahrefs/Moz. Paid SEO tools are a great way to find out which keywords are popular, i.e., the search volume of the keywords, and analyze your competitors' keyword, content, and backlink profile strategies.

[h3]Keyword Difficulty, Domain/Page Authority, High Traffic or Long-tail Keywords

Let’s make keyword research a bit more complicated. What is keyword difficulty (KD)? Most paid tools have a KD metric that ought to give you a rough sense of how difficult it is to rank for a given keyword. 

What is domain/page authority (DA/PA)? It is a metric that ought to give you a rough sense of the strength/authority of a website/page.

Both of these metrics are there to help you better evaluate your chances of appearing in search results for desired keywords. Useful as they are, there are certain…eh…limitations.

These metrics are tool-defined, i.e., each tool has its way of measuring them, and they are in no relation to what Google may or may not have in place, does, or does not do when ranking websites for keywords.

KD, DA, and high traffic vs. long-tail keywords. Most businesses immediately think about ranking for high-volume keywords, while the real value might be in long-tail ones.

For my made-up socks store, trying to rank for the ‘socks’ keyword is the holy grail, right? With 10.1K monthly searches globally, the keyword ‘cartoon socks’ is a no-brainer. However, because I focus on a specific cartoon, i.e., SpongeBob SquarePants, a keyword with 100 monthly searches, ‘spongebob squarepants socks’  may be a better one to focus on for several reasons.

More specifically, long-tail keywords provide you with better click-through rates and conversions.

It takes time and careful planning (of content and backlinks) to build the topical authority of a page and/or domain. If you are a gamer, think of it as leveling up your character. The stronger it gets, the easier it is for your character to deal with giant monsters. The more you rank for long-tail keywords, the easier it gets for you to rank for bigger ones.

And if you look close enough, i.e. study search results well, you’ll notice very often that KD and DA scores relate with perceived domain value by Google shown in ranking position in results.

For better or worse, the answer to all of the above is in the search results.

[h3]Focus On Search Intent

Understanding the searcher's intent behind a search query is the ultimate goal of any search engine.

It is not the same if I search for 'spongebob squarepants' and 'spongebob squarepants socks'. The first query is an informational one, i.e., I'm looking for info on my favorite cartoon, while the second one is so-called transactional, i.e., I'm looking to find the best purchase for the item in question.

Most SEOs distinguish four different intent types: Informational, Navigational, Transactional, and Commercial investigation. Let me just quickly explain with examples.

Informational. Questions like 'what is PIM?' or 'who is Elon Musk'; direction queries like 'nearest coffee shop' or topic/keyword queries like 'spongebob squarepants' or 'Novak Djokovic' fall under this type.

Navigational. Search queries like 'Figma sign in' or 'Crystallize' fall under navigational intent.

Transactional. Queries like 'buy spongebob squarepants socks' and 'DJIMavic 2 Pro price' and 'Amazon coupon' all fall under this category.

Commercial investigation. Queries like 'Cristllize vs. Shopify' and 'DJIMavic review' and 'best spongebob squarepants socks' and 'socks shop near me' and 'cheap cabins in Skien' all belong here.

What do these mean to your keyword research? Understanding the intent helps you craft better content (or rather build appropriate and expected content for the keyword in question). But the story for eCommerce does not end there.

Product pages are essential for any eCommerce business, no doubt about that. However, you are limited by the number of keywords you can rank for on them. So, if I manage to rank for the keyword 'spongebob squarepants socks' I may rank for 'spongebob squarepants red socks' or 'spongebob squarepants yellow socks' etc. as well. To reach a much wider audience, I'd like to explore other keywords closely related to the main one. In this example, that might be the keyword 'spongebob squarepants gifts'.

Analyzing search results, we can quickly determine it is a commercial investigation search query with search results full of listicle blog posts. Great. All I have to do is to write a blog post with a list of gifts (including my socks page), and that's it. Well, not really but we’ll talk more about that.

For now, understand that search intent helps you make sure you have the right type of content for your targeted keywords. But you won't pull off a good ranking with crap content.

[h3]Avoid the Same Keyword On Multiple Pages

Having multiple pages with the same keyword (however different with content) is a bad practice that can lead to keyword cannibalization problems. You don't need more than one 'spongebob squarepants socks' page, do you? Yes, socks can be red and yellow, but modern eCommerce solutions take care of this with product variants features.

[note][bard@crystallize.com]Tired of scrolling?

We hear you, and we got you covered. DOWNLOAD a PDF version of this guide with bonus content for easier offline reading and sharing with coworkers.
📝DOWNLOAD eCommerce SEO Guide

eCommerce On-Page and Content SEO

eCommerce content checklist refers to on-page SEO for eCommerce sites. Site structure, URL slug structure, and navigation also fall here, but I’ve already covered it in the technical SEO part.

[h3]Page Title and Headings SEO Optimization

Make sure that your TITLE tags and H tags are optimized. The search results show the title tag, so make it specific and keyword-oriented. While you’re at it, have your keywords at the beginning of the title. 

Also, make sure to repeat the title tag text as the main header on your product page. In addition, you should repeat the main keywords throughout the product description text, i.e., within the first 100 words on your page. For example, look at how the 700c white tires page shows in search results.

HTML (HyperText Markup Language, the most fundamental building block of the Web) is a hierarchical language, meaning every tag has its place and purpose.

[h3]Meta Description for eCommerce SEO

Keep your meta descriptions up to date. This is the text shown under the page title in the search results. Keep it accurate and sell it. This is both a factor for eCommerce SEO and ensuring your customers click on your link when it appears in the search.

[h3]Structured Data

Structured data is a standardized format for providing information about a page and classifying the page content. The best way to implement structured data on your website and webpages is to use Schema.org structured markup, a collaborative vocabulary supported by most search engines.

Why use structured data? Though having structured data on your page will not directly influence page ranking, there are a couple of reasons for having it:

  • Structured data helps search engines understand the content on your page better (mainly if you aim to appear for search queries related to ecommerce, recipes, and jobs, i.e., queries for which search results show more than just linked title and description).
  • Structured data helps search engines to display your content as rich results.
  • Structured data will directly show reviews, price, and stock information in product search results. This also boosts click rates as the customers are better informed already from the search result page. 
  • The web is getting more semantic as we target more channels like voice and visual search. Structured data plays an important role for those.

While there are three supported formats, JSON-LD is the most recommended one. As for determining the right type, the best practice is to keep focused and use a single top-level Type on a given webpage. Let's take my size M SpongeBob SquarePants socks page as an example.

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "SpongeBob SquarePants socks",
"image": "SpongeBob-SquarePants-socks.png",
"description": "Beautiful SpongeBob SquarePants socks in size M.",
"sku": "123456789",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"reviewCount": "2000"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "9.99",
"availability": "http://schema.org/InStock"
}
}
</script>

This is the basic info with review and price data on my product page. Still, the primary Type I’m using is Schema.org/Product.The Tools/Resources/Additional Reading part of this guide has a couple of excellent links to both tools and articles if you wanna (and you should) dig deeper into structured data.

[note][nebojsa@crystallize.com]Going headless?

Structured data is defined on the CMS or eCommerce solution level. With Crystallize, for example, the content modeling approach allows you to describe all the product information you may need for your product page. Then have the frontend of your choice request information via the API and display the information on the frontend as you prefer, including in Schema.org format.

[h3]Image Optimization

Did you know that image size is one of the most significant contributors to overall web page size? This means that proper optimization of images may come with substantial savings in page size and thus page load speed. And having a faster-loading page influences your search engine ranking (because speed matters) and your user experience and CTR.

What can you do about it? Lazy-load your images, i.e., load them when needed instead of loading them up front. Optimize your images, i.e., use modern, web-centric image formats like WebP and AVIF. Using both of these comes with a 25–35% reduction in file size while keeping the quality of an image the same. Optimize image delivery, i.e., use CDNs.

High-quality, relevant product images can improve user experience as well. Come to think about it, images are the driving force behind purchase. I mean, you can dominate the search engine rankings, but do you think you’ll convert that traffic without shitty images?

Finally, a big chunk of the searches done by shoppers is via the image search section of search engines. Again, you should, of course, use great photos. But for SEO purposes, you also need to make sure that you use a keyword-focused filename (like SpongeBob-SquarePants-socks.png) and ALT text, as this is being used by Google when indexing photos. For example, search for envelope leather backpack on Google. You’ll notice the image from the linked page ranked as #1 in the image search. Now connect the dots between page and image best practices I’ve mentioned here.

Image Optimization

[note][nebojsa@crystallize.com]Going headless?

There are a couple of ways to handle image optimization. Let your frontend framework do the job for you. Gatsby has a gatsby-image component designed to work seamlessly with Gatsby's native image processing capabilities powered by GraphQL and gatsby-plugin-sharp to easily and completely optimize image loading and get the blur-up effect and lazy loading as well.

Next.js has <Image/> component. Not only does it render, but it also optimizes the image for every viewport by implementing functionalities like lazy loading, responsiveness and resizing, optimized file size and format out of the box.

Nuxt.js users have <nuxt-img> component at their disposal, which is a drop-in replacement for the native <img> tag and covers pretty much the same optimization features as previous solutions.

Another way to handle images is to use a 3rd party service like Cloudflare Image Optimization, for example.

Finally, some CMS and eCommerce solutions offer image optimization as a part of their service. In Crystallize, for example, when you upload images, we will compress/convert images to AVIF and Webp, which are better image types, and resize in a bunch of different resolutions (100px, 300px, etc. up till the max-width of the original image). Then we have an npm package @crystallize/react-image that helps with image rendering, i.e., you get responsive and fast images. For example, if you're on mobile, the max-width is 480px, then the browser only fetches the 480px size image instead of a bigger one. How's that for an out-of-the-box feature?

[h3]Optimize Videos

Product videos have become hugely important in eCommerce. You can showcase a product, tell a story about it, share testimonials or produce how-to videos for your product and use them for promotion or to incentivize sales. Remarkable as they are, they do come with a significant influence on page size (and thus speed and performance).

While lazy-loading videos is always an option, video optimization largely depends on the platform you’re using. We’ve talked about the different solutions for using video in headless/jamstack builds. The solutions mentioned there can be used with any platform (or at least popular ones).

You can have your videos on YouTube or served natively, or both. The thing to keep in mind is that by having the same videos on both YouTube and your site natively, you might have them compete in search results for the same keywords, and, in most cases, YouTube videos will rank higher. This might not be a bad thing, but it depends on your strategy which one would work better for you.

Optimize Videos

[note][nebojsa@crystallize.com]Going headless?

Or rather, going with Crystallize? Our video component is built with the ease of using videos in product storytelling and optimization in mind. Same as our image component, it is all offered out of the box. We’ve got your video needs covered.

[h3]Link Optimization for SEO (Internal and External Links)

There are two types of links, internal and external, and both of them influence your SEO efforts. Navigational links, breadcrumbs, category links, links to your pages within posts/products/articles, etc., are all internal links. Their most considerable influence is making it possible for users and search engines to navigate the website and discover web pages more easily.

External links are the links to other websites, and they aim to help your page appear more credible to both users and search engines. Using other resources in your writing/page shows you did your diligence and researched the topics well by providing a link to an authoritative source on the subject you are covering.

[h3]Backlinks

Links build page and domain authority. Anchor text gives semantic meaning to the link and is good for accessibility and usability. But it’s also giving the destination page a boost for the linked keywords. All of these together influence your ranking.

However, don't be fooled into thinking that backlinks are a magic ingredient in search engine ranking. Influential as they are, they won't help much without the quality of your page and content on it.

There are two aspects of link building, i.e., link quality and link reach out. How do you determine the quality of a link? The quality of a link depends on domain/page keyword and industry affiliation and authority, anchor text of a link, page content quality, and link place.

Now, here is a mouthful as an example: being linked at the beginning of a fantastic piece of content, on a domain/page already established as an authoritative one in your industry for your keyword, is more valuable than being linked in a mediocre one, at the end of the content, or being linked from a strong domain in a different industry anywhere on its page. In other words, a link on the Disney website won't help an eCommerce SEO checklist like this one very much. But a link from searchenginejournal.com will (can anyone help with getting a link there!?).

How do you find quality links? Remember when I talked about keywords and competitors' research? Well, while doing those, be mindful of the websites appearing in search results for your desired and similar keywords (if they are not a competitor, they might be a link source). Also, be mindful of the places that already link to your competitors, i.e., check competitors' backlink portfolios. Chances are, some of those might consider linking to you as well. Find broken links or unlinked brand mentions of you and your competitors and reach out to those websites. Or consider guest posting on websites in your industry.

And how do you reach out for links? No silver bullet here. For some places, a simple but personalized email will be enough. For others, it might be better to establish a connection first, i.e., connect on Linkedin or Twitter and get to know each other before you do business.

Two things are certain: it depends on your industry, and it takes time (a lot of time). For example, getting a backlink in a B2B marketing space is hard because everyone is doing it, and they all know its value. You may fare better with just producing quality content.

Finally, you can use one of the link buying services, i.e., buy links for your website. While link buying is a BIG NO-NO for most search engines, it is only a crime if you get caught. But I'd advise you to think about it this way: why would someone sell links in the first place, and how many they sold already, making the effect of it questionable, i.e., is the risk worth the penalty? In my experience, it is not.

[h3]Avoid Duplicate Content

Thin is the line between duplicated and similar content. In eCommerce, even more so than in other industries. For example, how different can Yellow Size M SpongeBob SquarePants socks and Red Size M SpongeBob SquarePants socks pages be? Do you even need two pages here? 

Still, the problem of duplicated content lurks over SEOs heads like a rainy cloud mostly because there is no one-size-fits-all answer to the question of how similar content needs to be marked as a duplicate. It depends on the industry as much as it depends on the search engine (I'm sure Google and Bing have different ideas).

I've found that Google's definition of duplicate content provides a decent frame of thought for the topic.

Avoid Duplicate Content

So, why is duplicated content bad, and what can you do about it? Suppose you don't tell search engines which URL is original/canonical, and you have the same content either on different pages of the same website or on other websites. In that case, you might end up boosting the wrong pages in search results because search engines will decide on their own which URL is original.

If duplicated content appears on a couple of internal pages, you can either rewrite the content or set 301 redirect to a single page you'll consider the original. For my Size M SpongeBob SquarePants socks example, a single page with different variants (yellow and red) would do the work. So, if we previously had two pages, one would have 301 redirects set.

What if the same content appears on Medium or other websites (or you have two online stores)? If rewriting is out of the question, you'll have to rely on the rel=canonical attribute in your link tag (it can be in the first example as well). There are two ways you can use rel=canonical attribute:

<link href="URL OF ORIGINAL PAGE" rel="canonical" />

or

<link href="PAGE URL" rel="canonical" />

With the first one, you’re pointing the search engine crawler to the original canonical/original version of the page, i.e., the one that the crawler is on is a copy of the page mentioned there. The second one is called a self-referential canonical link, as it tells the crawler that the page they are on is the original.

[note][nebojsa@crystallize.com]Going headless?

I've already talked about the redirects, so how do you handle canonicals? Why, on your front end, of course. You can go with gatsby-plugin-react-helmet or gatsby-plugin-canonical-urls plugin for Gatsby users. For Next.js, you can just add it as you'd typically do a component present on every page by utilizing next/head or using the Next SEO plugin. Use the nuxt-canonical package on your Nuxt.js project.

[h3]Content Marketing for eCommerce SEO

eCommerce has come a long way from simple product listing in categories and checking boxes of a product on a product page. Today you need to produce engaging rich content for eCommerce consistently. Content and commerce are merging, and customers expect rich, detailed information about your products, among other things (check the future of eCommerce post for more).

This means you need to be able to easily populate product information on the backend with pretty much anything from descriptions, images, and videos to specs, variants, and other essential information and quickly convey a message or a story on any channel on any screen.

[h3]E-A-T and Topical Authority

E-A-T stands for Expertise, Authoritativeness, Trustworthiness (or Page/Domain Quality). Google introduced the concept of E-A-T in its Quality Raters' Guidelines. You see, besides complex algorithms, the big G relies on manpower as well, and their feedback helps them understand which changes they've introduced in the algorithms make Search more useful.

We’ll talk some more about E-A-T in our pdf guide. What guide?👇

[note][bard@crystallize.com]Tired of scrolling?

You’ve Made It To The End, What Now?

Today, search engine optimization is a balancing act between audience, search engines, and business goals and expectations wrapped in technical, UX, conversion, and content problems. It is not only about dominating search engine results or growing traffic. And certainly not a one-person job anymore.

We’ve built this ecommerce SEO checklist with all of the above in mind. It is meant to be a checklist for one or a task management starting point for many. We’ve spilled our guts here (metaphorically speaking), but it’s on you to decide how you will put it to good use for your website, traffic growth, and, ultimately, business.