web-dev-qa-db-ja.com

リンクがアイコンフォントの場合、リンク内のテキストを非表示にするのは悪いですか？

私はページのいくつかの簡単なSEOテストを行いましたが、それらはすべて「リンクへのテキストの追加を検討する」ことを提案しています。彼らが参照していたリンクはすべてソーシャルアイコンであり、アイコンフォントを使用して表示されます。私はこれに似たいくつかの異なる質問を読みましたが、ほとんどの答えは不明瞭でしたか、助けにはなりませんでした。

他の質問に対するいくつかの同様の回答を以下に示します（私の状況にどのように対応するかを示します）。

  1. SEOを最優先にしないでください（サイトは既に完成しているので、私はそうしていません）。
  2. 考えすぎないでください（私はそうではありません。seoスキャンを行う前に頭に浮かんだことすらありません）。
  3. 読者のために最善を尽くします（実際にディスプレイを変更するわけではないので、これは何らかの形で読者に影響を与えます（ただし、実際にこれを追加することで読者を選別する可能性があります）。

現在、それらは空のソーシャルアイコンとして表示されていますが、検索エンジンへのテキストなしのリンクとして表示されています。さらに、不要な追加です タグ。

例を次に示します：

social icons

少し操作するだけで、Iタグを削除し、spanに置き換えることができます（それが良いのか、それとも問題なのかわかりません）。また、非表示にするtext-hideクラスまたはsr-onlyクラスを使用して、そのスパンにテキストを追加することもできます。

一般に、テキストを非表示にするのは良くないことを知っていますが、このような状況ではペナルティが科せられますか？これにより、空のリンクにテキストが追加され、srのみのクラスを使用している場合にスクリーンリーダーが役立つ可能性があります。

隠されたテキストの新しい例：

<a href="https://www.facebook.com/disputebills" class="fa fa-md fa-facebook">
    <span class="text-hide"">Dispute Bills Facebook Page</span>
</a>

Twitter bootstrapを使用しています。これには、テキストを非表示にする2つのcssクラスがあります。この状況でテキストを非表示にすることが問題ない場合、.text-hide（seoの観点から）よりもsr-onlyを使用する方が良いかどうかわかりません。

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
seolinksseo-audithidden-textnegative-seo
2
Bryan Willis

Googleは隠しテキストを好まない なので、それをしないでください。

しかし、あなたが最適化しようとしているのは、他の誰かのサイトですか？ソーシャルメディアサイトはあなたのものではないため、リッチアンカーテキストリンクに注目する必要があるとは思いません。

私のページ、アイコン、画像など、あなたのサイトではないので、あなたは何でも言及することができます。はい。リッチアンカーテキストはSEOで非常に役立ちますが、誰かがリッチアンカーテキストでサイトを指している場合のみです。 （たとえば、最初の行で、Googleは隠しテキストが好きではないことに言及しているので、アンカーテキストとPageRankの両方が完全なリンクを通過するため、SEOで非常に役立ちます（リンクはnofollowではないと仮定します））。したがって、リッチアンカーテキストを使用して外部リンクを最適化しても、SEOには役立ちません。そのため、ユーザーにとって見栄えの良いものを自由に使用してください。

1
Goyllo

それはあなたが満足させたいものに依存します。

Googleを満足させるには、背景色と同じ色ではなく、リンク内のすべてのテキストを表示するか、Googleへの非表示リンクとして適格にすることができます。

アクセシビリティを満たすためには、少なくともリンクに何らかのテキストが必要です。これは、画像を解釈できないユーザー（画面読み上げデバイスを使用するユーザーなど）がリンクを理解するために、テキストに依存することを意味します。

Googleやアクセシビリティを気にせずに、視覚だけを満足させるために、リンクを単なる画像にします。

私が個人的にすべてにとって有利な状況を作るために提案するのは、テキストを追加し、リンクとうまく調和させることです。たとえば、リンク項目の真下に明るい色の小さなテキストを配置して、テキストまたは画像をクリックしてリンクにアクセスできるようにすることができます。これは、クライアントのブラウザでスタイルシートまたは画像が無効になっている場合にも機能します。

0
Mike