如何防止谷歌在站点链接中放置材料图标文本？

【问题标题】：How to keep Google from putting material-icons text in site links?如何防止谷歌在站点链接中放置材料图标文本？
【发布时间】：2019-08-20 20:19:42
【问题描述】：

我的许多链接在链接内的标签中都有材料图标。现在，Google 已使用包含来自该材料图标标签的文本/连字的站点链接为我的页面编制索引，因此链接可能会显示“shopping_cart Shop Now”。

浏览网站时，一切都已正确显示，但只是在 google 的搜索结果中，页面标题看起来很荒谬。

<li>
   <a href="/feed.php">
     <i class="material-icons icon">shopping_cart</i> 
     <span>Shop Now</span>
   </a>
</li>

当 Google 为这些页面标题编入站点链接时，我不希望出现文本“shopping_cart”。我怎样才能告诉 Google 停止这样做？

【问题讨论】：

标签： html css icons google-search google-material-icons

【解决方案1】：

您不能告诉 Google 停止将其编入索引。您可以做的是删除您不希望 Google 索引的内容。例如，如果您不希望它索引材料图标文本，则从 HTML 中删除材料图标类和文本。

您可以做的是通过 CSS 使用伪类添加它，例如，这里有一支笔：https://codepen.io/MatthewRader/pen/VNZxdo

您的 HTML 和 CSS 将如下所示：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<li>
   <a href="/feed.php">
     <span>Shop Now</span>
   </a>
</li>

li {
  list-style:none;
}

a {
  text-decoration: none;
  color: PeachPuff;
  padding: 10px;
  background: SaddleBrown;
}

a::before {
    font-family: 'Material Icons';
    content: "shopping_cart";
    -webkit-font-feature-settings: 'liga';
}

【讨论】：