Ad

How To Hide Icon Fonts In Search Engine Results?

- 1 answer

My text used in html to display icons from an icon font are appearing in google search results. How can I stop this from happening?

I have already added area-hidden and role='img', but these do not seem to have any impact.

<span class="material-icons" aria-hidden="true" role="img">search</span>

I have looked around online and mostly found information on how to improve for accessibility purposes, but not so much on how to hide it from googlebot.

Solution

Based on @jake's answer below I went with the following.

HTML

<span class="material-icons" aria-hidden="true" role="img" data-icon="search"></span>

CSS

.material-icons::after{
    content: attr(data-icon);
}
Ad

Answer

This question offers an anwser in the form of pseudo elements.

On this github thread, they recommend using the font codepoint :
https://github.com/google/material-design-icons/issues/498

Check the mapping between codepoints and icons.

Ad
source: stackoverflow.com
Ad