homepage Welcome to WebmasterWorld Guest from 54.167.249.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Google / Google SEO News and Discussion
Forum Library, Charter, Moderators: Robert Charlton & aakk9999 & brotherhood of lan & goodroi

Google SEO News and Discussion Forum

    
Alt and title-attribute for decorative images
deeper




msg:4608137
 7:17 pm on Sep 7, 2013 (gmt 0)

Hi,
on my site the same decorative pics are on all pages. At the moment they have no title, but an alt-attribute like "Coloured wings, seperator-graphic for the car-site".

For decorative pics, like separators, one should use alt="" and no title-attribute. That's what I could research.


But what will Googles spider say then? Will he say "Hey, I like alt, but this guy here has forgotten to fill it with text. Throw him to hell or at least give him a +1000 penalty." :)

 

lucy24




msg:4608155
 8:21 pm on Sep 7, 2013 (gmt 0)

Never mind the googlebot: think of your humans.

If the alt is blank (either absent altogether-- a validation no-no-- or "") the pictureless user has no idea what's missing. In ebooks I'll say something like "decoration", or use a functional equivalent like "--" for decorative lines. Or "|" depending on which way the line is facing ;)

phranque




msg:4608170
 10:32 pm on Sep 7, 2013 (gmt 0)

when an image has no semantic meaning you should provide the alt attribute with a null value.

render your document with images turned off or using a text-only browser such as lynx and the answer will be obvious.

deeper




msg:4608189
 1:14 am on Sep 8, 2013 (gmt 0)

@phranque:
Will Google understand my alt="" correctly as intentionally empty, indicating "I know there should be describing text, but this is just a decoration pic"?

W3C says "If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

Google is an "assistive technology"? I only know assistive listening devices :)

@lucy24:
Do your user understand the hint "--" as horizontal decorative line?
My question respects user and G as well. But it may be a spam issue because of the same images on all pages. Certainly your suggestions raise no red flags.

JD_Toims




msg:4608193
 1:24 am on Sep 8, 2013 (gmt 0)

W3C says "If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

I'd go with this, because it's technically accurate information and thinking of visitors first [rather than Google], someone with a screen reader doesn't really need all the possible associated alt info read to them to find what they're looking for -- It seems like it would be a waste of their time to me to tell them 15 or 20 [or whatever number] of times the image they would be viewing if they could see the screen is decorative only.

Also, the last round of testing I did showed the title attribute had no impact on rankings and was not used in the snippet, but the alt text of images was used in the snippet of the results for searches I made on Google, so it could possibly [likely in-my-opinion] have an impact on the topicality [and therefore rankings] of a resource, which means to me, where an image is beneficial to visitors and topical to a given resource I'll try to describe what it displays accurately in the alt, but otherwise I'll leave the alt null.

lucy24




msg:4608230
 7:17 am on Sep 8, 2013 (gmt 0)

If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.

Oh, thanks for finding that. It's useful to know.

Do your user understand the hint "--" as horizontal decorative line?

Well, here I'm talking in the narrow realm of e-books. If the printed original had a decorative horizontal squiggle separating sections of text, you'll want to have something visible if they're reading in a no-images mode. A line containing
----
is a minimalist form of the same information.

It may also be worth considering that there are two ways for an image not to display. One's a text-only medium, whether it's Lynx or a screen reader.

The other is a regular browser that happens not to show the image. It might be a one-off where a single file went walkabout or you misspelled one link; it might be a low-bandwidth user who set their prefs that way. (Can you still tell a browser not to display images?) In this second case, you get the same visual effect as with an ad blocker: the image itself isn't there, but its allocated space is blank. That's assuming you've got width and height in the html, which you really should.

So then, on top of everything else, you sometimes need to make sure the alt text doesn't take up more screen space than the picture did.

I realize your original question was about SEO and I'm just blathering on about humans. Oh well :)

Do all browsers now handle the "title" attribute correctly? I can remember when w3 had to keep explaining that the reason Firefox seemed weird was that it was the only browser that :: drumroll :: did what it was supposed to do.

CaptainSalad2




msg:4608271
 9:24 am on Sep 8, 2013 (gmt 0)

My main site, the logo has a alt tag="COMPANY NAME LOGO". Today in the serps my site title is showing as "COMPANY NAME LOGO". For some reason google has overridden my title tag and used the alt tag of my logo image! Not good IMO as now I will have to revise my alt tags to be more descriptive on the page in general rather than the specific element.

Alt tags were, I believe designed for text only browsers and the days of dial up when rendering of the page took 4ever and a description of the element was user friendly, so the role of alt tags appears to have changed if they are given this much importance by google?

lucy24




msg:4608353
 8:32 pm on Sep 8, 2013 (gmt 0)

There are other threads about google's recent habit of making up a page title if they think the real title doesn't fit the search. If you change an alt to match one search, you'll end up with a worse match on other searches, so you can't win.

Using "Widget Logo" as a made-up title seems pretty silly, though. (I'm assuming that's the literal word "logo".) Is there something in the page layout that would lead search engines to think your logo is functionally the <h1>?

JD_Toims




msg:4608356
 8:50 pm on Sep 8, 2013 (gmt 0)

I might try putting a title= on the image and changing the alt= to null to see what they decide to do with the title in the SERPs if the alt isn't present.

deeper




