Whether you are running a blog or are responsible for SEO on a site with thousands of pages, improving proportional SEO should be on the radar to improve rankings. These are some best practices for advanced image SEO.
1. Use Semantic Markup for Images
Semantic markup is a trick of writing and HTML (hypertext markup language) method to reinforce the content’s semantics or meaning, not its appearance.
Google analyzes HTML pages of image indexes, but CSS does not index images. Therefore, it is best to use the following icons to help upload images to discover them.
- Recommended : <img src=”zytal.jpg” alt=”Zytal Logo” />
- Not Great: <div style = <div style=”background-image:url(zytal.jpg)”>Zytal Logo</div>
2. Use Mobile-Friendly Images
In 2022, 35% of the Internet will be powered by WordPress. Fortunately, After version 4.4, all uploaded images will respond automatically. But what about other sites?
Images must include the srcset attribute, which allows you to serve an image that is different from the screen width. This is particularly useful for mobile devices, which are currently used by most web surfers (exactly 62%) to access the Internet.
The srcset attribute allows you to specify different versions of the same image, specifically for different screen sizes. Essentially, this HTML code tells the browser to load different versions of the image with different screen resolutions.
3. Add Structured Data
Structured data is a standardized format for marking website information. This helps search engines better understand what the website is about.
If you include structured data in your SEO, Google Images can display your images as a rich result, including a rich badge. This will provide users with relevant information about your site and bring more targeted traffic to your site.
Let’s see structured data supported by Google Images:
- Product
- Recipe
- Method
In each of these structured data types, the image attribute is required field that is eligible for a rich result in Google Images.
4. Use Lazy Loading Feature
Lazy loading is a web design technique that intentionally delays loading off-screen images until the user scrolls down the page. Meanwhile, placeholders are used.
Without lazy loading enabled, all graphics on the page will load at once. This can significantly disrupt the user experience, affecting site bounce rates. It can also affect loading speed of overall page. Both are ranking factors used by Google so that any negative observation can result in lower rankings, fewer impressions, clicks, and conversions. Everything is best left.
There are two ways to do this: Use a native lazy tag in the browser or JS site-level implementation in your browser.
Starting in August 2019, you can use the loading attribute in Google Chrome to load images without encoding or implementing JavaScript.
The attribute has three values:
- “Eager”: Download image directly when page loads
- “Lazy”: Gets an image when he is in or near the viewport
- “Auto”: Allow the browser to decide how to load.
The main advantage of native lazy loading in the browser is the simplicity of implementation. You only need some necessary HTML skills to add loading = “lazy” elements to img elements. This tag does not always work outside of Chrome, so analyzing Google Analytics for the types of browsers used by visitors to your site is essential to a successful solution.
This is also not a perfect solution, as open-source solutions are rarely tailored to your site’s specific needs. Finally, you can realize lazy shipping at any time.
5. Use XML-enabled Sitemaps
XML Sitemaps are a way of organizing your webpage, identifying the URLs and data for each section. Sitemaps help the crawler navigate your site better and faster. It is best to use Google’s image extension for sitemaps so that Google can provide more information about the images available on your pages.
Adding images to an XML sitemap helps Google to index your images, so you’d better do so for on-page SEO.
The best implementation suggestions we can give are to follow the best practices for posting images and webmaster guidelines and all the tips given in this article to make it work.
6. Choose The Best File Type
Most images on the Internet are one of three file types: JPEG, PNG, and GIF. Each uses a different compression method. This means that file sizes can vary dramatically between the three file types. It’s important. The following reason:
Images often contribute the most to the overall size of a page, making the page load slower and more expensive.
Page load time is essential for SEO. Google has confirmed that it is a ranking factor for both desktop and mobile devices. It is your job to select the most appropriate file type for each image – namely, the one that provides the best compression with the least degradation.
JPEG is the best format for photos, while PNG is the best for line drawing, text, etc. Most commercial image editing applications (such as Photoshop) allow you to save in JPEG, PNG, or GIF format. You can use them to convert an image from one file format to another.
7. Reduce Image File Size
Google has some serious documents on the optimization of images for the web.
Google recommends three open-source tools to help with this: Guetzli, MozJPEG (Mozilla), and PngQuant. However, keep in mind that these are command-line tools. If you are not comfortable using such a tool, Google recommends using ImageOptim, a free Mac tool.
You can change the compression level in the settings and even enable lossy compression. It also strips EXIF data by default. This will help reduce your file size further – though usually not by much.
8. Create an Image Sitemap
Google says the following about the image sitemap:
Images are an essential source of information about the content of your site. You can provide additional information about your images to Google and provide URLs for images that we would not otherwise discover by adding information to an image sitemap.
If you use WordPress and Yoast SEO, images will be automatically added to your sitemap. This is also true for sites where “media” pages are not indexed. (Note: This is now the default setting in the latest version of Yoast.) However, Yoast only includes the required <image: image> and <image: loc> tags. If you add captions to your images in WordPress, Yoast will not add them.
Google also states that:
Image Sitemaps may contain URLs from other domains, which implement cross-domain restrictions instead of standard Sitemaps. This allows webmasters to use a CDN (content delivery network) to store images. We recommend that you check the CDN domain name in the Search Console to report any crawl errors.
9. If Necessary, Use Vector Graphics
Google says the following about vector graphics:
Vector graphics represent lines using points, dots, and polygons. [These] are ideal for images that contain simple geometric shapes (such as logos, text, icons, and so on) and provide sharp results at all resolutions and zoom settings, allowing them to be used on high-resolution screens and devices. Create an ideal format for. Need to display in different sizes.
Many sites use vector graphics for their logos and other simple on-site elements.
SVG (scalable vector graphics) are probably the most popular vector formats on the Internet. They were developed by the World Wide Web Consortium (W3C) and are XML-based. As such, they are all supported by modern web browsers.
No matter which browser, device, or screen resolution you have, SVGs will look crystal clear because they are not pixels. You can display SVG on a planet-shaped screen – it won’t lose an ounce of quality. Their recommended tool for compressing SVG files is svgo.
Here are Google’s suggestions for optimizing SVG:
- SVG files need to be compressed to reduce their size.
- SVG files must be compressed with GZIP.
Final Verdict
Image SEO is a complex subject. Google has a wealth of documentation on the case. Their image optimization documentation has over 25,000 words.
You can read the Google document to learn more about image SEO. Keep in mind that you should also strive for high-quality images and contribute to a great user experience. This means staying away from low-quality stock photos, expanding product images, and more.