Around March of this year I had the need to accomplish a daunting task. I was looking for clients when I ran into JeanSmellGood.com’s website and physical store. Jean owns a perfume shop in the Miami Gardens/Hialeah area here in South Florida. JeanSmellGood.com’s website is a Shopify store that sells perfumes. His passion for perfumes is one of devotion and knowledge. When I arrived at his store, Jean recognized that as passionate as he is about perfumes, I’m also just as passionate about computers. Jean gave me the opportunity to work on his Shopify store. Specifically, my initial proposal consisted of ways in which to improve JeanSmellGood.com’s SEO.
Initial SEO Audit & Incorrect Technical SEO for Image Files
So I conducted the usual SEO analysis, and from there on out, ideas started bursting out. One of the many tasks I had to take care of was renaming over 700 images that were uploaded with incorrect technical SEO standards. What does this mean? Incorrect technical SEO for images is based on the following; incorrectly named images, incorrect or missing ALT text for images, wrong image dimensions, bloated image size, wrong image formats.
Why should you optimize your Shopify Product Media files correctly?
Following Google’s SEO naming conventions is vital for a good placement of your Shopify Products in the Search Engine Result Pages (SERPs). Here is the deal, if you index something as a perfume bottle image with the following url name convention “IMG_S3932.JPG”, there are less chances that Google will associate your image with that product. This is because URLs are a part of the algorithm which associate users’ queries to what is actually in the image. Meaning if the user was looking up “Shop for Maison Alhambra – Yeah! Man in Miami”, there will be less chances of your image showing up than one that was indexed correctly with the “Shop-for-Maison Alhambra-Yeah-Man-perfume-online-and-in-miami.webp” file URL. As you can see, the user’s query: “Shop for Maison Alhambra – Yeah! Man in Miami” appears right in the URL of “Shop-for-Maison Alhambra-Yeah-Man-perfume-online-and-in-miami.webp”. That would be a correct image file naming tactic. The strategy is to get all the technical SEO aspects of your image files correct. Now your image is indexed as “Shop-for-Maison Alhambra-Yeah-Man-perfume-online-and-in-miami.webp”, a direct description of what is in the image itself. Along with this, another image file naming tactic is to only use dashes, – to separate words within your image file names. This is because words are split using dashes “-” and not underscores “_” or spaces. As a matter of fact, search engine crawlers will not recognize separate words unless they are separated by dashes. Now you know how to correctly name file images in your Shopify store or any other website.
Along with file naming conventions, there is the issue of file sizes. In your website, you don’t want to display images that take too long to load. This diminishes user experience. Images that load fast are keen to a great user experience. This might not seem like a big issue, but what if I loaded a 2MB image because I was displaying it in High Res? Well, depending on what ELSE you’re loading in the Largest Contentful Paint (LCP), you might run into some issues. Generally, the more I’m able to load and display to my use in my LCP, the more I will have to please the eyes of our visitor up front. I cannot do that if I’m loading media that’s larger than a couple KBs in my LCP. So in order to accomplish this, we want to compress, convert, and resize images to the right dimensions. Read on to find out how I have automated that process for your Shopify Product Media here.
The Solution - Use Shopify GraphQL & Gemini AI to SEO Optimize Images
To fix this issue with a Shopify Store’s product media, you first need to download all the product images. Along with downloading the images, one also needs to rename them in an efficient manner which would not include them sitting there and checking the name of each product, manually renaming files. Same goes for the ALT text, you want to take care of that automatically. Additionally, the product images need to be downloaded locally in a manner in which they can then be re-uploaded to the product in the same order in which they were first uploaded to the product.
How do you download Shopify Product Media using GraphQL?
There is one single best approach to downloading all the Shopify Images from your store by first generating a list of the Product Media using GraphQL. First, you must grab all the products you have along with their data, specifically the product ID, title, Product Media ID, and the product media URL. You can generate that list of Product Media URLs by using the GetProducts GraphQL Shopify Query. That GraphQL query will allow you to pull Media Images for that product. Given that Shopify sets limits on the return number of products for each query, you will have to pull them in batches of 250 or use Shopify’s batch processing. The script in our Shopify SEO Image AI Optimizer handles by using batches of 250 then querying from where we left off by using the last product cursor as a starting point.
In order to get all the files in the correct product handle and product image order, they must first be downloaded to their respective folders. Luckily, the Shopify GraphQL API returns product images in order. This means that if you are downloading media for a product named “French Avenue Cocoa Marado Eau de Parfum 3.4 oz”, you will download all the images for that product into a folder named after that product title, and then you will name a folder inside the product folder for each image relative to its placement. Once that you have this list of Product Media, you can do a couple of things
Iterate over the product media list using bash.
Create a folder for each product using the product handle and CD into it.
Create a directory for the product media’s placement. CD into it.
Download the corresponding product media in the placement and save it to the current directory using WGET.
Additionally, the `extract_images_urls.sh` script allows you to set a FROM_ID. This is in regards to the product ID. Grab the product ID from where you want to start processing, and every product created AFTER this given ID is what will be downloaded.
Using the Gemini API to rename your Shopify Product files correctly.
In order to fix our incorrectly named image files, we would want to be efficient about it. In order to get this done quickly, let’s leverage the power of AI to accomplish to rename our Shopify Product files. Earlier on, I wrote a blog post about the dangers that AI is currently causing websites with original content. These authors go out of their way to create meaningful content, and features like Google’s AI overview and ChatGPT responses are simply not good enough to give authors, content creators, designers, and developers the credit they rightfully deserve. This use case of AI is one of those use cases which I also mention in the article where AI is a huge advantage, to accomplish a tedious, repetitive, mundane task. You can read more about all of this in my article “”.
Now back to the point, in order to fix this problem we have with our incorrectly named images, let’s leverage the power of AI. What I did here was hook up the bash script with a Google Gemini AI prompt in order to get the correct name for the Shopify Product Images. You can input the desired prompt into the BASH variable and that’s what Gemini will look at when looping through the downloaded images. Keep in mind, the more complex your prompt is, the more specific your filename will be, AND the more tokes you’ll consume. Since I had the free version, I went with a simple prompt to rename my Shopify Product Media.
The algorithm is a BASH script that simply loops over your folders and prompts Gemini to analyze the image. You can see how specific the prompt I’m using is, and in order to get this right, you will want your prompt to be just as specific or more if you have available tokens. It is a key aspect to this algorithm. I’m specifying exactly what the analyzer is looking at, “perfumes”, I’m telling it exactly what to look for in the image of the perfume “the name of the perfume”, and I’m also telling it exactly what to return if it cannot find the name of the perfume.
Telling the algorithm what to return if it cannot find the name of the product you’re looking to rename your file after is important. This way, our bash script knows how to rename the Shopify Product Media according to another factor; the Shopify product handle.
The importance of correct Image Dimensions for SEO
This affects Technical and on-page seo. The premise behind this is that images ought to load as fast as possible on your page. You want images to load blazing fast, afterall media takes the heaviest toll on pagespeed. For example, I have seen assets be reduced from 5MBs to a mere 30KBs. This is just one image, imagine if your page was loading 20 high Res images all at once… and they were all over 3MB in size when they only needed to be 10KB each because they were being displayed in thumbnails… The difference in loading speed of a well optimized page in such scenarios is incredible and most importantly, visible to the human eye. This consideration of image sizes and loading speeds constitutes a well thought of technical SEO strategy. Running all your images through an automatic image resizer constitutes a well thought of tactic.
Optimizing Incorrect Dimensions
In terms of getting your images to display in the correct dimensions, this part has to do with on-page SEO. Do you want your images to look pixelated? Certainly not, and so, you will want to make sure that you only resize images that are above a certain dimension threshold. For example, if an image is already 800 pixels wide, and that’s the largest size you will be displaying the image at, you would not want to resize it. Now that I’m sitting here writing this, I must also add that using ratio to resize the images is not the best approach, and instead you will want to resize to a static number of “x” pixels, which will be dictated, like aforementioned, the size of the biggest display you will have to display the image on page load. Say, if your image will be displaying at 800 pixels wide upon pageload, then that’s the width size you will want the image to be at. Not less, not more, exactly at 800 pixels wide. When choosing between the height and width as the determining dimension, you will want to pick the smallest dimension, because if you pick the greatest, you will cause your image to be pixelated in the smaller dimension.
Say if image “x” is “300×600” and your display requirements are that of “200×300”, then you will want to resize the image to “200x” because if you shrink it to match the height dimension of 300 pixels, the width will be too small for the display requirements. In turn, your image will not look great on your page, which will affect your on-page SEO.
For this, we will want to check the dimensions of the image before resizing it. We want to make sure the image meets a certain threshold before we perform the resize. That is, if the image is below a specified Height and a specified Width, we will then perform the resize. We dont want to overshrink an image beyond dimensions that will look pixelated on our product pages as we mentioned above. In this script, I have defined the Height and Width thresholds as variables you can set yourself. Set them, and the bash script will only shrink images using the smallest dimension as a guide if its dimensions are appropriate.
Compressing Images for technical and on-page SEO
As well as resizing the image dimensions, you will also want to make sure you compress them correctly. This also affects file size, which as we discussed earlier, greatly affect technical and on-page SEO. WebP has been around for a while now and has been a standard for image formatting. …. This BASH script reformats and compresses the images when in the process.
The importance of ALT text for your SEO
Another important factor for your SEO is giving images the correct ALT text. For this, I have taken a very rudimentary approach and instead of using AI and incurring charges, I have simply used the file name to generate a very standard ALT text. If you are wondering about the importance of ALT text for your SEO campaign, it is all about generating an informative description of what is in the image you are looking at. So let’s start with what that means, in essence it means that people with visual disabilities will be able to listen to the ALT text instead.
As an addition to this project, I want to have a step in which we generate the alt text and append it to the file that the extract_images_urls.sh script generates. By using Gemini to describe the Shopify Product Image, we are ensuring higher accuracy as to what’s actually going on in the image. The downside to this is that it could consume a lot of Gemini tokens and this can be mitigated by using less specific prompts as well.
Conclusion
I hope you guys find this Shopify Product Image SEO AI Optimizer as useful as I did. I sure as heck save a lot of time now every time I need to SEO optimize a Shopify Store’s Product Media Images. Additionally, my images have been receiving a lot more hits since I optimized them… well that would be expected anyhow if you’re following standards. If you guys want to contribute to the repository, you can do so here under the MIT License.