msg:4608362
 9:27 pm on Sep 8, 2013 (gmt 0)

Are there any special rules for the logo-alt? I suppose it should contain the domain or company name and you should use a title-attribute?

JD_Toims




msg:4608370
 10:22 pm on Sep 8, 2013 (gmt 0)

This is really the best resource for information on alts and titles.

Emphasis Added
This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target.

<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
</a>

Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so an empty alt attribute is used.

<header>
<div><img src="border.gif" alt="" width="400" height="30"></div>
<h1>Clara's Blog</h1>
</header>
<p>Welcome to my blog...</p>

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#alt

Emphasis Added
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.

http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute
lucy24




msg:4608371
 10:31 pm on Sep 8, 2013 (gmt 0)

Edit: Dammit, jd, I think your whole post has made mine superfluous because I typed too slow.


In human terms:

The alt is displayed when the image isn't.
The title is displayed when the user hovers over the image.

So they should be mutually exclusive. (Some voice readers may speak both by default, but they really shouldn't.)

If you're using an image as text, the alt and title should both be identical to the visible text. The title is for accessibility: If someone has lousy eyesight for reading but can still see pictures, they can have the computer read the "title" out loud on request.

I like to put the image inside the same <h..> tags it would have if it were text, so the alt will display with the intended emphasis (in Lynx it's indentation and/or text color).

JD_Toims




msg:4608373
 10:35 pm on Sep 8, 2013 (gmt 0)

Edit: Dammit, jd, I think your whole post has made mine superfluous because I typed too slow.

LMAO! Sorry Lucy24 -- You do usually beat me to threads though :)

mcskoufis




msg:4608374
 10:36 pm on Sep 8, 2013 (gmt 0)

I like to put the image inside the same <h..> tags it would have if it were text


Lucy24 wouldn't that raise a flag for spam in Google? Have no evidence to support this but my logic says so... I understand your intention, but I would avoid if possible.

JD_Toims




msg:4608379
 10:49 pm on Sep 8, 2013 (gmt 0)

[Begins to reply; notices Lucy24 hasn't replied yet; deletes reply and waits patiently to chime in later.]

deeper




msg:4608381
 11:05 pm on Sep 8, 2013 (gmt 0)

JD_Toims, lucy24:
Thanks for your contributions.

What is meant by "image credit"? The source, copyright?

"Mutually exclusive".... interesting... and rarely seen!? It seems as often it's the same with other words.

JD_Toims




msg:4608383
 11:13 pm on Sep 8, 2013 (gmt 0)

The source, copyright?

Yes, I think either [or both] would be appropriate depending on the exact situation.

What I didn't reply with earlier is I've run things very close to the way Lucy24 said she does and haven't had issues with it -- Mine were slightly different, because they were true image-swaps, so the <hN> tag I used contained the exact text the image I ran inside the tag and displayed rather than the heading text did.

[Note: It's easy enough to use non-standard fonts now, so I don't bother with image-swaps any more, but it used to be it was easier and more reliable to run an image-swap if I wanted a non-standard font for a heading -- I haven't tested in a while though so things may have changed, but like I said, when I used the image-swap technique I didn't have any issues with search engines because of it.]

lucy24




msg:4608414
 3:53 am on Sep 9, 2013 (gmt 0)

Mutually exclusive

I meant that any given user at any given time will have access to only one or the other. If they don't see images they'll get the alt. If they do see images, they have the option of getting the title. In most situations, the alt and title serve different functions so they'll contain different text. But in the case of image-as-text you need to make sure the user gets the same information either way.

wouldn't that raise a flag for spam in Google?

I don't see why it would. The robot, er, I mean the computer behind the robot looks at the positioning and distribution of headers. In particular, it expects to find an h1 on every page. (I know this because wmt is always yattering at me about it.) Give it a pair of <h1>tags</h1> enclosing an image with a suitable alt, and it will be happy.

There do still exist browsers that don't do embedded fonts. And then there's the size issue. Unless you take the time to edit down your font, it's liable to be an awfully big file. Mine average out to around 100k-- and that's the median, not the mean. Some font files are many, many megabytes. Double if you need italics. (Quadruple if you want bold, but you can get around that with a carefully written @ rule.)

JD_Toims




msg:4608417
 3:58 am on Sep 9, 2013 (gmt 0)

I don't see why it would. The robot, er, I mean the computer behind the robot looks at the positioning and distribution of headers. In particular, it expects to find an h1 on every page. (I know this because wmt is always yattering at me about it.) Give it a pair of <h1>tags</h1> enclosing an image with a suitable alt, and it will be happy.

Yup -- And one interesting note about headings <hN> tags is they're the implicit start of a new section of a document, so even if the HTML5 <section> is not used <h3> technically means <section><h3> to compliant user-agents.

Note: The only thing [except for some robots.txt issues that are reported here occasionally] I've found Google to be non-compliant about is when they switched their handling of 302s to be almost identical to 301s due to the issues they had with 302-hijacking. One of the first [and only] times I've seen them break HTTP/HTML protocol is when they began treating 302s almost exactly the same way as they treat 301s rather than how they "should" according to the HTTP docs. Other than that they're *very* HTTP/HTML protocol compliant, so following the standards set by the W3C and using things as they're intended is a good plan in-my-opinion.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Google / Google SEO News and Discussion
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved