画像があると仮定しましょう。
<img src="book_thumb.jpg">
そして、Googleや他の検索エンジンでインデックスを作成したいのですが、サムネイルとしてではなく、通常のサイズでインデックスを作成します。したがって、Googleにbook.jpg
ではなくbook_thumb.jpg
を表示するだけで、ユーザーにはサムネイルを表示し続けたいだけです。
また、別の画像へのアンカーを作成したくありません。その本に関する情報へのリンクがすでにあるからです。
<a href="book.html><img src="book_thumb.jpg"></a>
それを許可するimg
属性はありますか?または別のタグ?
以前はlores
attributeがありましたが、逆方向を指していると思います。対応するhires
属性はありません。
ただし、html5 <picture>
要素/アダプティブ画像を掘り下げることもできます。これは、レスポンシブレイアウトで作業している場合にも役立ちます。
<picture alt="screen-image.jpg">
<source src=original-image.jpg media="min-width:1200px">
<source src=screen-image.jpg media="min-width:480px">
<source src=small-image.jpg>
<!-- fallback for browsers without support of picture-element -->
<img src=screen-image.jpg alt="screen-image.jpg">
</picture>
Googleはhtml5の仕様を知っており、それを尊重していると思います。つまり、couldは、ブラウザに他の画像を表示しながら、元の画像を表示する方法です。
Here はw3.orgの仕様であり、 here はadaptineイメージの簡単なチュートリアルです。
PS:次に、picture
要素の周りにリンクをラップします。
構造化データマークアップを使用して、 imageオブジェクトのcontentUrl
を示します。
次に、 Microdata 構文を使用した例を示します。
<div itemscope itemtype="http://schema.org/ImageObject">
<a href="book.jpg" itemprop="contentUrl" itemprop="contentUrl" style="display:none;"></a>
<img src="book_thumb.jpg" itemprop="thumbnailUrl">
</div>
アンカータグが存在している間は、img
タグの親である必要はありません。
構造化データテストツールを使用して構造化データをテストします。
Googleは、ページと画像のサイトマップを送信できる2つの主要なオンライン情報のインデックスを作成します
Googleウェブマスターツールにアクセスし、それらのサイトでサイトを確認してから、Googleで見たい大きな画像やその他の画像へのURLのリストを含むサイトマップを作成します。
次の例に従ってください。
https://support.google.com/webmasters/answer/178636?hl=en
そして交換:
<image:loc>http://example.com/image.jpg</image:loc>
http://example.com/path/to/whatever/pic/to/be/indexed.jpghttp://example.com/path/to/whatever/pic /to/be/indexed.jpg
どこ
http://example.com/path/to/whatever/pic/to/be/indexed.jpg
もちろん、Googleに表示する大きな画像の完全なURLです。
サイトマップが完成したら、ブラウザにURLを入力してアクセスできるようにサーバーにアップロードし、Googleのウェブマスターツールでそのサイトマップを送信します。その後、約48時間ほどで、ウェブマスターツールのサイトマップセクションを再度チェックして、インデックスに登録された大きな画像の数を確認します(公開されます)。
他の検索エンジンにも同様のプロトコルが存在する場合がありますが、Googleのように画像検索をサポートしているかどうかはわかりません。