{"id":119230,"date":"2020-12-11T17:17:47","date_gmt":"2020-12-11T09:17:47","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=19230"},"modified":"2021-05-11T05:48:38","modified_gmt":"2021-05-11T05:48:38","slug":"image-seo-best-practices","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/image-seo-best-practices\/","title":{"rendered":"10 Must-know Image SEO Best Practices"},"content":{"rendered":"

\"cover<\/a><\/p>\n

With so many things to think about in SEO, people tend to forget about the importance of image SEO and the value that it could bring to a website. As a result, images are only added just for designs and to accompany articles barely having any optimizations.<\/span><\/p>\n

When Image SEO is mentioned, most would think about alt text and that\u2019s it. Well, I hate to break it to you, but there is more to image SEO than just alt texts.\u00a0<\/span><\/p>\n

<\/p>\n

Take note that SEO is not just the 10 regular links you see in the search results. There are also videos, news, shopping, and of course, images. By not optimizing images on your website, you are wasting so many opportunities that could bring your website more traffic, backlinks, and give users a better experience.<\/span><\/p>\n

In this post, I will break down all the best practices that you must follow for image SEO.<\/span><\/p>\n

1. Use Original Images<\/span><\/h2>\n

If you\u2019re using a stock photo on your article guess what, a lot of people are probably using it too! That\u2019s the reason why I put this so high on the list because if you\u2019re using stock photos most of the time, you\u2019ll only be wasting time doing the rest of the best practices for images on this list.<\/span><\/p>\n

If you\u2019re optimizing for image SEO, you would want your image to appear at the top of the Google image results. If you\u2019re using a stock photo, you can\u2019t expect to outrank the website that hosts the stock photo that you used.<\/span><\/p>\n

Invest some time to take original photos of your products or service in action. Not only will this give you more assets for image SEO but also would provide your users with a good experience.\u00a0\u00a0<\/span><\/p>\n

2. Choosing the Image Format<\/span><\/h2>\n

There are so many image types to choose from but the most common ones used for websites are JPG and PNG – both of them have their own pros and cons.<\/span><\/p>\n

A JPG image has a lower file size but the quality is compromised. When you convert an image to JPG, some of the <\/span>information in the photo is permanently deleted<\/span><\/a> allowing for lower file size. On the other hand, PNG images have higher quality but the file size is much bigger as well.<\/span><\/p>\n

If you compare them side by side, you really can\u2019t tell the difference between a PNG and a JPG image. So which of the two should you choose?<\/span><\/p>\n

There\u2019s actually no right answer here. It all depends on your needs. JPG is most commonly used for photos that have large file sizes such as photos from professional cameras. PNG is commonly used for graphics and screenshots.<\/span><\/p>\n

Personally, I prefer using JPG most of the time because I choose to prioritize loading speeds.<\/span><\/p>\n

Now if you really want to put in the extra work, you might as well use next-gen image formats: JPEG 2000, JPEG XR, and WebP. These new image formats have much higher quality and better compression. However, not all browsers support these new formats. For example, the latest versions of Chrome and Firefox support WebP but are not able to support JPEG 2000 and JPEG XR. Currently, WebP is the format that is supported by the latest versions of most popular browsers. You can convert images to WebP by going to <\/span>WebP Converter<\/span><\/a>. Now is really a good time to test these new formats and see how well they perform on your website so you can be prepared for the future.<\/span><\/p>\n

3. Optimize Image File Name<\/span><\/h2>\n

The image file name is often omitted by many thinking that alt text is the only thing used by Google to understand what an image is about. But in fact, the file name is crucial too and it is one of the first things Google looks at.<\/span><\/p>\n

Here\u2019s a photo of me of the time I spoke for Tedx here in Manila<\/a>. Would it be better to leave the image file name as DCIM202054512.jpg or sean-si-tedx-talk. – the answer is pretty clear, right?\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Optimizing the image file name is simple and it works similar to how you would optimize an alt text of an image but a shorter one. Just make sure that the file name of the image clearly defines what is in the photo.<\/span><\/p>\n

4. Optimize Image Alt Text<\/span><\/h2>\n

The alt text (alternative text)<\/a> of an image is used by browsers to provide context to users of what an image is about if it cannot properly load it. This is also used by search engines to better understand an image and is an important on-page SEO factor.<\/span><\/p>\n

Optimizing the alt text of an image means providing a clear description of what the image is. You should also add your target keyword here to better optimize it for rankings as long as it fits the context of an image.<\/span><\/p>\n

For example, here\u2019s a photo of a condominium for sale in Makati City in the Philippines:<\/span><\/p>\n

\"photo<\/a><\/p>\n

A good alt text that clearly describes the photo and is also optimized for SEO would be \u201cproscenium rockwell sakura tower condominium for sale makati city\u201d. It includes the location of the condominium showed in the image as well as the target keyword which is \u201ccondominium for sale makati city\u201d.<\/span><\/p>\n

5. Provide Context around your Images<\/span><\/h2>\n

Though the image file name and its alt text are used by Google to understand what an image is about, those are not the only things Google looks at. <\/span>In 2018, Google updated Google images<\/span><\/a> to show not only the URL of the image source but also the page title of the image source to give users more context about the image.<\/span><\/p>\n

\"golden<\/p>\n

To get this data, Google gets various information from the webpage such as the title tag and meta tags to help it understand what an image is all about and serve users the most relevant images to their search.<\/span><\/p>\n

6. Add Dimensions<\/span><\/h2>\n

When inserting an image to a page, it is always a good practice to set the width and height of the image. Without a dimension, a browser will not be able to allot a space for it during page load. As a result, some elements of the page may move around from their original places.<\/span><\/p>\n

This causes a poor score for <\/span>Cumulative Layout Shift (CLS)<\/span><\/a> which is one of the three metrics in <\/span>Core Web Vitals<\/span><\/a>. I would also recommend avoiding the use of CSS to style images into a page and just set the dimensions through HTML. You could also just set the width and the browser will automatically calculate the height.<\/span><\/p>\n

7. Compress your Images<\/span><\/h2>\n

Images carry a lot of weight during page load. Large image file sizes can result in poor loading speeds. That is why it is recommended that you compress your images that could trim off a good chunk of image file sizes. Yes, quality may be reduced but not to a point that is noticeable for average users.<\/span><\/p>\n

Check out this photo of our team here at SEO Hacker. The first one is the original photo (552kb) while the second one is the compressed photo (442kb 20% compressed).<\/span><\/p>\n

\"photo \"seo<\/p>\n

See the difference? That\u2019s right\u2026 There is no difference between the images but there is a difference in page loading speeds.<\/span><\/p>\n

You could use Google\u2019s PageSpeed Insights<\/a> to compare the loading performance of webpages with compressed and uncompressed images. PageSpeed Insights can also help you identify which images on the webpage are taking too long to load.<\/span><\/p>\n

There are a lot of free image compressor tools that are available online. You could also take a look at <\/span>Imagemin<\/span><\/a> which is recommended by Google because it can compress a wide variety of image format. I highly recommend that you compress your images before uploading them to your website.\u00a0<\/span><\/p>\n

But how about images that are existing on your website? Do you have to re-upload all of them? Don\u2019t worry. If you\u2019re using WordPress, you could download plugins that can automatically compress all images on your website. We recommend using <\/span>WP Smush<\/span><\/a>.<\/span><\/p>\n

8. Add Structured Data<\/span><\/h2>\n

Marking up your pages with structured data can make your images eligible for rich results and badges that could make your images more visually appealing in the search results and attract more clicks. Currently, only three structured data types for images are accepted by Google. I\u2019ve also included a link to Google\u2019s guidelines that you should follow.<\/span><\/p>\n