web-dev-qa-db-ja.com

スクリーンリーダーではなく、目の見える人にはテキストを非表示にすることによるSEOのペナルティ

この設定があるとしましょう：

HTML：

<a href="#" class="menu_links"><span class="hidetext">Graphic </span>Design</a>

CSS：

.hidetext {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
}

目が見える人にのみ「デザイン」を表示し、CSSをオフにすると「グラフィックデザイン」を表示します。

これはSEOにとって悪い/良いですか？そして、これを行うことでグーグル経由でペナルティを受けますか？

seogoogle-searchcssaccessibilityhidden-text
2
Mikkel Madsen

あなたの目標は素晴らしいものであり、あなたが探しているアプローチは既に@mediaとdisplayとしてCSSに存在していると思います。

1つのオプション

HTML

<a href="#" class="menu_links"><span class="hidetext">Graphic </span>Design</a>

CSS

@media screen {
 span.hidetext {
  display: none;
 }
}

@media aural {
 span.hidetext {
  display: inline;
 }
}

便利なリファレンス

  1. CSSメディアタイプ
  2. CSS表示プロパティ
  3. 8.0より前のIEが重要な場合は、 HTML5 Shiv

2番目のオプション

メディアタイプに基づいて異なるHTMLを配信します。それを行う場合、おそらく代替メタ要素を使用することになるでしょう。

4
hunterhogan

たとえそれが良い習慣でなかったとしても、あなたのサイトがこの点で罰せられることはないと思います。

ただし、リンク全体でのこの種のプラクティスはまったく許可されていません。実際、Googlebotはなく、リンク全体がユーザーに対して隠されている場合、Googleはペナルティを科します。詳細については、 Googleサポートページ をご覧ください。

0
Zistoloen