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

Question

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

我已经添加了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

这个以伪元素的形式提供了一个答案。

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

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