Improve Your Website UX with Image SEO Optimisations
5 Min Read
When we look at the big upcoming trend that in-house and SEO consultancy teams should look out for this year, it is clear that 2023 will be a big year for Voice search, augmented reality, and artificial intelligence. But whichever area you focus on, it will be a while before we fully immerse ourselves in the future of SEO.In the meantime, we must continue working with our local, international and eCommerce SEO in its current form, including images. But unfortunately, photos are often neglected, even though most modern stylised websites rely heavily on them.Fixing image-related SEO issues can easily give your website the competitive SEO advantage you need in the new year. Of course, every area of SEO is essential. But let's be honest: users don't notice your keywords and backlinks; those are for Google.Users only care about what they can experience directly through your content, and visual information plays a big part. Any time you need to learn, find, or buy something, images are there to assist you. Images can ensure you've found exactly what you need; you wouldn't buy a house without seeing it first.Being linked with search intent and UX (user experience) images significantly impacts your rankings more than you realise. So, let's learn about turning your pictures into click-attracting beacons for your users.
Use Unique Images & Images With Context To Get More Clicks.
Imagine you are the user. You look something up on Google, click the Images tab, and see pictures. They all look the same-ish or outright identical.Which one do you click on?If there's little to no difference between them, you choose randomly. One of the websites gets lucky and attracts a user, even though they are all the same; the rest do not. From the owner's perspective, this situation is less than ideal.But how do I make my images stand out? The solution is to create and use unique images which don't exist anywhere else on the internet and leverage intent. But can a picture you didn't make yourself truly satisfy your target audience's search intent?The short answer is no; the best image is one whose contents are closely related to the user's search query, therefore not relying on the luck of the click.
Find & Fix Broken Images
What's the worst that can happen to an image? "Image Failed to Display."The broken image icon would be a fly in the ointment of the best user experience, even if there were nothing significant to show.The damage is even more significant if you need users to see the image. A product page without a product photo is a disaster for any online store.How To Easily Identify Broken Images On Your WebsiteDon't let it happen to you. Find all broken pictures on your site with WebCEO's Technical Audit tool and make them display correctly.
Optimise Your Images To Speed Up Your Website's Page Speed
Google likes fast-loading sites, as shown in the introduction of Core Web Vitals, and one of the biggest concerns around images is how they affect your loading time. So, naturally, you want to keep image sizes on your site to a minimum.How do I reduce image size and speed up my site?
Save your visuals in the most optimal format. JPEG is usually the best for large photos, with SVG reserved for logos and icons. Be careful with WEBP: it offers high quality with a small file size (an excellent alternative to the cumbersome GIF), but specific browsers don't support it, which could cause issues for the user.
Manually set optimal height and width. Images should never be too small or too large for their container.
Use compression software and plugins. Lossless compression is more quality-friendly, but losses are acceptable if the resulting image looks good enough.
Merge images. But only when two or more embodiments are placed next to each other. This will lead to fewer page elements which will mean fewer requests to the server, resulting in lower loading times and a better UX.
Use lazy loading. This will prevent page elements from loading until the user scrolls down to their location on the page, allowing what's currently on the screen to load faster. Google Chrome supports the loading=" lazy" attribute, which you put inside the <img> tag on the code.
The quality of your visuals should always be the priority. But, unfortunately, low-resolution pictures don't get clicks in image searches, nor do they entice visitors. So instead, run a scan on your image-heavy pages with a tool like Screaming Frog to see how well you are doing.
NOTE: Pay special attention to the Cumulative Layout Shift metric in your Core Web Vitals, as images affect another Google ranking factor.
Make Your Images Responsive
As a website owner who cares about user experience, you want your images visible on all devices. But the screens come in all sizes, with Laptops, Tablets and phones being the most apparent options without going into the various screen sizes available.So, how do you make the same picture display perfectly everywhere? The trick is to make your picture responsive. That is, make it automatically scale to fit any screen. But how do I do it? WordPress automatically makes images responsive within its gallery, but if you need to do it manually, here are a few options:
Set the CSS width property to 100% and height to auto. This way, the image will scale both up and down.
Set the max-width property to 100%. In this case, the image will never scale up to be larger than its original size.
Use the <img srcset> attribute. It displays a different version of the image for different screen sizes.
Optimise Image Names, Alt Text & More With Keywords
Keywords are at the heart of all SEO activity, and image optimisation is no different. There's a list of ways keywords can make your images more SEO-friendly, just like they do with content. You need to know where to use them.So, how do I make my Images more SEO friendly?Try adding focused keywords to these five locations to improve your image SEO game:
Filename. Avoid names like file1, 2, etc., as this will give Google no clues about this image.
File path. The domain and subdirectories' names can provide additional context that search engines can interpret. For example, if you have an ecommerce site selling clothing, you could structure a picture's URL like this: https://clothing.com/images/clothing/mens-clothing/fmens-shirts/mens-white-longsleeve -shirt.png.
Surrounding text. A little relevant text near your image (even a caption) will boost its score, but be wary of keyword stuffing, as this will negatively impact you.
Anchor text If you have a link which leads directly to an image, a descriptive anchor text will help search engines understand what's there.
ALT text. One of the most common SEO mistakes is forgetting to put anything in your images' ALTs, let alone a description with a keyword or two. You might think it's not a big deal, but blank ALTs are a problem for those with accessibility needs. And Google takes accessibility seriously.
NOTE: To find those opportunities to improve, run a scan using a tool like Semrush to see if any images are still missing Alt text.
Geotag Your Images For Local SEO Benefits
A local SEO tip. Adding geographical metadata to your images gives search engines like Google more information to work with.Suppose coordinates are attached to a picture of a place. In that case, the search engine can tell where exactly that place is, which can be incredibly useful for service-based industries like hospitality. How do I Geotag My photos and images?Modern smartphones and cameras usually have a built-in geotagging feature. You may want to use software or online service for this task if yours doesn't.
Create An Image Sitemap
Sitemaps like your Sitemap.xml is the best way to help search engines like Google discover your website's pages. But is a separate sitemap just for your images necessary?It may sound odd, but Google recommends it. This is because image sitemaps can contain URLs from other domains, unlike regular sitemaps, which enforce cross-domain restrictions. So you don't even need to host an image on your domain, and it will still work for you. There is, however, a downside: websites usually have a vast amount of images which, if you were writing the sitemap, would be time-consuming. To create one quickly and without having to write it yourself, I recommend Screaming Frog's SEO Spider, which comes with an XML Sitemap Generator.
Use Image Caching To Speed Up Your Site
The core benefit of image Caching is that once an image is saved in the cache, the browser will retrieve it from there instead of loading it again the next time you visit the website. What a timesaver. But how do I set up caching?Open your site's .htaccess file and set the expiration times for your images.
Mark Up Images With Structured Data To Help Google Understand Your Content
Structured data tells Google what elements on your page are. This is a real benefit for ecommerce sites. It's not just regular text-based search results that can become rich snippets; image search results get a boost too.
Make Your Images Shareable
Get an extra publicity boost from social media by allowing users to share your images. The more shares your pages have, the more important and relevant they appear to search engines, so make your pictures shareable on Social.Usually, enabling the option to share your images doesn't require any hard work. WordPress already makes hero images shareable. However, you must copy and paste the page's URL when creating your social media post.
Google is experimenting with AI and developing new kinds of search, but images aren't going anywhere. Are you looking for assistance with your SEO? Get in touch now, request a free SEO Audit, and find your opportunities to grow in search.