How to hide icon fonts in search engine results?

Question

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);
}

What's the statue of your issue ? Have you found a solution ? Have you checked out my answer ? — Jake, Apr 08 '19 at 14:53
Sorry, I put this on hold, but your answer is correct. Thanks! — kingofbbq, Apr 09 '19 at 20:22

score 1 · Accepted Answer · answered Apr 03 '19 at 09:23

1

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.

answered Apr 03 '19 at 09:23

Jake

1,398
1
9
19

Thanks, I went with your first suggestion as it does not additional data to my application. – kingofbbq Apr 09 '19 at 20:23
I'm glad I could help you a bit ;) – Jake Apr 10 '19 at 07:14

How to hide icon fonts in search engine results?

Solution

1 Answers1