Despite what anyone says, Google likes to have control on internet, and it wants to be the only search engine that can help you find anything “Including images” because Google also is a search engine for images and therefore has guidelines for naming images.
Following the image publishing guidelines set by Google can drastically increase your SEO 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 your online competitors.
Also, 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) and make them work in harmony to rank your target keywords should be your ultimate aim.
Let’s take a closer look how we can name our images for better Google ranking.
Naming Your Images
Here’s what Google image publishing guidelines states “For example, 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”
And we don’t need to be rocket scientist to understand the importance of properly naming your images. The simple take from the example above is that Google will use the file-name when all other information is missing. So why make Google’s job harder?
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? Answer that for coming up with best image file names.
Images in HTML by w3.org
If you are totally new to web standards, then check out all 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 search engine optimisation, because then you will better understand what you do for SEO and why you are doing it. 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 HTML 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 do that, then we will definitely be missing out by not taking advantage of other information we can place which Google can understand.
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. That’s call spamming and I strongly encourage you to stay away from that sort of mentality. Instead understand that HTML image alt attribute is therefore you to describe what the image is. Let’s take look:
Image name by itself doesn’t make much sense to Google. But when you use ALT attribute describing the image in short, then it is better.
Can We Provide More Information?
Yes we can with an image title attribute, because although it’s 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.
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 only, like so:
max-width: 768px; /* maximum size you want images to be rendered at. This can be the maximum size of the parent div for most typical themes using sidebar div’s to make sure images don’t over stretch because with this rule CSS inheritance rule will apply and the maximum width in pixels will only be what you set here */
As you can see, images can be used for better communicating your products and services, always invest in good quality images that compliment your landing page’s 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 how to create image sitemaps.
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
Till next time, thank you for learning with me and thank you for sharing these image optimization insights.