如何在搜索引擎结果中隐藏图标字体？

Question

我在 html 中用于显示图标字体中的图标的文本出现在谷歌搜索结果中。我怎样才能阻止这种情况发生？

我已经添加了area-hidden和role='img'，但是这些似乎没有任何影响。

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

我在网上四处查看，主要是找到关于如何改进可访问性的信息，但没有太多关于如何从 googlebot 隐藏它的信息。

解决方案

根据下面@jake 的回答，我选择了以下内容。

HTML

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

CSS

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

Answer 1

这个question 提供了一个伪元素形式的anwser。

在这个 github 线程上，他们建议使用字体代码点：
https://github.com/google/material-design-icons/issues/498

检查代码点和图标之间的mapping。