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!
Table of Contents
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.
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.
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.
Boost ROI Through Scalable On-Page SEO
Assess & Enhance Over A Dozen Important On-Page Ranking Factors
Find & Rank for Keywords That Matter to Your Business - No Matter How Competitive They Are
Thorough UI & UX Review from An On-Page SEO Point of View.
Advanced On-Page Optimisation Based On Comprehensive Split Tests
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:
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 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.
There are absolutely no rigid guidelines when it comes to writing alt attributes â€“ especially for SEO.
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:
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.
Starting last year (July, 2018), Google has been trying to club all Google Image click-through in a new â€˜Sourceâ€™ field. As you can see in the screenshot above, you can now track traffic directed from Google Images directly in your Analytics Dashboard, without having to set up roundabout, messy filters and segments.
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.
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.
Images without alt text are reported by screen reader users as one of their top accessibility problems.
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:
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!
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â€>
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.
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.
Again, itâ€™s pretty straightforward. Shopify shows you an â€˜Edit Alt Textâ€™ button when you hover over each image on your store website.
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:
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.
Without making image SEO too complicated, here are my two cents for captions:
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.
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:
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.
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.
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.
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.
All image formats are designed to serve specific purposes. Choose the format that best fits these AND your requirements.
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.
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.