One of the hidden secrets of SEO is image optimization.
Have you ever really focused much on your images and thought they can help (or ruin) your SEO?
According to Raven Tools, 78% of SEO issues are related to images.
So perhaps it is time you started taking image seo optimization more seriously?
Images are a critical factor and their are many aspects of your image to consider to make sure it is SEO optimized.
In this post I will walk you through all the different areas of SEO for images and show you not only how to optimize your images but also how to benefit your SEO.
You can use the quick navigation below if you want to jump to a specific section, OR you just just read the whole post and learn all there is to know about SEO for you images.
There are some very simple changes you can make to your images to increase the chances of them helping your SEO.
Let's take a look at them one by one.
The file name of your photo is directly read by Google and other search engines in order to show them in image search results.
File names are very easy to change, however it is something we often overlook.
And in fact, image file names do affect SEO. Google even state this in their image publishing guidelines:
The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image.
So that means, instead of uploading your images to your site with random, non-sensical file names, try changing the file name to be something more keyword focused.
Google actually suggests to use very focused, detailed file names such as:
Here is the SEO Image naming convention I would recommend:
Important Note: Just to reiterate - In your file names use dashes not underscores. Matt Cutts, head of Google spam team even recommends it.
Google also places a high importance on the alt tags and title tags of your images.
These pieces of content help Google understand what your images and surrounding content are about, helping you rank in image search as a result.
Suggestions for adding info to images:
Google suggests that you just make the alt tag as descriptive as possible. If the image is for the header of a blog post, I always use the blog post title. For other blog images, I at least minimally describe the image.
Your title tag short be short, catchy and concise.
Get creative to make your tags and file name all different but detailed enough for Google to understand what your image is about.
Changing your alt and title tags in WordPress is very simple, as you can see in the example below:
Above is how it looks when you first add an image (the file name is copied into the title area). Now all you need to do is:
To edit your tags after uploading an image, simply click the image in your media and click edit.
Remember: The Alt tag is not only used for SEO, but is also shown when an image can't be displayed or used for the visually impaired (it will be spoken to them).
Manually Adding Image HTML:
If you have to add these elements manually to your HTML (ie. not using WordPress) then this is how it should look:
<img src='your-file-name.jpg" alt="your alt information" title="title information" />
Let's not forget about the captions in our images, because these can also have an impact on our visitors, which as we know in modern SEO, also affects our search rankings.
Why are captions so important?
People have a tendency to scan out content, rather than read it. And when they see images, they instinctively look at the caption. In fact, this might shock you:
Captions get read more than body copy — four times more
So, if you have an image that is not just there for decoration, add a meaningful or even attention-grabbing caption. It will get our readers to pay attention. And maybe even read more of your post.
That will help your SEO because Google are watching how long people are staying on your site.
There are a few useful tools out there you might want to try that can help you quickly analyse your web pages and see if there are any image seo problems.
They look at things like:
Although most only focus on Alt Text.
Here is a list of some that I tried that are still relevant, and helpful:
If the load time on your site is slower than average, Google will be much less likely to show your site at the top of search results. And visitors are likely to hit the back button if it loads slower than 2-3 seconds.
And perhaps not surprisingly, images are often the number one culprit of slow loading times.
If your site's speed could use some improvement try reducing your file sizes.
You can do this by resizing and compressing the image with an online tool like Pixlr.
You want to make sure the overall size of you image is not much larger than you actually need it to be (ie. the width of your web page or blog post).
For example, there is not much reason you need an image to be over 1,200 pixels in width on most websites. Whereas a standard image from your camera might be over 4000 pixels wide. A huge waste of space and load times!
It is also important to use the correct file type for your images in order to keep the highest quality with the smallest size possible.
JPEGS are one of the most popular file types on the internet, mainly because they work well with very complex images such as those taken with a camera.
JPEGs actually lose their quality when they are compressed (lossy compression) but nonetheless can be compressed to quite a small size before humans can detect the loss of quality. As such, they are one of the best formats for most web graphics.
JPEGs do not however work very well with letters or lines, so are not very well suited to things like graphics or logos. They also do not support transparency. This is where some of the next formats are more useful.
GIF files are a much lower quality image than a JPEG image and are best for small decorative images and icons.
In most cases, you will not even consider using a GIF as there is no real reason. But they can have transparent backgrounds, which JPEGs cannot.
GIF's are best known for being able to support animation effects. This is in fact when they come in most handy.
PNG files allow for many more colors in the file than JPEG and GIF files and they do not lose quality when compressed (lossless compression) as JPEG files tend to do.
The downside, however, is that they tend to be large from the outset. A PNG file at the same quality as a JPEG is often three times as large.
However, PNGs are great for things like logos and graphics and with the right compression can produce a very small image size.
PNGs also have a specific Alpha channel, which adds transparency to the image, something that is very important for certain image types like logos, where you need to place them on non-white backgrounds.
Pro Tips For Image Types:
Use JPEGs for most complex visuals on your websites.
Use PNGs for graphics and screenshots.
Use GIFs for animations.
Be careful to resize all to the size you actually need, and compress them to the point where you just start to see a loss in image quality.
There are more advanced options for improving your SEO such as image site maps, schema markups and open graph code.
An image sitemap can help Google find additional information about images on your site, that it may not find otherwise through typical crawling.
In order to provide Google with this information, the site owner or blogger must add additional information about the images on the site map.
These details may include the subject matter, caption, title and geo geographic location.
Google explains more about site maps here and how the different information and code can help increase the likelihood of your site being found in search, here.
When creating an image site map you have two options.
You can either add additional information to your current sitemap to include your important image details or you can create an entirely separate image sitemap.
You can take some time to learn the coding involved to create a site map yourself or you can use one of these third party tools suggested by Google that can do the work for you.
Example Image Sitemap:
To give you an example of what an image sitemap looks like (even if a tool creates it for you):
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html</loc> <image:image> <image:loc>http://example.com/image.jpg</image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg</image:loc> </image:image> </url> </urlset>
Although schema markups are not new in the SEO world, somehow they are not widely used. However, they can really help you get a boost in SEO by showing the search engines "what exactly" is on your web pages.
A schema markup is created with a unique vocabulary of code to tell the search engine not only the details about what is on your page but what those they mean.
Image form a part of the schema options, and can be used for images along, or within other schema types (eg. a recipe image or product image). Which one exactly you need, is up to your content type.
There is a schema language for all different types of content such as:
Apply each one to the relevant content type and you may see a boost in SEO.
You don't need to learn a whole new language of code to successfully use a schema markup on your website. They are simply specific HTML that you need to use.
In fact, Schema.org has all of the coding for the different types of content you will need.
And you can use the Google's Structured Data Markup Helper to create a schema markup as well with no coding.
By simply selecting the type of data you have on your site and giving Google the URL you can be walked through the process of creating a schema markup with no coding needed.
As you can see in the image, after I selected that I wanted to markup an article and put in the URL for one of Mad Lemming's last posts, I can highlight areas of the article and select the matching section, such as title, author or image.
After you complete this, you can download the HTML code and add it to your CMS or source code.
Open Graph meta tags were created by Facebook in 2010 to make it possible to control how third party websites look when shared on Facebook and other social sites.
Open Graph works especially well for controlling the way your content shares on Facebook and Twitter.
Although this information may not affect your overall on page SEO, it will cause your social shares to preform much better.
Facebook Open Graph Tags:
Twitter Open Graph Tags:
Once your create your Open Graph coding, you will want to put it in the <head> section of your HTML.
Alternatively: Yoast WordPress SEO plugin enables you to automagically add the open graph tags to your pages and posts. Just head to the Social Tab within the plugin and configure your social media accounts etc.
Images - The Forgotten SEO
So as you can see there are a lot of different aspects to Image SEO you need to consider to get it all right.
Although you don't have to do it all, applying many of these changes will help get your images found in search and get you more traffic as a result.
So why not give some of them a go?
Let us know how you go with it and any results that you get!
Taylor is a full time web designer and online marketer, part time blogger and overtime dog mom. She has a passion for helping bloggers, creatives and entrepreneurs turn their online presence from 'meh' to 'WOW'! Find her on her website.