Since 2013, I have worked at some of the largest webshops and e-commerce retailers across the Nordic region, as both an in-house SEO expert and as an outside consultant, helping companies as much as double their SEO visibility and drive more traffic to their websites.
Thinking back to my earlier days, I remember a time when Google Image search, and images in general, were almost completely inconsequential to SEO. In those days, you made sure you had descriptive filenames, effective alt-descriptions, and you compressed your image files to keep your site light and loading quickly. These were great best practices, but they weren’t going to affect your ranking in any search engines.
But SEO has evolved a lot since 2013. As a result of new technologies and updates to search engine algorithms, images are now a critical focal point of any effective SEO strategy.
Given the role that product imagery (and video) plays in e-commerce, it is important to understand the new image SEO landscape and the growing importance of an effective image SEO strategy.
The Growing Importance of Image SEO For Driving Website Traffic
Today, according to data collected by co-founder of SEOmoz and co-author of the world-renowned book The Art of SEO Rand Fishkin, image searches account for 22.6% of all search engine searches.
That is five times more than Youtube, and 10 times more than Bing!
With so many people using images to conduct searches, coupled with recent updates from Google about how images can be used to conduct searches, there is a ton of potential for images to drive traffic to your site.
If you value SEO at all, you are likely aware of those image SEO basics that everyone followed a few years ago. And platforms like Shopify have made it especially easy to make sure you are hitting all the basics.
Yet, almost every time I start with a new client, I find at least a few aspects of their SEO strategy that aren’t optimized the way they could be. Whether it is missing some of the basics, unawareness about changes to how Google is utilizing images, or tools they can use to boost their SEO, there is always something that can be improved.
As Pixelz SEO expert and a specialist in SEO for e-commerce, I want to provide you a quick refresher of some of those image SEO basics. Then, I'll share some of the newest developments happening at the bleeding-edge of SEO so you can make sure your SEO strategy is taking advantage of the latest best practices and driving as much traffic to your site as possible.
An Audit of the SEO Basics
As a consultant and in-house SEO manager, I know how dangerous it is to assume that even larger brands have optimized their image SEO fundamentals. Anytime I start with a new client, big or small, I always conduct a basic image SEO audit by checking the following:
Do Your Images Have Descriptive Image Names and Appropriate Alt Texts?
As Google’s spiders crawl the HTML of your web-pages, you want to use every opportunity to give Google as much information about your page and content as possible. This allows Google to easily index your website and return your web-pages for every possible relevant search.
Image file names are one of those small but important opportunities to provide Google a little extra information about the images and content of your web-pages.
Yet, surprisingly, when I audit websites for my clients, I still find that some forget to pay attention to how they name their images files, often uploading images to their website with file names like the example on the left below:
The problem with generic file names like “image003.jpg” is that they don’t convey any information to Google about what the image might be.
The image on the right, however, gives Google an extra bit of information that lets Google know what searches your content might be relevant to, helping improve the chances your site or products are displayed to relevant searchers.
Descriptive (But Not Too Descriptive) Alt Texts
Another basic but important aspect of an image is an image’s alt text. Alt texts are another way to give search engines more information about the content of your images and, more generally, more information about the content of your site.
Good alt text describes an image to help Google better understand what a particular image is. This text will also display to users in the event an image doesn’t load on your page and helps visually-impaired users more easily access your content.
Generally, a good alt text should be descriptive, specific and less than 125 characters (search engines will typically stop reading beyond the 125 character limit).
Take a look at the example below. I have provided a typical fashion image with a good example of an image tag (including alt text):
img src="white-brown-daniel-wellington-watch.jpg" alt="Brown and white Daniel Wellington watch on a white background"
This alt text is descriptive, specific and provides a good sense of what is going on in the picture within the 125 character limit.
A word of caution: you don’t want to use alt texts as an opportunity to keyword stuff. If this image were being used as a product image for a gray shirt, you wouldn’t want to write something like:
img src="white-brown-daniel-wellington-watch.jpg" alt="Daniel Wellington watch by Daniel Wellington Daniel Wellington watches"
This is bad SEO practice and it may result in your images not being indexed as effectively in search engines, weakening your SEO.
Search-by-Image Makes Image File Names and alt texts Even More Important
One reason that image file names and alt texts are more important now than ever is the growing use of images as a way of searching Google. Users are more frequently searching for products using images of the same or similar products.
Having descriptive image file names and alt texts makes it more likely Google will find and return your content in a search-by-image search, giving your site additional opportunities for visibility to potential customers.
For a deeper dive into alt-texts with additional examples of both good and bad alt texts, I recommend Hubspot’s fantastic post Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO.
Helpful Tools for Analyzing Your Image Attributions
If you want to evaluate your file naming conventions and how effective your alt texts are, there are a few great tools available online that will help you conduct an analysis of your web-pages.
Some of my personal favorites are:
Screaming Frog: Old but gold (and very cheap!). Screaming Frog makes it easy to analyze the technical aspects of your website and extract bulk image issues to Excel. You can access it for free version for up to 500 URLs.
Sitebulb: Similar to Screaming Frog, with the exception that I find Sitbulb better at visualizing potential technical issues.
SEMRush: This is a great content marketing tool overall that will also help you with you optimize your images with similar features as Screaming Frog if you are willing to pay for the monthly $100 per month subscription.
Are You Using The Correct File Formats and Image Compression Tools?
Loading times are a direct ranking factor in search engines. Users also have very little patience for loading, so keeping loading times to a minimum helps your SEO by minimizing bounce rates and improving the general user experience of your site.
One factor that can inhibit your webpages ability to load quickly are large image files.
Most commonly, sites having images that are too big is a result of simply not understanding how different file types affect file size and when different file types should be used in order to keep your site loading as quickly as possible.
For simplicity, there is a general rule of thumb you can follow when it comes to image files: product images (or any images) should be saved as JPEGs and graphics should be saved as PNGs.
Though not a hard-and-fast-rule, the primary reason for using JPEGs is that JPEG often allows for a much smaller file-size than PNG files (this may not always be the case, so it is always best to do your own comparison with your own images). This is because JPEG is a “lossy” file format, meaning, the compression algorithm used by JPEGs actually removes data from the image to make it smaller, without sacrificing much of the image quality.
One important exception to the rule of using JPEGs for your product images is when you are using transparent backgrounds. JPEGs do not support transparent backgrounds, so in this case you will need to save your images as PNGs and then compress the images as much as possible. I also suggest you lazy load your images saved as PNG (we will discuss lazy loading below) so that they do not adversely impact the performance of your site.
At Pixelz, we offer customer compression through JPEGmini. Google also has a compression tool called Google Guetzli, however, Managing Editor of Pixelz Blog Dave Kensell conducted a ahead-to-head comparison between Google Guetzli and MozJPEG, and MozJPEG came out on top as the better performer with a much faster encoding time (you can read about Dave’s comparison in his post Google Guetzli vs MozJPEG: Why Google’s New JPEG Encoder Can’t Dethrone the Product Image King ).
If you are already having your images edited by Pixelz, we make it easy via our “Specifications” page for you to also have your files returned in the file format that you would like, removing the need for you to change file formats and compress your images manually later (you can see all the details about how our Specification page in our post We Just Made Getting Your Images Retouch Exactly How You Want Even Easier).
The Latest Advanced SEO Updates and Tools
The basics are important, but to win in the global, highly-competitive fight to become a top search result, the basics aren’t enough.
SEO is constantly changing and specialists like myself are in a constant race to understand search engine algorithms to figure out exactly what criteria they are using to rank websites and how best to optimize sites for those factors.
Truthfully, updates and changes are so frequent that you could write an entire book just on SEO updates from the last year. To narrow the focus of this post, I have picked out some of the most recent updates that have been announced as well as some of the more relevant advanced SEO strategies specifically for e-commerce retailers.
Optimize for Google’s Move to Mobile-First Indexing
As of July 1st, 2019, Google is using the mobile version of websites as the default source for indexing and ranking sites.
To rank well given Google's focus on mobile, your site should be built with a responsive design in mind. “Responsive” refers to website design that adjusts its layout dynamically depending on the size of the screen that it will be displayed on:
Pixelz Desktop Website
Pixelz Website on a Mobile Device
This does not impact SEO directly, but having a responsive mobile version of your website is critical for user experience with so many people shopping online via mobile. According to CEO of Outerbox Justin Smith, “79% of smartphone users have made a purchase online using their mobile device in the last 6 months.” That is more than enough web-traffic to justify mobile-site optimization.
Unfortunately, responsive and fast-loading do not always play nicely with high-quality images. When we rebuilt our own Pixelz site in 2016, our primary goal was to achieve faster loading times but maintain the quality and responsiveness of our images. To do it, we used Middleman and Imgix and the result was a 63% reduction in loading times.
You should be in the mindset of doing the same. With so many customers accessing your site via mobile and Google using the mobile version of your site as the primary source for ranking and indexing, it is critical to ensure your site is optimized for mobile users.
Utilize A Content Distribution Network
Even in the digital world, physical space matters. If I pull up a web-page in New York but its digital content is on a server in Seattle, it will take that content longer to load than if the content were on a server in Boston.
In order for your digital content (images, videos) to load as quickly as possible, you want your user and the server hosting your content to be located as close as possible. And you can do that by implementing a Content Delivery Network, like Cloudflare.
Source:Ahrefs.com
Even though the servers where your content is hosted can only be in one place, a (CDN) like Cloudflare has a network of servers located across the globe where your content can be cached and quickly accessed by users no matter where they are accessing the content from, giving all users quick loading times and a seamless user experience.
Utilize Schema Markup With Google’s Markup Helper
If you have searched for products on Google, you likely noticed that some results are returned in a more structured and detailed format. Below is an example of a search for “Apple iPhone X” and a subsequent result from BestBuy:
Google results for an iPhone show Best Buy Utilizing Google Markup
You’ll notice the list result includes information from BestBuy’s website about the particular product, including the product star reviews, the product rating, the price range for the product, and the description for that particular product.
This is because BestBuy is taking advantage of Google’s schema markup. Schema markup is a way of telling Google exactly what different bits of information are on your site, allowing Google to structure that information and present it as part of the search results for users.
Normally in the HTML code of a webpage, you might have something like the word "Avatar" between two h1 tags.
The issue is, Google doesn’t actually know what that information is. Avatar could refer to the movie or the small profile images that represent an internet user. All Google knows is that there is some text between the h1 tags.
However, by using Google’s Markup Helper, you can actually tell Google what exactly the information is between those h1 tags.
To show you how Google’s Markup Helper works, let’s pretend we are Jeff Bezos and we are going to markup one of the product pages on Amazon to show more information about the product in Google’s search results.
The first thing Google Markup Helper wants to know is what type of page I want to create a schema markup for. In this case, we will be using it for a “products page.” I then provide the URL of the page.
To get started, Google asks for the type of page and the URL you want to Markup
Then, Google is going to pull up my product page and ask me to identify what each piece of data is by highlighting it and selecting the data type:
Google will ask you to indentify each piece of data on your page via a highlighter tool
Once I have marked all my data, I can click “create HTML” and Google will provide a script of code to add to the head of the HTML file of my webpage. By adding that bit of code to my page, Google can display my results similar to the BestBuy example above, with all that additional information about the product.
Google will provide you HTMl code to place in the header of your page's HTMl code
Schema markup is not an explicit ranking factor for Google. However, having a schema markup gives Google more information about what the content is in your web-pages so that they can display that information in a structured way that is more targeted for users. This can help increase the click-through-rate of your site, which a study conducted Moz demonstrated does likely improve your SEO.
If you want to test your schema markup, you can use Google’s Structured Data Testing Tool to see how effectively your data is structured.
Create an Image Sitemap
To get the most SEO out of your images, you can create a separate sitemap just for images, giving Google easier access to the images on your site and even ones that Google might miss when scrapping your sites general sitemap.
To give you an idea of what an image sitemap might look like, Google provides the following image sitemap in their documentation:
Source: Google Support Docs
Again, this is another way to give Google more information about the site, helping your site be indexed more thoroughly.
Implement Lazy Loading
Sometimes, your users don’t need an entire web-page to load in order for them to find the content that they want.
Despite that, many sites will load all the content on a web-page anyway, needlessly wasting resources and slowing their loading times.
This is where implementing lazy loading for your content and images is handy. Lazy Loading allows your webpage to only load the content that the user has direct access to rather than loading all the content on a page.
As a user scrolls down your webpage, any content that is below the browser fold will stay unloaded until it becomes visible to the user, at which point it will fully load. By only requiring your site to load part of the webpage being requested by the user, your loading time decreases and your customer has more immediate access to your content.
Lazy loading loads text first so the user can begin reading and then loads images after. Source: Google Support Docs
At one point in time there we concerns from SEO experts about Google ability to properly crawl lazy loaded pages. However, that concern no longer exists. In fact, Google now recommends lazy loading as an effective way to enhance the user experience.
The increasing importance of images in search is exciting news for e-commerce retailers. As new tools and technologies are rolled out and algorithms become better and “seeing” images, it will be those who took the time to get out ahead of the technology and prepare for image-based search who will reap the most benefits from the change. If you have more questions regarding image SEO and e-commerce, feel free to connect with me on LinkedIn.