Google without a doubt does a superb job providing relevant images according to internet surfers search intent. But how does it do that? How do you name your images for better Google ranking results? To answer this question, we just have to take a look at Google guidelines for naming images.
By following these guidelines, when you name your images, you can increase the amount of web traffic you attract to your website. Because at the end of the day, Google search engine optimisation is just that “to provide useful, interesting and relevant content according to keywords searched”
Because when you adhere to web design principles based on better user experience, then you naturally will have an upper hand on your competition. Furthermore, the keywords you are targeting will also get a boost in SERP’s. Search engine optimisation isn’t just about keywords, or placing keywords in your web page titles. Since proper SEO is how you combine all the information and allow them to support each SEO factor.
SEO optimisation for Google also includes: web page naming, HTML web page title attribute, how you implement long tail keywords, Meta description, heading (h1, h2, h3) tags and importantly, properly naming your HTML images. 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 filenames 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, I imagine that I’m having a conversation with a blind citizen. And I’m presenting information about the image the blind citizen cannot see, yet, I want h/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 to h/her?
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 call on to find what they are looking for, but learning from w3.org is a better way to understand search engine optimisation. So here’s detailed information on images in HTML by w3.org
As we can see in the sample image above, we have the <img tag which marks the beginning of the HTML image tag, and HTML SRC attribute defines the location of the 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 and thus make Google’s relevance determination harder (and that’s the last thing you want to do)
ALT Attributes Tells It the Way It Is
This is where you place information regarding the image you are using. But I’d like to draw your attention to the point “information regarding the image” because most uninformed quick solution focused SEO information will tell you to stuff your keywords in ALT attribute (as if that is of any use) by telling you that Google indexes the text in ALT attribute. But, I strongly encourage you to stay away from that sort of uninformed information, instead, understand that HTML image alt attribute is to describe what the image all about is. Let’s take another look:
And as you can see in the example above, by itself it doesn’t make much sense, until we place the alt attribute to it. Because when we do, then it will begin to make better sense for internet visitors who have been so kind to visit my website, and Google should also be thought of “just another human visitor”.
Can We Provide More Information?
HTML title attribute to the rescue, because although it’s non-essential information you can provide using the title attribute, you can further inform your website visitors (think about the blind citizen example) because with title attribute the image can really by visualized by everyone.
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 our web pages. And we can do this by expertly defining our image width attribute 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 to avoid any issues, it is always smarter to define width and height for your images (faster is the keyword, along with your HTML elements being not misplaced due to the dimensions of your image, especially when using larger images)
I hope this information has contributed to your understanding on HTML images, and if you simply absorb these insights, not only will you provide better user experience for your web page visitors, Google will also reward your web page. This is how you optimize your images for better Google search engine optimisation results. And you are welcomed to check out this Google specialist with many years of experience.
Further resources for webmasters can also be found here
Google Webmaster Guidelines: https://support.google.com/webmasters/
Google Search engine optimisation guidelines: https://support.google.com/webmasters/answer/35291
Web Standards Curriculum: http://www.w3.org/wiki/Web_Standards_Curriculum
Till next time, I thank you for your visit.