Photographers Guide to Image SEO

Download the slides from the video above

Today I want to go over the Photographer’s Guide to Image SEO. So, in this guide, we’re gonna talk about the benefits of image SEO and we’re gonna go through image selection, image placement, image pixel size, image file size, image file names, alt text, and some other considerations in terms of optimizing your images for search engines.

Benefits of Image SEO

Elevates the SEO of a page or post
Increases Google image indexing
Increases visibility in Google image search
Increases the user experience
Increase user engagement

So to start off with here, the benefits. So by doing image SEO correctly and paying attention to it, it can elevate the overall SEO of a page or a post. So the images can really contribute to the SEO of a page or a blog post so that it can actually write better than compared to a post or a page that doesn’t have an image or that the images are there but they’re not optimized.
It can also increase Google image indexing. So Google likes to put images that you have on your website, you could submit them and get them indexed in their database so that it can be rendered during different types of searches. Also, it increases visibility in Google image search, which kind of plays into the image indexing, so when people want to search for your photography using image search, then using the appropriate optimization methods we can enhance that.
Also increases the user experience on the actual page, which also has an indirect impact on the SEO. And then, of course, it can increase the user engagement. Facts have shown that images on a page can really enhance the overall quality and perceived quality, and how much is read, and how much is consumed on that page. So there’s quite a bit here of this and speaking directly to photographers, it’s your livelihood. It’s what you’re trying to sell. So getting these in front of more people is what you want and this can really have a huge impact on that.

Image Selection

Image should add to the value of the page
Is the image necessary?
Image should be congruent with the goal, purpose, and target
keyword(s) of the page
Why are you using this image?
Avoid duplicate or similar images
Google may not index similar images

So, again, we have these seven different areas we want to cover and start off with image selection. So when you’re trying to choose the image that you want to use on a page, you want to ask yourself, “Is the image necessary?” It should add to the value of the page. Google ranks pages and not websites. So you want your page to be optimized so every individual page is unique and is going to have a different purpose. And so the image that you use on those pages should add value to that purpose. It should reinforce that purpose. And images should be congruent with the goal, purpose, and target keywords of the page. So these images should be, if we’re talking about dogs, we want pictures of dogs. If we’re talking about a certain venue that a wedding was shot at and we want the images there to be congruent with that. What is the goal? If it’s an about page, let’s use photos of you and things that are about you and what you’re doing. Then the question is: Why are you using this image? Does it match with the purpose and the intent of the page? If it’s not, then why are we using it? Maybe we should remove it. Maybe it shouldn’t be used. So making sure that we’re intentional with the use of these pages is going to have a big impact in that.
Avoid duplicate or similar images. Now, I understand if you have a wedding and there are two or three photos of the bride and groom standing in front of this barn and there’s slightly different poses or different angles, then you may want to show you have some versatility or things like that. There are some reasons and there are some situations where you can do duplicates and that’s why I said avoid instead of didn’t do duplicates or similars. Definitely, duplicates would need to be avoided, but then having similar images if you can show more diversity and not have something that’s too similar, then try to avoid that.
Now, what happens is if images are too similar and let’s say if they’re so similar that you have to use the same file name and the same alt text, then Google may not index the two images or it may index one but not the other, or neither of them. So when you’re selecting your images, again, the key is just to be intentional and to ask yourself, “Is this image necessary?” and then, “Why is this image necessary and is it congruent with the goal and the purpose of the page?” So that’s it for image selection.

Image Placement

Add image near the text/copy where discussing like content
Make sure the image adds to the copy, the page, and the target
keyword(s)

What else is important is the placement on the page and where it’s used in conjunction with a copy and other elements and other images on the page. So we want to add images near the text or copy where discussing the content.
So, for example, we have here a picture of a dog and it’s getting a bath, and so we’re here talking about the paragraph before it, or it could even be the paragraph after it would be having a talk about dog baths. Blah, blah, blah, dog bath, there’s dog baths are fun, bathing dogs, so we’re talking about it and here’s an image of it. If this is a post about taking care of your dog, we wouldn’t want to have this text and then have a photo of clipping a dog’s toenails or of putting on a flea collar or whatever it is that you want to talk about. So you just want to use the appropriate text and the image around that text.
So make sure the images add to the copy of the page and the target keywords. So this goes back to the selection. Make sure that it’s actually adding to it. So again, if you have the dog bath and you don’t want a picture of a cat. So you want to make sure that it’s actually contributing to it and that it is something that’s, again, congruent with the copy part of the page. So the placement is important. Sometimes when we have blog posts where we have an entire wedding, maybe we’ll talk about the reception at one point and then maybe you add some reception images, and then we’ll talk about the ceremony and add ceremony images. Not necessarily absolutely required, but there is definitely some enhancement there when you can add that level of proximity to the appropriate images on the page. So placement’s going to be super important when it comes to placing images on and around the appropriate copy.

