Have you ever used Google Image Search? It's great! Need a picture of a seal waving hello? You are covered. But how does this work? How does Google know that the seal is waving, or let alone that it is a seal at all?
Google looks for some very specific things when crawling your website. Each of these things help it understand what your website is about and when to show it to users of its search engine. Each website is built with a combination of many different programming languages, including HTML.
Let's say you have just returned from an Alaskan cruise, and while browsing your photos, you come across one photo you took on the Seal Spotting tour.
You didn't even realize that you captured that moment when the seal smiled and waved at you. That seal loved you very much and you want to share that moment with the world on your website.
As it stands now, you probably have a file on your camera's memory card titled something like "DC000112.jpg" No matter how you go about embedding any image into your website or blog, the resulting code to display the image is the following:
<img src="http://yourwebsite.com/DC000112.jpg" width="400" height="300" />
This tells your web browser where the image is, and how large to display it. As you can see, this does not tell us anything about the image 's content. If you cannot tell what it is about while looking at the code, than neither will Google. Let's dress it up a bit.
1. Rename the file
Make sure to use an informative file name. "seal.jpg" is way better than "DC000112.jpg" .
<img src="http://yourwebsite.com/seal.jpg" width="400" height="300" />
Now there is a clue to what the image contains. This step alone can help the process dramatically.
2. Use "alt tags".
Originally used when there were more web browsers than websites about seals, Alt tags tell machines what to display if the image will not load. Insert an alt tag with every image with a short and informative description of the file.
<img src="http://yourwebsite.com/seal.jpg" alt="Seal Waving Hello" width="400" height="300" />
Now it is starting to look a little more readable to a human. How else would we (the machine) have known that the seal was waving!
3. Use "title tags", sometimes…
If the image is a link to another source (such as the fictional, yet wildly popular informational resource, All About Friendly Seals dot com) , consider using the title tag as well. In the example below, the title="The Friendliest Seal In the World" is used to show text when the user hovers over the image.
This is a popular way to let a user know what they are getting into when clicking on a link. That's a valuable user experience element that many do not include. It is always important to think about your website's usability.
<a href="http://allaboutfriendlyseals.com">< img src="http://yourwebsite.com/seal-waving.jpg" alt="Seal Waving Hello" title="The Friendliest Seal In the World" width="400" height="300" /></a>
Google holds usability in very high regard, and when using the title tag on links, it knows that you are considering the user experience. That adds to your websites overall credibility online, and also provides that information (in this case "The Friendliest Seal In the World") to search results.
Most content creators do not consider the impact that these elements have in the long run. This knowledge should help put you ahead of the pack, and to drive more people to your weird seal blog.
Over & Out.