Image via WikipediaWhen adding images to your web page there are certain attributes that you should understand and how it works. when putting an image on your webpage, you would use the syntax as such:
< img src="my.jpg" title="The title of the image" alt="The alternative text of the image" >
As you take note above, there are 3 attributes associated with the image tag.
SRC: Is the location of where the graphic or image is located
TITLE: Is a short descriptive of the image that is displayed once you hover over an image.
ALT: The Alternate text is the fallback in the case that there is a problem loading the image or if you are using a text based browser (used by developers mainly)
The SRC and alt tags are obviously important and required when using images in your web content. The reason why is that without them your content is deemed as invalid HTML markup. At the same time though, your images will still display fine but is not the best practice as the standards imply.
Why Use Alt and Title Tags?
Simply put, alt tags and title tags produce text. The search engines have no way of knowing what the image is about and will not crawl them, which in turn leaves viable content untouched by the search engines which means leaving SEO points on the table. Also, alt tags are the perfect solution for people who have disabilities (specifically the blind). With the alt tags in place you are providing support for the blind that use certain technologies like text-to-speech, an opportunity for the blind to experience what the site is about.
The incorrect way to use alt tags
< img src="mycar.jpg" title="The red car" alt="The cool red car" >
The correct way to use the alt tags
< img src="mycar.jpg" title="The red car" alt="This red car has provides great gas mileage in a crappy economy" >
As you can see from above, the alt tag is descriptive which is perfect for the visually impaired persons, plus Google will eat this up like the cookie monster off sesame street. Take also into consideration naming your images so that they are optimized as well by giving them names that make sense. Instead of naming your images 123456.jpg, name your images with names that make sense. So if you have uploaded an image of a Bentley (Oh yeah!), give it a name like 'BENTLEY-CONTINENTAL-GT.jpg'. Chances are that some search engines may pick it up and in return, SEO points
The WordPress image uploader allows you to uplolad images, WordPress allows you to upload your images with ease without any HTML knowledge. Through either you media library or through your post or page editor. This function is very convenient and is fast to implement. When uploading the images you are greeted with a popup overlay (modal, lightbox, thickbox or whatever you want to call it) which allows you to upload single images or a batch at one time. After uploading the images you are greeted with a form with some fields that you SHOULD fill out. You hate the title, alternate text, caption and description fields. As you can see the 2 most important fields that we have been discussing are the title and alt fields. However, also, as stated earlier... text, text and more text will enhance you SEO rankings
Alt tags and title are the minimum of what should be applied to your images
When done, insert the image, and WordPress automatically sets the HTML into your page or post. It is a good idea to take the time to fill in the minimum required fields (alt and title) and also the caption of the text. This text will show below the image with a short description of the the image (try to keep it short and to relevance). The Description field is only for personal use and is only seen by the blog owner. However, by writing a little bit of code and adding it to your theme's function.php file we can call the the description field to display for an image anywhere we want on the page. However, that will not be covered in this article as it is out of scope. So hopefully now you have a better understanding of how to harness the power of your images and helping also the visually impaired by optimizing you images to its fullest potential.
Wayne Hatter
Article Source: http://EzineArticles.com/?expert=Wayne_Hatter
Article Source: http://EzineArticles.com/6305582
No comments:
Post a Comment