SEO Image Optimisation Tricks – Going Beyond the Alt Attribute – A Complete Guide to Image SEO

It’s hard enough to end up in search results AND have people click through to your website.

You don’t want to make them bounce by serving a thick wall of endless text. We don’t even need a case study or survey to tell us that text walls don’t work (but if you really need a proof, here’s one).

The best and probably the easiest way to make your website more appealing to visitors is to use images that talk to the visitor.

Image SEO is a short, sweet and extremely rewarding thing to learn. You probably know a thing or two about the alt text (aka alt attribute and alt tag), but in this image SEO guide, we’ll be going a little beyond the basics. So, stick around with me till the end – this stuff matters!

Before We Start with Image SEO – Here’s Why You Need GREAT Images

This bit is for you if you are happy with using images straight off Google.

Here’s a simple advice – don’t.

Every page on your website doesn’t just need images – it needs great images. There’s no image SEO if there aren’t any images worth indexing.

Images drive traffic. If you’ve got custom designed, valuable, amazing imagery on your website, you’re doing yourself and your visitors a huge favour.

Think about this. If you’ve got a great infographic, a neat data analysis screengrab or a beautiful illustration, people are going to want to share it. Low bounce rates, more engagement, stronger social signals and, most importantly, natural, editorial backlinks – one image can drive all these ranking factors into overdrive (when done right).

So, yeah. You do need original, easy-on-the-eye, useful images.

 

Visual Engagement – How Images Keep Your Visitors from Bouncing

Before we reach out for numbers, let’s introspect just a little.

When was the last time you read a book?

How long can you keep yourself focussed on text that’s in front of you?

How often do you find yourself switching between apps on your phone without a reason?

You’re not alone. With a thousand distractions lying around, we just don’t have time anymore to read through an awesome article, a great stat study or an insightful survey. The attention span of an average human, in short, is now pretty unreliable from a marketer’s point of view.

 

Do this real quick. Run a random Google search for your primary keyword. Quickly scan the top 10 results. Now think about why every single one of them contains one or more images.

 

The whole point is – if you want to make an impact within those few, precious moments your visitors will give you, you need visual content.

• Unless you’re the new-age Shakespeare or Twain, nobody is going to remember what you write. An average person loses 90% of information within 3 days of reading. If you attach an image to the article, they lose only 35%.
• We’ve reached a stage where creating visual content is the top priority for marketers. Even more important than blogging.
• Forget all that. Here’s the only stat you need to take home – posts with images have 650% higher engagement than posts without images.

You already know that SEO is a beast of a process – there are only starts, no The Ends. Image SEO is no different. If you’ve got thousands of images on your site (it’s pretty normal for e-commerce and portfolio websites), you might struggle bringing every one of them up to the best image optimisation code. In that case, we’ve got your covered with our end-to-end on-page SEO services. If you’d like to know more, do feel free to get in touch here.

 

Starting with Image Optimisation – Understand How HTML Interprets Images

It’s not rocket science, for sure. Even if you don’t know the basics of HTML, you only need a couple of minutes to understand this.

Here’s how the backend code of your website handles images: <img src=“image-name.jpg” alt=“alt-text” title=“image-title”>

This little snippet tells your webpage to find, render and display the linked image from your servers to the front end. Three main things to notice here:

1. The first attribute src is the source attribute (src). It tells us where the image is located.

2. The last attribute title is the ‘name’ of the image. We’ll talk about this in a minute.

3. Our focus here will be on the most-important attribute – the  alt attribute . It’s commonly referred to as an alt tag or alt text of the image. It tells us what the image is about – kinda like a short, quick description of the image. You can’t close the <img > tag until you’ve specified an alt attribute. If you don’t want to have any alt text (i.e. alt attribute), you can simply assign a blank alt tag like this: alt=“”

You can leave the alt text empty like this but you can’t really have no alt attribute.

Let’s now focus on alt attributes. We’ll get to other attributes after that.

 

Alt Tag/Alt Attribute/Alt Text – What Does It Really Do and How to Optimise It the Right Way?

Alt attributes are  alternative text descriptors Â for an image. The simplest way to understand these is this – it’s a quick, short, accurate description of the image as a reference to whoever that might need it.

Courtesy: http://www.eliwilner.com
Most programming concepts are imitations of their real-world equivalents. So, rendering images via a code is just like displaying a painting in a museum. The painting may be great, but it’s the nameplate below it that gives it context. In terms of image SEO, things are pretty much the same – the whole point is to have a great image AND add context to it so that it can be found easily.

 

How to Write SEO-Friendly Alt Text?

There are absolutely no rigid guidelines when it comes to writing alt attributes – especially for SEO.

Why Is Alt Text Needed?

I already mentioned that the alt text is an absolute HTML requirement. You can leave it empty – but you can’t remove it altogether.

