web-dev-qa-db-ja.com

SEO：画像と説明テキスト

背景画像機能を広範囲に使用して、テキストを定型化された形式のテキストを含むグラフィックに置き換えるサイトを持っています。

アクセシビリティとSEOの目的で、実際のテキストをHTMLに含めていますが、ほとんどのユーザーに表示したくないのです。

これに取り組む最良の方法は何ですか？オフスクリーン配置を使用することが推奨されていますが、これがブラックハットであることを警告するものもあります。次に、次のようなものを使用するオプションがあります

@media all {
  .mybox{visibility:visible;}
}
@media not speech {
  .mybox{visibility:hidden;}
}

しかし、私はそれが使用または推奨されたことを見たことがない。

これに対する現在のベストプラクティスは何ですか？

私のHTMLは次のようになります。

<div class="SFM_TextBox" id="SFM_Block_4_3_B">
  <div class="SFM_Tooltip">Your strategy will be tuned to your business.</div>
</div>

そして、私のCSSは次のようになります。

#SFM_Block_4_3_B {
  background-image: url(images/strategy.png);
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center; }

クラスSFM_Tooltipは、非表示にするクラスです。最初はそのオプションで遊んでいたので、ツールチップと呼ばれますが、既に画像にある同じテキストのツールチップがあると視覚的に気が散ります。

seoaccessibility
2
Sebastian Meine

テキストをHTMLに読み込むのではなく、画像にテキストを配置する理由は何ですか？通常、クロールされたすべてのテキストを訪問者とクローラーに使用する必要があります。ページのクリーンキャッシュを確認し、GWTの「Fetch as Google」ツールを使用して、Googlebotが表示するものを確認します。現在、ページはGooglebotにどのように見えますか？ http://webcache.googleusercontent.com/search?q=cache:http://simplefastmarketing.com/&hl=en&strip=1

ページを見ると、画像の上にマウスを置いたときに持っているテキストボックスではなく、ページのHTMLにすべてのテキストを表示することを強くお勧めします。この方法で絶対に行う必要がある場合は、イメージの代替テキスト属性を使用して、テキストをロードしてください。画像の代替テキストはクロール可能で、画像が壊れて判読できない場合に備えてあります。これはランキング要素としても使用されますが、これは2番目の理想的ではないオプションです。

2
David Garcia

ユーザーに表示されないもの（これまで）は、ランキングのためにGoogleによって考慮されません。 SFM_Tooltipを非表示にすることは解決策ではありません。

あなたの場合の1つのオプションは、画像のファイル名にキーワードを入れることです。 Googleはファイル名の情報を検索します。

別の解決策は、誰かが画像をクリックした場合にテキストを表示することです。このテキストは、すぐにはユーザーに表示されないため、ランキングに対して割引されますが、それでもカウントされます。

2
Jérôme Verstrynge