Google の Material Symbols を使ったサイトで、Bing の検索結果に arrow_forward や calendar_month といったテキストがそのまま表示されてしまうケースがありました。
調べてみると Google の GitHub リポジトリでも Issue #897 として報告されている既知の問題で、対処法もいくつか提案されていました。今回はその中から最もシンプルな方法を採用したので、その内容を共有します。
何が起きているのか
Material Symbols は「リガチャ」という仕組みで、HTML に書いたテキストをウェブフォントでアイコンに変換して表示しています。
<span class="material-symbols-outlined">arrow_forward</span>ブラウザではフォントが読み込まれるのでアイコンとして表示されますが、検索エンジンのクローラーはフォントを読み込みません。そのため arrow_forward というテキストがそのままインデックスされ、検索結果にこんな感じで出てしまいます。
call 096-XXX-XXXX location_on ルート 営業時間：10:00～18:00 arrow_downward 店舗情報 arrow_downward スタッフ紹介 …
これは Google の公式ドキュメントで推奨されている書き方に従った結果なので、実装ミスではありません。
対策：data 属性方式に切り替える
Issue #897 で提案されていたワークアラウンドのうち、data 属性を使う方法を採用しました。
Before
<span class="material-symbols-outlined">arrow_forward</span>After
<span class="material-symbols-outlined" data-icon="arrow_forward" aria-hidden="true"></span>やっていることはシンプルで、アイコン名をテキストノードではなく data-icon 属性に移しています。テキストノードが空なので、クローラーにインデックスされることはありません。
CSS 側の対応
data-icon の値を CSS の content で取り出して擬似要素として表示します。
/* 全スタイル（Outlined / Rounded / Sharp）まとめて対応 */
[class*="material-symbols-"][data-icon]::before {
content: attr(data-icon);
}これだけで、ブラウザでの見た目は従来と変わらずアイコンが表示されます。
補足
CSS 擬似要素で表示しているアイコンは対象外
以下のように CSS の content で直接アイコンを出しているケースは、もともと HTML にテキストが出力されないので対策不要です。
.my-select::after {
font-family: 'Material Symbols Outlined';
content: 'expand_more';
}aria-hidden だけでは不十分
aria-hidden="true" は Google のクローラーでは尊重されますが、Bing では効かない場合があるようです。data 属性方式ならテキストノード自体が存在しないので、検索エンジンを問わず確実です。