But what’s the point of having an alt attribute in the first place?

There are two main scenarios in which the alt text plays an important role:

 

Image Search (This Is the Main Reason for Image SEO, Anyway!)

You want to maintain as many ‘touch points’ (points of interaction, as Google likes to call them) with your visitors as possible.

This is exactly why business websites have blogs, interactive pages, video content and social media presence.

Image make for an important – but often overlooked – touch point. It’s much, much easier to engage a user visually than through text. This is also the reason why people love visually powerful social media (Instagram, Pinterest for example).

Coming back to the point, I’ll say this straight up – chances are that you’ve been taking image SEO pretty casually. Don’t.

 

Unless you are an image-heavy website, chances are you won’t be investing a lot of time in optimising images for search results. That’s all good, if you want to focus on purely intent-driven traffic.

If you are having a hard time making sense of traffic though, you should check out our affordable advanced analytics reporting process. It’s pretty neat – and you don’t have to lift a finger to get every metric under your close watch. To know more or to request a proposal, get in touch here.

 

Working With Screen Readers

Thousands of people around the world use screen readers due to various reasons – from visual impairments of varying degrees to multitasking habits.

There’s a fair chance that a tiny part of your traffic uses screen readers to access your content. As we already know, user experience and accessibility are climbing up the SEO ranking factors ladder – and hence, it makes sense to implement features that actually help your readers.

Alt text/alt attributes are important UX and accessibility features (in addition to being huge from the bonus traffic point of view). They help screen readers ‘read out’ your images to the visitor, making sure that they are able to access every bit of information you’re putting out there.

 

 

How Long Should Alt Text Be? (Alt Text Character Limit)

Alt attributes are just your regular, run-of-the-mill HTML attributes. There’s nothing special about them.

So, there really is no absolute alt text character limit. But here’s what you should know:

 

1. Most screen readers limit alt text to  125 characters . So, a good idea is to limit your alt tags within this limit.
2. Alt attributes should be  minimalistic yet expressive . “An Apple on a Teakwood Table” works just fine. No need to go for “A fresh apple sitting on a brown-tinged antique teakwood table”.

 

Alt Text SEO – Enriching Alt Tags with Keywords

Do people do this?

All the time!

You can and should enrich your alt texts with keywords ONLY where it makes sense.

The things to be wary of while using keywords in alt tags are two:

1. Overoptimisation. It’s extremely easy to go overboard and overoptimise. A general thumb rule we use is this: keywords in alt attributes should not make the entire on-page optimisation unstable. A good idea would to use branded keywords in alt texts, again, as long as it makes for natural, fluent reading. For the example above, this could be something like, “An Apple on an Ikea Teakwood Table”.

2. Underoptimisation. If there’s still some room to add more primary keywords on-page, try working them within your alt texts. For the previous example, if my primary keyword is “Teakwood Table London”, the alt tag can be altered slightly to: “An Apple on a Teakwood Table London 2019”. It not only adds a (slightly convoluted) keyword to the page, it also tells the visitor more about where and when the photo was taken!

 

When Should You Keep the Alt Attribute Blank/Empty?

There are times when it’s not necessary at all to provide more context to the image.

Here are some examples: generic vectors in header/footer section, inconsequential images, images that aren’t directly related to what the visitor is trying to access (the information).

All these images can do without a specific alt tag. In such cases, the image HTML should something like this:

<img src=“image-name.jpg” alt=“” title=“image-title”>

 

How to Add Alt Text for Images on Your Website? (Image Alt Text Process)

If you’re using an easy-to-manipulate CMS like WordPress or a e-commerce platform like Shopify, adding alt text for images should be a breeze.

 

Add Image Alt Text – WordPress

Whenever you add a new image to WordPress, it should prompt you to add alt text and title to the image as shown below. Just fill your alt attributes in and you’re good to go.

For old images, go to  Dashboard > Media  and select the image you want to add alt text to and follow the same procedure.

 

Add Image Alt Text – Shopify

Again, it’s pretty straightforward. Shopify shows you an  â€˜Edit Alt Text’  button when you hover over each image on your store website.

 

Image Title Tags and SEO (Image Title Attribute)

From the SEO point of view, image title tags are not that important.

In fact, they aren’t even a must-have for the code to work. You can discard the title attribute from an image code and it would still show just fine.

Here’s all you need to know about title attributes from the image SEO point of view:

 

1. Title tags aren’t required per se. You can have them on if it suits you and adds more context to the image.
2. There’s no real role played by title tags in image SEO. The images you see on Google Image Search are all thanks to various alt texts – not title attributes.
3. In some rare cases, you can choose to display the title tag as a ‘tooltip’. So, when a visitor using a mouse hovers on the image, they will see extra information. Personally, I don’t care much about title attributes.
4. If you’re using iframe to insert an image (an infographic from your Dropbox account, for example), you should always add an appropriate title to go with the code. Here’s more on that.

 

