As devs we don't care about SEO. But the client does. Almost all clients I worked with want their web-apps to be SEO friendly. Every time I reach that stage of the project where I have to make the images look "snack" to Google I have to do a Google search. So this post is a reference to save my future self the trouble of Googling. Here is a list of features a web-app must have to make the image SEO friendly.
- Option to name the image - The image should have a relevant name. There should be an option naming the image at the time of uploading it.
- Option to add alt text - Helps the screen readers.
- Option to add a caption
- Option to add a title - For sitemap (see point number 7)
- Format conversion to JPEG, PNG, and WebP
Image resizing - Option for resizing the image to different widths. This will help the web-app to serve responsive image (see point number 9). Defaults used by Wordpress are a good starting point. Wordpress resizes every uploaded image into the following formats
6.1 Thumbnail 150px by 150px
6.2 Medium - Longest size is resized to 300px
6.3 Medium Large - Resized to 768px wide
6.4 Large - Longest size resized to 1024px
6.5 Full - Original siezeImages should be added to image sitemap.
Minify SVG files. https://github.com/svg/svgo
Serve responsive image by using srcset.
Lazy load images - Very important to follow Google's guidelines
Top comments (1)
Thanks, but what makes it dev specific?