Image Pixel Size

Use your CMS (like WordPress, Squarespace, etc…) to determine the
exact pixel size of the image
Best to provide the exact size and not let the CMS resize it for you
Test pixel size using Google’s PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights

So the next thing that we want to talk about is the pixel size. Now, this is not to be confused with file size. This is the actual how many pixel widths and tall it’s going to be. So you can use a CMS like WordPress to determine the exact pixel size of an image. So whatever page you’re on or wherever this image is gonna be placed, you can find an indication of how large it should be. For example, on a page where you have an image, it doesn’t take the full width, but maybe it’s just right next to some text. The actual file size, or the pixel size, should be an exact fit it also could be square. So the size could also be incongruent with the ratio. So it could be a 500 by 500-pixel size. You wouldn’t want to put a 5000 by 5000. Your CMS would probably resize it but you would want to make sure that you figure out what the exact size is and resize it in a tool like Lightroom or Photoshop where what you’re uploading is the exact file size that is required by that location.
The next, provide the exact size and not let the CMS resize it for you. So WordPress and Squarespace, a lot of these you can just upload the big image and then you drag and drop it in there and then all of a sudden it fits, but then it has this huge file size. Some CMSs, content management systems, will actually make it smaller in terms of the file size and some won’t. So sometimes you’ll have these really big images that will really slow down your website.
Then, you could always test the pixel size using Google’s PageSpeed Insights. So by going to this website here and entering any domain, any URL for any page, could be a blog post page the homepage of your website, whatever, you’ll get a list of images that need to be optimized, and one of the optimizations that they suggest is resizing. You can actually dive deeper into that and there’ll be a video I’ll provide, later on, a link to it, that will provide details on how to use this information, find it, and then take action on it to actually get the appropriate size. So if this is going to be a super great tool here to using actual Google’s machine to be able to identify the appropriate size. If for some reason you can’t figure it out in your CMS, and then also if you upload an image and you think you got it right, you can actually test it to make sure that Google’s seeing it the appropriate way.

Image File Size

Make images a small as possible without degrading the quality
Goal less than100kb (can be bigger especially for photographers)
We recommend using tools like ImageOptim or websites like
JPEGMini, PunyPNG or Kraken.io. Or use the Google PageSpeed
method: https://youtu.be/CymONf_jodI
Use Lightroom to optimize image size
Great article from SLR Lounge on how to optimize image size

Make sure your CMS allows for smaller sizes to be delivered on
mobile
Srcset attribute
Test with Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights

