Image HTML alt vs title

Some things in Blogger are straightforward, auto-pilot stuff, designed for your convenience. But where Blogger falls short (and WordPress doesn't) is in HTML tags and titles for images.


Why do you need to even think about that HTML code for any image you've posted?

+ Your Google ranking will raise when you include relevant data in those areas. The idea is that you're providing data that will help search engines help people find what they're searching for.

+ These provide Pinterest Pinners with an auto-generated title if they pin your image.

+ It's also what pops up if you hover your cursor over the image (depending on the browser used)

(example)


So what's the difference between the two?

+ Alt is an alternative description for the image (alternate to the name of the file, which may or may not convey relevant data about what the image is). 
If the image can't load, this is the info that will show up in its place. For instance "book cover of destruction sharon bayliss" or "me lying in grass with book on sunny day".

(example)

+ Title is what the image represents, on a larger scale. For example, "Click to see my recipe for the best pancakes ever" or "This is why I love baking".
This is the data provided to Pinterest when the image is pinned. If  left blank, some blog engines will insert the title of your blog post as the image title, and some will use the image filename as the image title.

BOTH should be concise and relevant.
(links to the image creator, and a relevant article)



Ok, how do I manually insert/edit that info?

  1. When viewing your post, switch the the HTML version.
  2. Find <img src="">
  3. After the src="" part, but before the > you want to insert an alt and a title
  4. Do this with the code alt="" and title=""
  5. Fill the relevant data between the quotation marks
So it looks something like this:
<img src="http://artemishi.blogspot.com/20951394.jpg" alt="description of image" title="overarcing concept or blog post title">


There may be other info in there, like height, width, etc, and that's fine. Just make sure you have an alt and title in there, for the best user experience!


* These photos are not my own. Click on them to be taken to a relevant article and their original source!

Labels: ,