Are icon fonts bad for SEO?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.