Today, I finally put into words a question that had been persistent at the back of my mind for a while…
“What's the difference between the alt and title attributes on an image?”
You see, I have learned to write HTML well before the title element came along, for the longest time I didn't give it any thought beyond using it for tooltips. alt tags were what mattered—the text is shown if an image isn't shown, and by screen readers. Super important for accessibility.
Common practice seems to be to add the title attribute to the <a> tag. But is this best for SEO? Would there be any harm in adding it to both tags? If not, is there harm in the title text being identical on both?
IMAGE ALT TEXT VS. IMAGE TITLE ATTRIBUTES
Image optimisation is often overlooked when it comes to SEO, despite the fact that Google has emphasized the importance of it for users and search engines. However, some people may be confused as to how exactly they can optimise their image attributes for SEO, and what exactly image alt text and titles are. This blog post will break it down for you and provide you with best practices for both.
If you’re just looking for a quick answer though, here you go!
Image alt text describes the image textually so that search engines and screen readers (software used by the visually impaired) can understand what the image is. Using alt text correctly can help your SEO. The image title tag is simply used to provide an image with a title, but it isn’t important for SEO.
THE IMAGE TAG
This is what a complete, properly optimized image tag should look like for an image like this:
“What's the difference between the alt and title attributes on an image?”
You see, I have learned to write HTML well before the title element came along, for the longest time I didn't give it any thought beyond using it for tooltips. alt tags were what mattered—the text is shown if an image isn't shown, and by screen readers. Super important for accessibility.
Common practice seems to be to add the title attribute to the <a> tag. But is this best for SEO? Would there be any harm in adding it to both tags? If not, is there harm in the title text being identical on both?
IMAGE ALT TEXT VS. IMAGE TITLE ATTRIBUTES
Image optimisation is often overlooked when it comes to SEO, despite the fact that Google has emphasized the importance of it for users and search engines. However, some people may be confused as to how exactly they can optimise their image attributes for SEO, and what exactly image alt text and titles are. This blog post will break it down for you and provide you with best practices for both.
If you’re just looking for a quick answer though, here you go!
Image alt text describes the image textually so that search engines and screen readers (software used by the visually impaired) can understand what the image is. Using alt text correctly can help your SEO. The image title tag is simply used to provide an image with a title, but it isn’t important for SEO.
THE IMAGE TAG
This is what a complete, properly optimized image tag should look like for an image like this:
It’s a good idea to use keyword-rich alt-tags, but avoid keyword stuffing. Here’s the alt-tag example Google gives:
Not so good:<img src=”puppy.jpg” alt=””/>Better:<img src=”puppy.jpg” alt=”puppy”/>Best:<img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”>To be avoided:<img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
WHAT IS THE IMAGE TITLE TAG?
The title tag is the title of the image. If you hover over it, it’s the text that will appear. If you want provide detail without providing captions, this is where you do it.WHAT’S THE DIFFERENCE BETWEEN AN IMAGE ALT-TAG AND AN IMAGE TITLE TAG?
An alt-tag is what will show up if your image does not, For example, if it takes too long to render, or if HTML or graphics are disabled, like in an email. An alt-tag is also the main point of reference for search crawlers to help them determine what your page is about.
The title tag is what shows up when someone hovers over the photos, and doesn’t show at all if the photo doesn’t render.
THE CAPTION AND ANCHOR TEXT
How Image Alt Tags and Meta Data Help SEO
So, how exactly do images affect SEO?
Optimizing your images for SEO helps crawlers better index your web pages, which in turn can give you a better rankings boost because it can make the page more relevant to users. I’ll give you an example:
Let’s say a searcher needs chimney repairs for a kitchen. Google has to choose between two web pages from different companies, both of which have equal ranking factors.
As the crawler reads through the first page, it doesn’t identify any image alt-tags, therefore, it assumes the images (if there are any) do not add page-specific value. On the second page, however, the crawler locates five images, each one with a full description of what the image is showing. All five images’ alt tags supplement the rest of the text on the page.
Optimizing Images: The Technicalities
You don’t just need to optimize the meta data of an image, you need to make sure it’s technically optimized. That includes:
- Choosing the right file format: You have three options for images, .PNG, .JPG, and .GIF. PNGs produce higher-quality photos, but have a larger file size. JPGs are lower-quality, but are generally smaller in size. GIFs are used for animated images and looping videos.
- Compressing your images: It’s generally a good idea to keep your images no larger than 100KB to keep loading time as fast as possible. But if the image is still distorted and the quality isn’t good, keep increasing little by little so you have an image at the smallest size possible at the best quality possible.
Comments
Post a Comment