Google is a search engine for images as well, and therefore has guidelines for images as well. It is important to follow image publishing guidelines set by Google, because this can drastically improve your optimization efforts, and also provide a better user experience for your website visitors. Because when you focus on good web design principles, then you will naturally have an upper hand on competitive internet business world.
The keywords you are targeting will also get better positioned in search engine results page for web search results as well as image search results. Because a thorough search engine optimization factors isn’t just about keywords on your pages. Since better SEO is your ability to combine all of the information you placed in each on page optimization elements like: page name, title, description, headings, keyword in the web copy and also images.
Naming Your Images
Here’s what Google image publishing guidelines states “my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive file names can also be useful to users: If we’re unable to find suitable text in the page on which we found the image, we’ll use the file name as the image’s snippet in our search results”
The simple take from the example above is that Google will use the file-name when all other information is missing. So make Google’s job easier
I found that the best way to go about naming images is that, visualize that you’re having a conversation with a blind citizen. And you’re trying to relay information about the image that visualized blind citizen cannot see. Yet, you want him or her to create the same (or similar) picture in their mind as someone who isn’t lacking vision sense. What would be the best file name describing the image be? Answering that will be ideal for image file names.
Images in HTML by w3.org
If you are totally new to web standards, then check out the resources by w3 org, because Google may be the search engine people use everyday, however, learning from w3.org web standards is a better way to understand image optimisation, because then you will better understand why you are following certain criteria when naming images on your website. Here’s detailed information regarding images in HTML
As we can see in the sample image above, we have the <img tag which marks the beginning of the HTML image, and the SRC attribute defines the source (location) of an image. And you can in fact place your images on your web page with just this information. But if we leave it at that, then we will definitely miss out, because we can take advantage of other information we can place which Google can understand as well.
ALT Attributes Tells It the Way It Is
This is where you place alternative information regarding the image you are using. But I’d like to draw your attention to the point “information regarding the image”. Because almost all information regarding image optimization suggests that ALT attribute is there for you to place your important keywords only. Mentality like that is call spamming, instead, understand that HTML image ALT attribute is there for you to give text alternative about the image itself. Let’s take look:
Image name by itself doesn’t make much sense, but when you use ALT attribute it does.
Can We Provide More Information?
Yes we can with an image title attribute, because although its non-essential information, nonetheless, it is useful, so whenever you can place title attribute for images, then do so. Once again, visualize the blind citizen example when creating image title attributes, because by using the title attributes the images can really be visualized by everyone including search engines like Google.
How About Faster Loading Web Pages?
Now that we came this far while understanding how to name our images, let’s not stop there, let’s instead make our website visitors experience even better while they visit your web pages. And we can do this by defining our image width and image height.
This will create a placeholder in HTML document flow, depending on where in your HTML document flow your images are located, typical internet browsers will load other HTML elements first, thus avoid any block level element rendering issues (for example misplaced header banners etc.). The only exception to this rule would be responsive mobile ready sites. In the case you want your images to resize according to browser size, then define width or height properties through CSS like in the example below:
As you can see, images can be used for better communicating your products and services value. Always invest in good quality images that compliment your landing page message (offers, feelings, emotions, colors). And before you upload your images, make sure they are named according to the insights you now learned. Depending on the type of website you own, you can also create image sitemaps this is particularly useful if your products and services are image based.
More Useful Resources for WebSite Owners
- 1000 Words About Images
- Google Webmaster Guidelines: https://support.google.com/webmasters/
- Google Search engine optimisation guidelines: https://support.google.com/webmasters/answer/35291
Here’s What an Fully Optimized Image Looks Like
Above so far I have shared with you quick and easy methods for optimizing images for your web pages. However there are other image optimization techniques that are rather advanced. Here’s a sample optimized image (leave a comment and I’ll show you how to do that as well)
Till next time, thank you for learning with me and thank you for sharing these image optimization insights.