On-page SEO can look like a giant puzzle if you don’t know where to start and how to proceed. Keeping in mind the needs of small and medium sized businesses around the world, we have developed unique, comprehensive on-page SEO services that focus on results and not on keeping you spending more. To learn more about how we’ve helped our clients take their business to the next level, here are some interesting case studies. As always, you can write to us directly to request a proposal.

 

Are Image Captions Necessary for the Best Image SEO Performance?

Without making image SEO too complicated, here are my two cents for captions:

 

1. Are they useful? Yes, they are. If a few words can add more context to an image, it’s always a great thing. We usually keep the use of captions limited to instances where we have to cite the data source or add more context to the image.
2. Do image captions affect SEO? Nope. Don’t even worry about that.

 

Image Compression and SEO – An Indirect Connection

 

Pretty much every part of image optimisation is related to SEO in an indirect way.

Image sizes are no exception.

You want to have the best, crisp, crystal-clear and hi-def images on your website – and I understand that. But also know that a 3600×2400 image may look amazing, but it won’t always help your cause. It’ll eventually end up slowing the page down. A couple of such images on one page is a guaranteed recipe for poor performance, especially on slow connections and mobile devices.

And we’ve already discussed how poor page speeds can hurt technical SEO.

There are ways to do this (Google discusses this in an EXTREMELY meticulous way here).

It all depends on what you’re trying to achieve through the images on your website. If the images are the point of your website (portfolio websites, e-commerce products, real estate galleries and so on), you should think twice before compressing images to the point of breakdown. If not, go ahead and compress them preferably without losing quality.

 

With ultra-HD retina screens around, it’s important to remember that the quality of the image and the page speed BOTH impact the UX. It’s important to hit that sweet spot where you offer a finely rendered image without making the visitor wait.  

 

Here are some of the (mostly) free image compression tools that can help you speed up this process:

1. JPEGMini
2. TinyJPG/TinyPNG
3. Kraken
4. Google’s PageSpeed Module that you can configure directly onto your server
5. Compressor.io

All of these come with their own pros and cons. JPEGMini seems to give out consistently great results for many websites, though.

If you’re a Photoshop expert, you won’t need any of these. Just use Photoshop to achieve lossless compression and that’s that.

 

Image Compression on WordPress Using Plugins

If your website isn’t really image heavy and your pages are loading fast enough, there’s not a lot you should be worried about. It’s OKAY to have a couple of slow loading pages, given that they are running some important scripts or host heavy infographics or CSS (landing pages are almost always like this).

In that case – and if you’re using WordPress – a simple plugin can take the weight off your pages, helping your pages load that much faster.

The most popular image compression plugin on WordPress, by far, is Smush. We use it on many websites, and we haven’t really had to worry about image bloating since.

 

Submit the XML Image Sitemap to Google (Correctly)

Sitemaps are immensely important. When you submit a sitemap to Google, you make sure that Googlebot won’t have much trouble navigating through your website codes and contents.

If you’re using WordPress, a plugin like Yoast will do this in a minute for you.

By submitting a standalone XML image sitemap, you help Google find and index images that may not otherwise be ‘visible’ to it. For example, images wrapped inside JavaScript are usually left out from being indexed – a problem you can solve by submitting XML image sitemaps to Google.

Submitting sitemaps is just a minor aspect of technical SEO. When your technical SEO is in bad shape, the two most important aspects of SEO are damaged – crawlability + indexation (no indexation = no SEO) and UX (bad UX = bad business). At HQ SEO, our technical SEO audit process is designed to help our clients resolve and pre-empt every technical SEO issue so that they can retain that competitive edge.

If you don’t know how important technical SEO really is, just know that without technical SEO, your on-page SEO efforts are all meaningless. To know more or to request a proposal, get in touch with us here.

 

Which Image Format Works Best for Image SEO?

All image formats are designed to serve specific purposes. Choose the format that best fits these AND your requirements.

The Last Bit – Use Structured Data for Image Wherever Possible

If you’ve got images in categories that are supported by structured data markup, you should make an effort to add image structured data to your website.

Structured data for images works EXTREMELY WELL for e-commerce websites as it can pull the featured images/thumbnails of products and show them directly to searchers.

Here’s more about how you can add structured data markup to your website.

 

Conclusion – Image Optimisation Is Usually a Quick Process. Don’t Ignore It.

Properly optimised images help bring in extra traffic and make the stay on your website more pleasant for your visitors.

Unless you’ve got thousands of images on your website that need optimising, you should be able to take most of these steps on your own. If you need a more ‘industrial’ scale solution for image SEO (or any other SEO, for that matter), HQ SEO’s SEO and digital marketing services have got you covered. To request a free, customised proposal from us, just fill in the form below.