Give your images logical names and make your ALT attributes descriptive
April 15th, 2011 3:03 am by Vincent Flanders
While I love my friends, I hate how @#$!ing stupid they can be. Two of them wanted my input on their website and I had given them—I don’t know—20 or 30 different tips—which overwhelmed them. One of them then asked me to give them just one tip to help their website rank higher in Google’s search results (yeah). I refrained from saying “Nuke your site” and said, “Have your designer rename your image files to something logical and make your ALT attributes descriptive. Why? They were using Adobe GoLive (which is now Adobe GoneDead) and it messes up image tags.
Take a look at the recent wonderful 1:44 a.m. photo of me showing off one of the few T-shirts my wife thinks is funny.
Below is the code Adobe GoLive would have “produced.” I modeled the code after code found on their website.( I didn’t want to use one of their examples because I don’t want to embarrass them.)
<img src=”http://cdn-webpagesthatsuck.com/Images/WPTS_vf_12.jpg” height=”389″ width=”300″ alt=”” name=”WPTS_vf_12″ border=”0″>
WTF?
Here are the problems:
- If you’re going to use a subdirectory for images, call it “images” not “Images” (minor issue).
- The name= attribute is replaced in HTML5 (very minor issue, these guys are so far from HTML5—wait, so are most of us).
- The border=”0″ attribute is not necessary (OK, should not be necessary and this is a minor issue).
- The alt= attribute is blank. For many images, this is OK. For an image like the one above, no. If you look at #5 below, I just know that if the program filled in the attribute it would put something unintelligible. In fact, on many of their images the code reads [alt name=”WPTS_vf_12″] As we all know, the alt attribute may help Google when it indexes your site—there’s a lot of discussion on the web about this. The alt= attribute could be something like alt=”Vincent Flanders is a very funny guy” or anything that would be meaningful to your visitors and Google. (Major issue).
- BIGGEST MISTAKE: GoLive (and there are other programs like it) automatically creates file names for images that are meaningless. In this case, the above picture is called WPTS_vf_12. That’s not going to help Google index your site. It needs to be called something like Vincent-Flanders-self-portrait or, more accurately, Vincent-Flanders-defies-the-laws-of-physics-or-he-rotated-the-image-so-you-could-read-the-text.
It’s been months and they haven’t changed it (or anything else as far as I can tell). Maybe now that this issue was mentioned in my interview in Chicago Business my friends might take it a little more seriously.
Posted in Daily Sucker, Usability, Web Design |