Have these questions ever crossed your mind?
This guide answers each question with examples from e-commerce sites.
Image SEO is the process of optimizing your images to rank them better in search engines. It involves reducing image size while retaining acceptable quality (to increase page speed), as well as adding additional markup to increase your image visibility in search engines.
Click for a larger image. Data from JumpShot.
In the 2019 data below, Google Images had substantial search volume.
Google Images holds second place in terms of search volume in the USA.
It's 5 times bigger than YouTube, 10 times bigger than Yahoo/Bing/Amazon and 15 times larger than Facebook.It received less SEO attention because many people considered its traffic difficult to convert.
This is what Google Image search result looks like on a laptop computer today:
The interface gives users a dedicated button to visit the website, as well as actions to share, bookmark, or collect an image.
Update 12.09.2019 - All the rich meta data like reviews, product price, brand etc. is now clearly visible on desktop too (this wasn't the case back when I first wrote the article).
Now here's how image search results look on mobile devices:
The mobile interface is designed for browsing products. Google displays a large image and uses structured data markup to show price, brand, stock status, and other product details.
Another important difference between mobile and desktop image results is the "related images" on the mobile version. Even if your product images don't make it to the top of the image search result page, they can still be shown in the related block, driving more traffic to your website.
Google Image Search can send useful e-commerce traffic. Visual search adds another way for people to find products:
An example of visual search in Google Images. Image by Google
Visual search was already handling hundreds of millions of searches on Pinterest when this article was written. Google Lens brought the same interaction into Google Images.
Visual search uses machine learning to identify the image and combine it with information from the page.
Google Cloud Vision is the core technology behind Google Image Search.
Like all other image recognition platforms, it's based on Artificial Intelligence and Machine Learning, but Google has the added capability to extract and analyze information from:
Below is an example of what Cloud Vision concludes, by analyzing web entities (websites that use the same or similar images). You can try Cloud Vision yourself.
It identified the shoe as an Adidas Superstar sneaker for women.
Context is also a major ranking factor.
We now prioritize sites where the image is central to the page, and higher up on the page. So if you’re looking to buy a specific pair of shoes, a product page dedicated to that pair of shoes will be prioritized above, say, a category page showing a range of shoe styles.
Source - Google blog
Check current Google Image traffic before changing anything, so you have a baseline.
Go to Google Search Console, open the performance report and switch the "Search Type" from "Search" to "Image".
If you'd like to go deeper than that, you can analyze user behavior in Google Analytics, go to Aquisition -> All Traffic -> Source/Medium and look for google images / organic. If you're not familiar with Google Analytics and would like a more detailed walkthrough, read this post from Yoast.
Google has to fetch an image before it can index it. Start by checking crawl access and broken URLs.
An obvious place to look for broken links is the coverage report in Google Search Console.
If your website does not happen to be in Google Search Console, you'll need special software. Screaming Frog SEO Spider is a really good one, and I'll be using it as an example below. It's free to scan websites with fewer than 500 pages.
Now let's check if your images are easily accessible by search engines...
You'll be presented with a list of pages that are blocked in robots.txt. Ask your developer/SEO to fix this situation or do it yourself. Robots.txt is located in your website's root folder.
If you use Sirv, you can instantly spot broken image links in the Analytics section of your Sirv account. You can see what the image URL was and where it was requested from (referrer).
Alternatively, you can use Screaming Frog again. Choose results with status code "Client error (4xx)". Alternatively, you can use Xenu's Link Sleuth, it's a completely free broken link checker.
Image sitemaps make it easier for Google to find and index your images.
You can either create a separate sitemap for your images or include image information in your existing sitemap.
Please refer to this image sitemap guide by Google for a more detailed explanation.
One of the most important factors for ranking your images is how well your product and category pages rank in regular Google Search. It's nearly impossible to appear in image search if your online store is ranking poorly.
It's therefore important to get your on-page SEO and UX right. This includes your meta tags, text, titles, your product image size, quality and loading speed.
In this part, I'll touch only the classic Image SEO parts. Image optimization and UX are covered in the next section.
To provide more context to its image search results, Google pulls information from your website.
If you're doing SEO for your e-commerce website, the chances of you ignoring your title tag are quite low. There is no image specific advice, just follow Google's guidelines and you'll do just fine.
The anatomy of a perfect e-commerce page by Bryan Dean.
On-page content, such as the product description, matters in both regular and image search results. Bryan Dean's e-commerce SEO guide covers the wider page.
Use descriptive file names. adidas-superstar-white-shoe.jpg says more than DSC001.jpg. Separate words with hyphens, not underscores.
File name is a super minor ranking factor though, if you have thousands of images and don't have an easy way of renaming and referencing them - don't bother, it's not worth it.
The alt image attribute, commonly referred to as the "alt tag" or "alt text", was created to make the web a more accessible place.
Good alt text follows a few rules:
Examples:
```
```
```
```
If you're interested in a more in-depth guide to alt text writing intricacies, I recommend reading this nice article by Hubspot.
Mobile Google Image Search looks gorgeous for e-commerce. For example:
The product information is pulled from structured data on the page where Google found the image.
Here's what info Google can use in Google Image Search results:
Google has a decent guide to product structured data.
Some tips:
The cool thing about structured product data is that it's also used by Google's Merchant Center, Facebook and Pinterest (it supports JSON-LD, though it's not documented).
It's highly likely that all e-commerce platforms will support structured product data either now or in the future. It'll boost your rankings today and it will generate even more traffic in the future.
The next section covers image delivery and performance.
Image optimization might sound complicated, but it doesn't have to be.
For most online stores, it's impossible to sell anything without images. In fact, images are responsible for 55-65% of the total transfer size on all websites (the median size of images is 1600 KB for Magento stores, according to HTTP Archive).
Loading speed is a ranking factor. Poor UX due to a slow website will hurt your sales. Low-quality product images can make your website faster, but it'll have a negative impact on your conversions and will negatively affect your image ranking in image search. This is due to how image recognition algorithms work, high-quality images have less noise (compression artifacts), which make it easier for ML algorithms to correctly identify objects in images.
You have to hit the sweet spot between image quality and loading speed to succeed. Thankfully, it's possible and not even hard.
Here are 7 tips to make your images load fast and look amazing.
There are some that are worthy of the "next-gen" title though: WebP, JPEG XR and JPEG 2000 are all wildly superior to the previous generation of image formats. They're doing a much better job at both lossy and lossless image compression.
Images in WebP format are usually 26% smaller than PNG and 25-34% smaller than JPEG.
You might ask, - if they're so superior, why aren't they used more widely?
Two words - browser support. This is why old formats like GIF are still around, because every web browser and every operating system support them.
Here are the browser support stats for each of the modern formats:
WebP is the clear winner here with ~80% browser support. All the major players - Google (they created WebP), Mozilla and Microsoft all support WebP. Smaller browsers like Opera, Vivaldi and Brave are all using the rendering engine that powers Chrome, making them support WebP by default. It's currently unclear whether the last remaining player in the browser market - Apple - jumps on the WebP bandwagon or not.
This shouldn't stop you from using WebP as your main image format for your product images. You can easily serve WebP to supported browsers and a dinosaur era format to Safari.
Use Sirv. It'll automatically serve your product images in the perfect image format.
It's super easy to integrate with your store, plus there are plugins for:
A very common mistake with a really high impact on page loading time.
Let's look at this page, for example. The max width for the content container is 740 pixels. Which means any image in this post that is wider than 740 pixels would be downloaded and then rescaled to 740px width... by the browser.
The browser automatically scales the image to fit the container. To say that this is not optimal for performance would be an understatement. To demonstrate, let's take a look at the original unoptimized PNG image and an optimized image with optimal quality, proper scaling and a modern image format:
The difference is massive.
The previous example illustrated the massive implications bad image scaling could have on a regular, desktop computer experience. But we live in a responsive era, where mobile devices account for ~60% of traffic. The proper scaling problem becomes even harder to solve.
Mobile devices come in different shapes and sizes, some with HIDPI displays with pixel density as high as 3x (ultra retina displays). This means we have to serve individually scaled images to each and every device to achieve the best performance.
The old-school solution would be to use the SRCSET tag. This means you have to:
The markup looks something like this:
```html
```
This is quite cumbersome, to say the least.
Sirv offers a much more elegant solution. This is how I serve responsive, automatically scaled images in this blog post:
```htmlI use markup like this for every image in this post.
Sirv.js handles the detection and transformation:
<script src="https://scripts.sirv.com/sirv.js"></script>The script detects the browser and viewport, resizes the image, chooses a suitable format and quality, and enables lazy loading.
Lazy loading in action
Lazy loading is a technique where only above-the-fold images are loaded, while those out of sight are loaded on-demand. This can dramatically improve your page loading speed.
For example, on our lazy loading demo page, we have 26 images, but only the first one is initially loaded.
HTTP Archive has some interesting data: Magento store owners could speed up their image loading speed by 66% if they were to use lazy loading.
Most websites serve their images from a single server, located in a single location.
If you're operating on a small country level - it's fine. The thing is - the further your visitors are from your origin server - the slower your website will load.
Content Delivery Networks (CDNs) solve this problem by replicating your image across a global network of servers. This means when a UK visitor opens your page, they get all your images delivered from their nearest CDN location (London) and not from your, say, San Francisco based server. Images don't have to cross the entire Atlantic, which helps speed up your website dramatically.
Sirv is an image-focused CDN. Besides replicating and caching images around the world, it provides:
A: Here's what Google's own John Mueller has to say about this:
It doesn't matter how you host the images, there's no SEO-bonus for having them on the same host/domain. However, since changing image URLs is "hard", I'd use your own hostname for the CDN (avoid https://t.co/Y1ND46l9ij and use https://t.co/fWMc6CFPZ0), so you can change CDNs.
— 🍌 John 🍌 (@JohnMu) March 5, 2019
In short - using a CDN is safe for SEO but use your own domain with the CDN, for convenience. It's easy to configure your own domain with Sirv.
It's also a very good idea to add your CDN domain to Google Search Console, for error monitoring and that kind of stuff.
Image metadata is text information embedded into a file, like when a photo was taken, camera settings, what software was used to edit it and so on.
Google supports only IPTC photo metadata to display image credits.
It makes a lot of sense to strip images of metadata to make them load faster. Sirv strips meta automatically (which you can disable if needed). If you're not using Sirv yet, either create an account or use EXIF Purge (Mac/Windows) instead.
Sirv automates resizing, format conversion, and compression for product images.
Sirv also supports image zoom and 360-degree product views. Here is an example.
You can try it or use a supported platform integration for Magento, WordPress, or PrestaShop.
Credits: Header image designed by katemangostar / Freepik. 360 spin by Karl Martini.
The three most popular image formats on the web can hardly be called modern.
WebP browser support