So image file size is super important. It’s also going to help with the loading of the load speed, and it’s going to help also with some of the ratio issues because if you have a, let’s say a horizontal-oriented photo and it’s supposed to be vertical, it’ll cut it off, right? It’ll crop it a certain way or distort it in some way. So paying attention to the file size and ratio will make everything a lot smoother and for Google to be able to digest it and also your viewers will be able to see it in the correct way.
So the next one here is going to be file size. Now, the file size is super important when it comes to page speed and having a slow website because images are too big will be detrimental to the overall SEO of the entire site, of the entire page. So it can be a thing, just a single factor, that can really drag down the rankability of a certain page.
So the idea is to make images as small as possible without degrading the quality in terms of file size. We’re not talking about pixel size and the width and everything. So the goal is 100 kilobytes or less. Now, I understand that sometimes it’s a little bit difficult when you’re trying to get a larger … you want to really show off the quality of the images. You want to have a big image on the screen. So this is not a hard, fast rule. Again, that’s why I put it as a goal, but especially with smaller placed images that would be here. The upward limit on this would probably 250 kilobytes that I would say is gonna be the high end for that.
And then there are some tools here that we recommend. Some of these are paid, some of these are free. Just gotta be really careful, again, when using these tools you’ve got to go back and check the quality. Maybe compare it to the original and upload it and then refresh the screen. Upload your website and make it live. Look at it. Did the quality go down? Does it not? Then you can get it as small as possible to be able to do that. Once you figure out a system, you can kind of build it into your workflow as you’re publishing images onto your website.
Now, there’s another method here is to use Google PageSpeed method, and there’s a YouTube video here. This also, by the way, is going to have the test pixel size. In that video, I’m going to cover how to test pixel sizes, but then also you can use it to generate smaller or compressed versions of the images that you’ve uploaded. The other thing here is to use Lightroom to optimize image size. You can export things, export the images by a certain quality level, and then I’ve included this great article here from the SLR Lounge. It was a video and an article that kind of walks you through step-by-step on how to do this and then it kept talking about image quality. So the quality will impact the size.
So there is a fine line and a sweet spot where you can lower the quality of the image but then the actual visible quality, the way it shows up on a website, will not be compromised and it will look just fine. The default for every photographer, or most photographers is the highest quality possible, but in a lot of cases, it doesn’t need that highest quality setting for it to actually look good on a website. A lot of times you can’t even tell the difference between an eight-level and a 12-level in terms of quality but you can definitely notice the load speed. So this is an article, it was written and a video was prepared by Trevor Dayley, a great Phoenix photographer that walks through this, and it is pure gold when it comes to trying to figure out how to optimize your image sizes.
So the other thing here, and this kind of gets a little bit higher-level stuff, make sure your CMS allows for smaller sizes to be delivered on mobile, and there’s an SRC set attribute that allows it to … if it’s on a smaller device it’ll select a different image. It’ll be the same image but it’ll be a different version of it that has a smaller … that’s even smaller size in terms of pixels and size like that that allows it to actually load smaller.
Then we have the test with Google PageSpeed Insights. This is the same link we saw in the previous one, but here you can actually test it. When you’re testing this, the page speed, it will test not only the file size, but also the pixel size as we talked about previously so that when you have images loading on your website you can actually go there and test those into the appropriate ray so that you know it either needs to shrink, reduced in size to be able to add to the load speed of the site.

Image File Name

Use file name that Google would know what the image is about
without seeing the image
Use the target keyword (or appropriate iteration) for the page
If using the keyword is not appropriate, then question why are you
using that image
Do not stuff keywords
Duplication of file name is ok
But question why are you using two similar images
Use number to separate duplicates (xyz-1.jpg, xyz-2.jpg)
Keep file names concise
Use dashes (not underscores) to separate words
10 words or less

The next thing here is gonna be the image file name. Here, this one gets into some of the copy. When you export here it’s gonna be whatever file name is .jpg, or .png, or whatever the format you’re using. Now, use a file name that Google would know what the image is without seeing the image. So, for example, with the dog having a bath, we would want to say dog, a black lab, or black-lab-receiving-bath. So it’s dog receiving a bath or whatever it is.
It’s very similar to what we’re gonna be talking about with the alt text. We don’t want to go crazy with the length of it but we want to be concise and we want to be able to use the target keywords or appropriate iteration of the keywords for that page. So again, if it’s an article or a page about giving dogs a bath, we want to be able to use that and use it appropriately. We also want to avoid stuffing keywords. So we don’t want to say dog giving a bath … or dog bath, bathing dogs, dog receiving bath, person bathing a dog in a bathtub. We just want to keep it singular in terms of we don’t want to say the same thing multiple times. If it is what it is, say what it is, but you also, again, keeping it appropriate. The question again, if it’s not, if you can’t use your keywords in there, then why are you using that image? It goes back to that whole thing at the beginning where image selection if it’s not appropriate image then you shouldn’t use it. Keep this simple. Keep it where we are not over complicating it or super long.
Then, the duplication of the file name is okay. Again, if you have two images of the same bride and groom standing at the same barn, you can have the file name have a -1 or -2 kind of to separate them, but have the same exact file name as there. But then question yourself, why are you using two similar images. Why are they there? Is it going to contribute to the overall SEO of the site? And of course, keeping the file name concise will help it. We don’t want to write an entire paragraph in the file name. Then one other point, too, is to use dashes instead of underscores to separate the individual words of the file name. We do want to separate them so it doesn’t just jam all together, but a hyphen between each one will be appropriate. If you start getting to where you have more than 10 words, I would consider revamping or considering that maybe the file name you’re using is a little bit long. And that’s it for the file name.

Image Alt Text

