How to keep Google from putting material-icons text in site links? - html

Question

Many of my links have material icons in tags inside the link. Now, Google has indexed my page with site-links that include the text/ligature from that material-icons tag, so a link might say "shopping_cart Shop Now" for example.
Everything already displays correctly when browsing the site, but it's just in google's search results that the page titles look ridiculous.
<li>
<a href="/feed.php">
<i class="material-icons icon">shopping_cart</i>
<span>Shop Now</span>
</a>
</li>
I would not expect the text "shopping_cart" to appear when Google indexes these page titles for site-links. How can I tell Google to stop doing that?

Answer 1

You can't tell Google to stop indexing that. What you can do is remove what you don't want Google to index. For example, if you don't want it indexing the material icon text then remove the material-icons class and text from the HTML.
What you can do instead is add it via CSS with a pseudo class, here's a pen for example: https://codepen.io/MatthewRader/pen/VNZxdo
your HTML and CSS would look like this:
<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';
}