Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Instead of using <img> tags for your icons, you can use icon fonts on <span> tags (which offer some advantages such as not having to create a sprite, being able to scale icons up/down without degrading quality...).

However, by using an icon font you give up the <img> alt attribute (that attribute can help you with SEO). There is a way to add text to the <span> and hide it, but I wonder whether this is recognized / penalized by Google (as it seems to go against the quality guidelines).

Are icon fonts bad for SEO (i.e. by using icon fonts you give up the alt attribute)? Would inserting text in font icon tag and hiding it with CSS (text-indent: -9999px) be recognized / penalized by Google?

share|improve this question
    
How would you ensure the icon font is available/works on the user's system? If you're making them download a whole font for this is that any better than a sprite for the user? –  Andrew Lott Jun 27 '13 at 12:22
    
with a srpite you will always run into quality issues, because it's bitmap, whereas icon fonts are vectors. The most common implementation of icon fonts I see is to indeed download a whole font. As for icon font browser support, I'm not sure, but tests I made recently with IE, FF, Chrome didn't show any problems. –  user359650 Jun 27 '13 at 13:06

4 Answers 4

Good, well-thought out question regarding a blossoming trend in design.

Since we're not privy to Google's algorithm, and anecdotal reports are currently sparse on the subject, I'm going to avoid using definitive terms like "bad", and instead offer an SEO-perspective in terms of potential impact:

As you point out in Google's guidelines regarding hidden text and links, it's recommended to avoid using anything that might resemble "blackhat" techniques, which Google is targeting in its recent Penguin release.

Using <span> tags to add hidden text for icon fonts would seem indistinguishable from attempting to hide text for "blackhat" reasons, so it doesn't seem wise to attempt this. If you're concerned about SEO penalties, I would wait until reports confirm there isn't any, like through comparison testing, before using them.

The primary concern with icon fonts is accessibility for users with impairments and those using readers. There are ways to preclude icon fonts from being read out-loud, like applying aria-hidden="true" to your HTML element, or mapping them to characters as covered here, however, you should keep in mind that you're potentially losing out on the known weighted benefits of:

  • Text in your content that can be indexed
  • Text in alt tags for images (as well as the title attribute), which add internal links

In regards to the later, if you replace images with icon fonts, your page might appear as plain text only, potentially resulting in a slight downgrade.

To be on safe-side until the verdict is in, I'd suggest using icon fonts for decorative purposes, in addition to images, and avoid anything that's unknown which could result in a penalty, until demonstrated otherwise.

share|improve this answer

One of the big problems with icon fonts is that the text behind is basically nonsense. A basic menu for example might look like A Home | R Portfolio | J About | Q Contact. There are two solutions:

The first (and generally preferred I believe) is to use the :before CSS selector with the content property, e.g.

.menu-home:before {
  font: /*icon font*/
  content: "A";
  /*other styles like width/height*/
}

The second is to not use regular letters and instead set up the font to use symbols or "blank" Unicode positions. While this avoids junk letters in the code it can be more difficult to actually insert the symbols. I would say the first solution is slightly better for SEO.

Inserting text and hiding with something like text-indent would be at best neutral for SEO. While it can be used for legit purposes, it is often abused and so I believe it carries very little weight in search engines now.

As for image alt tags, again I don't think they really carry much weight for ranking a web page. They help for ranking images of course, but you generally would not care for icons to rank in Google image search.

Furthermore, when displaying icons you will always want a textual representation somewhere, for usability and accessibility. Either put text next to the icon, or use a title attribute.

So in conclusion, any good or bad SEO effect of icon fonts is pretty negligible. Prefer to use pseudo content, and make sure to include a text representation somewhere.

share|improve this answer

IMO icon fonts are awesome.They won't affect your site negatively, it will make your site load faster than when using image tags.There is no big advantage on SEO for using <img> other than that you got opportunity add title attributes...I'm pretty sure the actual text will have more preference the text in inside title attribute.

After all, you should be making website for humans instead of robots....the faster a site loads the less irritated your visitor will be :)

Also I think using display:none is better than text-indent: -9999px. I don't understand why everyone worry getting penalized for hiding one or two texts.Just because spammers exploit this properties, using this property on one or two places won't you a spammer.

share|improve this answer
    
The OP doesn't state how much icon font, or hiding, he intended to use. Once you're penalized, it takes quite a while to come back, so it's not very helpful to offer an opinion that might risk this for someone's site (and possible livelihood) without any supporting documentation. –  dan Jun 27 '13 at 15:18

If your ok to limiting the site to current & recent browsers (not having to support old browsers), SVG could give you the same scaling you're seeking from the font. (Compatability can be checked on caniuse.com)

share|improve this answer
1  
sorry, I don't see how that answers my question. –  user359650 Jun 27 '13 at 7:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.