Alt = Alternative
Used in case the image does not show up
Used for blind users with verbal browsers
Used by Pinterest to auto populate pin descriptions
Describe the image to Google
Describe what’s happening in the image / Sentence fragments are ok
Describe where the image was taken or is depicting (for local SEO)
Use your target keywords
Be clear, descriptive, concise and not stuffed with keywords
Ok to duplicate if images are similar
100 characters or less

The next thing that we’re going to look at is the image alt text. So alt is short for alternative, so it is meant to be an alternative to the actual image. Now, I know an image is worth 1000 words, so how can you break it down into only a few words versus the full breadth of the image? So what this is used for is in case the image doesn’t show up. So there’s got to be an image placeholder on a page and for some reason the browser cannot render the image, then this would be used to be able to show up in it’s place so that people can see the written part so they kind of get a feel and an understanding of was what this is about, this is the image that was supposed to be here. It goes back to the overall intent, the congruency with the intent of the page, and with the page title, and [inaudible 00:18:54], all that stuff that needs to be, and the copy, all need to be similar. And so, when you have some copy about bathing dogs and then the alt text would be dog receiving a hand bath in a shower or whatever. So you have that description that reinforces the image, and again it’s another way for Google to know what that image is without actually seeing it.
It’s also used for blind users with verbal browsers, browsers that read the content on a page. So a lot of times when you’re considering what to put as an alt text, considering that you are speaking to a blind person and describing it to someone that’s visually impaired would be a good way to kind of … a litmus test of what’s appropriate.
Also, it’s used by Pinterest to auto populate the pin descriptions. Not in all cases, but in most cases, it’s going to be that. So it’s also to give you an idea of how it’s used when you look at Pinterest and descriptions there are some parallels there with that.
Now, the other part here is we’re gonna describe the image to Google. So, when we’re writing and crafting an alt text, we want to describe what’s happening in the image. So if it’s a dog receiving a bath, it’s a dog receiving a bath. Sentence fragments are okay. We don’t need to have a subject and a predicate and everything in between, but we need to actually describe it, and it can be in the form of a sentence fragment.
Describe where the image was taken or where the image is depicting. So this is mainly for a local SEO, so if you are a Baltimore pet photographer, you’d want to say, “Baltimore black lab receiving a hand bath,” so you can have that location. Especially if you’re shooting weddings, the location could be the actual venue, or if it’s a family shoot it could be the park it’s in, or the town, or the area. As long as the image itself is being used in conjunction with a copy and what the post is about, what that page is about, having that kind of reinforce the overall intent of the page is there. So especially with local SEO and photographers primarily are in a local SEO type of play, we want to be able to use the description where the image is or was taken and then actually what’s happening in the image.
That goes back to using your target keywords. We don’t want to stuff them in there, but we want to use the appropriate keywords or iterations of the keywords to do that. Again, you don’t want to use the same keyword over, and over, and over in every image, but we want to be able to use versions of it or iterations of it that are similar. They’re going to be as concise as possible and be actual description of what the actual image is and then also aligned with the point and the purpose of the image. Be clear, descriptive, concise, and again, do not stuff with keywords.
So it’s okay to duplicate if the images are similar, very similar to the file name, but again, why are you using it if it’s so similar? Definitely, there are always exceptions to the rules. And with alt text, we shoot for 100 characters or less when using this. And again, you can go over if you need to, but there needs to be a good reason to be able to have to go for it. If you’re consistently going over 100 characters, might need to revisit your method and why you’re performing the alt text.

Other Considerations

Captions
Use when appropriate
Featured Images
Open Graph (Facebook) and Twitter Tags
OG debugger https://developers.facebook.com/tools/debug
Twitter debugger https://dev.twitter.com/cards/overview
Schema
Allows you to give more info about your image
Documentation http://schema.org/image

