web-dev-qa-db-ja.com

Googleが大きい画像ではなくサムネイルをインデックスするのはなぜですか？

サムネイルでいっぱいのページがあります。クリックすると、新しいタブでフルサイズの画像が開きます。

問題は、Googleがサムネイル写真のみにインデックスを付け、リンク先の大きな画像を残すことです。

Google画像で検索したときに元の画像に移動するには、サムネイルのalt属性テキストが必要です。

私のコードは次のとおりです。

<div class="thumb">
  <a href="images/wallpaper.jpg">
    <img src="images/wallpaper-small.jpg" target="_blank" alt="wallpaper-description">
  </a>
</div>

そして、これは私のページがどのように機能するかの実例です：

enter image description here


私が間違っていることは何ですか？大きな画像にインデックスを付けてサムネイルを残すために何ができますか？

seogooglehtmlindexing
4
MEGA

問題は、Googleは1つのALTタグしか表示しないため、他の画像には説明がなく、画像検索結果でランク付けされないことです。

ライトボックスを使用する場合は、 HTML5 data-e.g：*をサポートするものをコーディングまたは使用することをお勧めします

<div class="thumb">
    <img src="example.jpg" data-src="example-thumbnail.jpg" alt="example">
</div>

CSSとHTMLのみを使用している場合、は考えられる3つの方法のいずれかを使用できます:

方法1：サムネイルをスクレイプし、大きな画像を親指のサイズに変更します。

<!-- HTML -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
</div>

/* CSS */
.thumbnail img {
    max-width: 200px;
}
.thumbnail img:hover {
    max-width: 100%;
}

Pure CSSライトボックス

方法2：画像ではなく有効なページへのリンク：

<!-- Embedded Small -->
<a href="/path/to/example.html" title="View Image Full Size">
    <img src="example.jpg" alt="thumbnail of example">
</a>

方法3：表示および非表示：

<!-- Both Images -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
    <img src="example-thumbnail.jpg" alt="example thumbnail">
</div>

/* CSS */
.thumbnail img:first-child {
    max-width: 200px;
}
.thumbnail img:last-child {
    max-width: 100%;
    display: none;
}
.thumbnail:hover img:first-child {
    display: none;
}
.thumbnail:hover img:last-child {
    display: block;
}
4
Simon Hayter

画像の場合、構造化データをプロパティとして適用できますImageObject。次のようなもの：tordfa

<div class="thumb" vocab=http://schema.org/ typeof=ImageObject>
<a href="images/wallpaper.jpg" title="wallpaper-description" property=contentUrl><img src='images/wallpaper-small.jpg' alt="wallpaper-description" property=thumbnailUrl></a></div>

tomicrodata

<div class="thumb" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/wallpaper.jpg" title="wallpaper-description" itemprop="contentUrl"><img src='images/wallpaper-small.jpg' alt="wallpaper-description" itemprop='thumbnailUrl'></a>

構造化データのGoogleテスターで確認してください。

2
nikant25

target属性は画像ではなくリンク上にある必要があります。とにかくそれはあなたの問題ではありません。本当の問題は、Googleがあなたの画像に何があるのか​​わからないことです。

これを修正する実際の方法は、画像サイトマップを作成することです。 Googleのドキュメントはこちら 。基本的に、画像内の内容、キャプションをGoogleに伝え、タイトルを付けることができます。これにより、Googleはインデックスをより適切に作成できるだけでなく、検索との関連性を高めることができます。

1
Itai