Search engines play a huge role in the success of any website — especially ecommerce stores. For this reason, many of us invest time and money into ensuring our content is created with Search Engine Optimization (SEO) in mind.
But, how many of us take time to consider the impact that images can have on our search rankings? In this article, we’ll discuss how some small changes to your images can have a big impact on your search engine results.
What is SEO?
Before we start let’s consider what exactly SEO (Search Engine Optimization) is. Wikipedia describes it as follows:
The process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. SEO refers to the improvement of unpaid results (known as "natural" or "organic" results) and excludes direct traffic/visitors and the purchase of paid placement. — Wikipedia
In other words, it’s the process of helping our web content appear higher up in search engine results with the goal of attracting more visitors. This is also often referred to as “organic SEO”.
In contrast “paid search” (also referred to as PPC — Pay Per Click) is the tactic of bidding on “search terms” in order to showcase a link to your site/content in the prime real estate area of a search results page — usually in the first batch of results. Paid search results are clearly marked — usually with an “Ad” icon.
In this guide, we are going to focus on “Organic Image SEO”. That is ways in which we can help search engines improve their understanding of the images on our website better.
Why SEO Matters
SEO has developed hugely over the last few years. I am sure many of us can remember times when web page footers were “stuffed” full of keywords that appeared to have little or no relevance to the context of the page.
Thankfully those days are long gone and today search engines are much cleverer and the inner workings of their “search algorithms” a closely guarded secret. Whilst you can pay your way to the top of the search listings via “paid search” there are many things you can do that don’t cost $$$ to help search engines understand more about your content and in particular, the images you display on your site.
Ecommerce Image SEO
Images become especially important when considering ecommerce sites. The saying a “picture is worth a thousand words” is never more relevant than with online selling.
Having your product images rank highly, and above your competitors, will help drive sales and revenues. According to a 2017 eMarketer report, “over ¾ of US internet users regularly, or always search, for visual content prior to making a purchase”
Therefore, the more we can do to help search engines understand the images we place on our sites the better.
Site Speed
One of the first things we can do is optimize our images to ensure they download as quickly as possible. You may be wondering why an image files size is important to SEO? Back in July 2018, Google announced that they would start factoring in the speed of a site when delivering search results.
Initially, this affected searches made from desktops but now includes mobile search too. It’s therefore essential we do everything we can to ensure our images don’t keep visitors waiting and therefore impact negatively on how the site overall is ranked overall.
Optimizing an image’s file size is one way to help improve your user’s experience and although not the focus of this article plays a role in how your site ranks in search engines.
You can learn much more about how image optimisation works in our sister guide “The Crush.pics Guide to Image Compression”.
Image Filename
Assuming we’ve optimized our image files size there’s plenty of other things we can do to help search engines understand our images.
Let’s start by looking at one of the quickest wins available to us, the actual image filename. The name we choose can give clues to search engines about the subject matter of the image. Consider the following example HTML image element:
Bad: <img src="AO99823.jpg"/>
Good: <img src="tortoiseshell-cat.jpg"/>
By simply choosing an appropriate name we are giving search engines something to help them categorise the image. It’s no surprise that when searching for “tortoiseshell cat” on Google images the images returned have this phrase in their filename.
Image Alt
Once you have given your image an appropriate filename your work with the file is done. All of the following techniques are related to actions you can take to give more context to the image to help search engines further.
Next up in our list is the humble alt attribute which Wikipedia describes as follows:
The alt attribute is the HTML attribute used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered. The alt attribute is used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. — Wikipedia
First and foremost an appropriate alt attribute will help with accessibility and will enable screen readers to better describe the image and it’s relevance to the content around it.
Beyond that, a well-structured alt attribute will help search engines gain even more context about the image. A simple keyword relating to the image is a good start but spending time on crafting a fuller description will pay dividends:
Bad (no alt text specified): <img src="tortoiseshell-cat.jpg"/>
Bad (keyword stuffing): <img src="tortoiseshell-cat.jpg" alt="cat cats feline moggy" />
Better (relevant alt text): <img src="tortoiseshell-cat.jpg" alt="Photo of a cat" />
Good (very descriptive alt text): <img src="tortoiseshell-cat.jpg" alt="Holly the tortoiseshell cat sleeping on an armchair" />
The alt text you choose should describe the image as best it can. In the above example, you can see how the final green version gives the most context to a screen-reader and in turn a search engine.
Image Title
We can go one step further and specify a title attribute to our image. As the name suggests the title text should be used as a title for the image. On first glance, it might appear that there’s little, or no, difference between the title and alt attributes. However, both attributes do serve a distinct purpose.
The web site What-WG draws a nice distinction between the two:
The alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information. — HTML: The Living Standard
To better understand let’s extend our example from earlier:
Bad (simply repeats the alt text): <img src="tortoiseshell-cat.jpg" title="Holly the tortoiseshell cat sleeping on an armchair" alt="Holly the tortoiseshell cat sleeping on an armchair" />
Good (an appropriate title): <img src="tortoiseshell-cat.jpg" title="Sleeping Holly" alt="Holly the tortoiseshell cat sleeping on an armchair" />
The general consensus is that Google, in particular, places more value in the alt attribute but as with all things search-related the more you can do to enhance understanding and add context for the bots the better.
Supporting Content
Beyond the filename and img element attributes we can add additional context via content and page layout.
Search engines will now evaluate the entire page and draw conclusions about the content, including the images, based on this. Continuing our example it would seem odd to have our cute cat photo on a page about car engines (although not impossible).
Therefore it is recommended that the content on the page relates to the images that appear alongside it. Google also recommends that the most important image appears first in the content flow. They also recommend that wherever possible, images are placed near the relevant supporting text.
Finally, it’s worth ensuring that the page title and short description (found in an HTML page meta field and often auto-generated by systems like Shopify and WordPress) supports the page content (including images). Search engines will use this data in their search results listings and as with all the other tactics listed here adds important context to the page.
Image SEO Checklist
Here’s a quick reminder of the steps you can take to help search engines understand your images:
- Ensure our image has been optimized for quick download ✓
- Name the filename appropriately ✓
- Add a descriptive alt text for the image ✓
- Add an appropriate title for the image ✓
- Ensure the most important image is placed towards the top of the page ✓
- Ensure the image(s) appear close to supporting text ✓
Automating Image SEO with Crush.pics for Shopify
If you run a Shopify based store you can take advantage of a Crush.pics feature that is specifically designed to take the pain out of renaming your files and creating appropriate, and search engine friendly, alt texts for all your product images.
Using a simple wizard you are able to choose a very usable default file name structure or create your own using a set of variables. These include:
- Product barcode
- Product SKU
- Product vendor
- Product type
- Product title
- Variant title
You can also create your own “custom text” that you can use in the format. A good example of this could be to include the name of your store or other relevant information that would help categorise your image.
To create your preferred structure simply drag and drop the relevant variable into your preferred sequence for both filenames and alt text (you can specify both independently) and choose whether you would like this to be applied automatically to your product images or manually.
Once set this format can be applied to all existing product images as well as future images added.
Don’t forget that Crush.pics also handles the image optimization for you too!
Over to You
Images are a huge part of the web. By taking a bit of time to create useful and descriptive alt texts and naming our files appropriately we are doing all we can to help search engines understand, and therefore categorise, our images as well as they can.
Following the tactics outlined in this guide won’t ensure a top place “organic” ranking but will certainly put you in a better spot than most sites out there. The good news is that many of the ideas outlined here can be automated thanks to tools like Crush.pics.