Some other considerations are gonna be captions, featured images, open graph, and schema. In a lot of content management software programs, they have the ability to add captions and there are a few rules here with that. Number one, you have to be aware of that when you turn on a caption, it’s gonna be visible on the page, so you have to control the fonts, and the placement and all that. So you just have to make sure that from a design perspective that you’re okay with the captions being visible and being a part of it. So sometimes it’s gonna be appropriate, it’s gonna be easy. So when you’re creating captions, you just want to make sure that you’re accurately describing the photo as is because it’s gonna be visible and it’s going to be able to be consumed not only by people looking at the site but then also by Google. There is a little bit of a benefit of using caption, but the benefit doesn’t always outweigh the design aesthetic or the visual, so I wouldn’t say the we have to cut out, put a caption, and live with it, whereas if you had the appropriate text wrapped around it and it’s in the right place and kind of in line with the copy and everything, captions aren’t always required and aren’t always gonna help. So not a whole lot of information here but just kind of keep in mind that it’s gonna be something visual.
Now, if you’re using a content management system or design or theme that you enter in the caption and it’s not visible, but when you look at the code it is visible or it’s in the code but it’s being hidden, that might be something that Google would look down upon because you’re trying to … it’s kind of a gray or black hat technique, you’re trying to hide stuff in there. So you just want to be straightforward with it. Either use it or don’t, but just be aware that if you are using it, it’s going to be visual.
Next thing’s going to be featured image. This is primarily for blog posts, but then also different pages have a lead image and this kind of blends into open graph and then Twitter tags. Also, you get into Pinterest or any kind of a shared platform or share plugin that you’re using. You just gotta be aware of how that featured image that you designate for that page is being used and could potentially be used, and you just want to be intentional with that and then using the correct file name, and then using the right alt text along with it, and make sure it’s sized and shaped appropriately for the different places it’s gonna be used.
Now the next thing here is gonna be open graph, which is gonna be Facebook’s language and where they are taking the images from your website and when someone shares that page, you can control what the text and what the image looks like that’s being shown and it’ll snip it or the preview when shared on Facebook or Instagram, and then, of course, Twitter has their own. So you can use this tool here to look at how a page if it’s shared, what will happen to it when it is shared on Facebook. Because sometimes Facebook has square images when it’s shared like in a comment or mentioned and then sometimes it’s different. Now, the other thing too you can consider is Facebook is notorious for changing the way that previews and snippets are reviewed or previewed and how they look. So you just gotta constantly go back over and check this occasionally, maybe once every quarter kind of look into it and make sure there are no big, drastic changes on that. So this is an opportunity here to go to this link and you can enter any URL and see what it is, and then you can start to control how it is gonna be rendered on those platforms.
The next thing is gonna be schema. Schema is essentially a markup language that allows you to give Google more information about the image so you can include a lot of different data about even the geolocation, all the shutter speeds. There’s a lot of information that you can add into the code and give Google more information about it. You just gotta think about what’s appropriate mainly for like a local SEO, like the location and you can give it.
And to kind of recap, schema is essentially where … Google is a machine, right? It is a computer, a robot that looks through your website and when you can provide Google with information in a very specific format — because that’s how computers like to have things, format them a certain way — it’s easier for them to digest it, easier for them to use the data. And when the data that you give them in the schema is in line with the alt text, the file name, the placement, and the copy around it, and then all the other elements on the page, it’s good. I mean, you don’t have to use schema, however, it’s an extra level of congruency that you can add to validate and a little bit of trustworthiness that you can pass along to Google by taking the extra step to provide this. There’s some documentation there and there are plugins for different platforms that allow for it. You can also generate the schema manually and insert it in certain spots. I don’t want to go too deep into the nuances of schema and maybe that’s for another video, but this is gonna be an opportunity to be able to enhance the image search engine optimization.

Image Optimization Resources

Google Image Optimization Checklist
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#image_optimization_checklist
Google Image Optimization Guide
https://developers.google.com/speed/docs/insights/OptimizeImages
Google’s Image publishing guidelines – https://support.google.com/webmasters/answer/114016
VIDEO How to use Google PageSpeed Insights to optimize Images

And finally, here, I’ve just got some resources. I’ve got Google Image Optimization checklist. There’s a link for it. There’s an optimization guide, and again, it gets more into speed and things like that. This is more the developer side of things. And then here is a video, it was shared earlier, about how to use Google PageSpeed Insights to optimize images, and so there are some additional resources there. And as this video is distributed, I’ll probably add to this list if you track it back to turnerwebservices.com, you’ll be able to find a post that this video will live in and I’ll add to these resources as they become available.
All right, so thank you for taking the time to look through this and to learn about search engine optimization for images. If you have any questions, you can always email me at support@turnerwebservices.com or you can go to turnerwebservices.com and fill out the contact form or dig around for any other information. You can head over to the YouTube channel and subscribe. Putting out videos like this every week, and so if there’s anything you want to see or learn about if it’s not already there, then we’ll gladly make a video for you. Thanks again for checking it out and good luck with your image SEO.