「画像」が div である<div>
というbackground-image
理由background-size: cover;
だけで、ページは以前と同じように画像で構成されています。
その itemprop を に与えるのは理にかなってい<div>
ますか?
「画像」が div である<div>
というbackground-image
理由background-size: cover;
だけで、ページは以前と同じように画像で構成されています。
その itemprop を に与えるのは理にかなってい<div>
ますか?
これは、itemscope を含む div 内でメタ タグを使用するのに適しています。
そのメタ タグに必要な 2 つの属性はitemprop
、content
<meta itemprop="image" content="/some/url/to/an/image.gif" />
http://www.google.com/webmasters/tools/richsnippetsでテストして、実際にメタ情報が問題なく読み取られることを確認できます。
img
DOM で表示する必要があるが として視覚的に操作する必要がある場合は、コンテンツで を指定して CSS で非表示にしてみbackground-image
ませんか? 私の目には少し伝統的なものにするだけでなく、画像の保存(右クリックのメニューツリー)やカーソルの強調表示など、ユーザーが期待するデフォルトのブラウザー機能を保持するだけでなく、meta
タグを除外します.body
<div itemscope itemtype="http://schema.org/Article">
<style scoped>
/* I only use scoped to avoid excess classing in this demo.
Read: http://caniuse.com/#feat=style-scoped */
figure
{ position: relative;
background-size: cover;
background-position: center center }
figure > img[itemprop=image]
{ opacity: 0;
position: absolute;
left: 0; top: 0;
width: 100%; height: 100% }
.specific-image
{ background-image: url(/path-to/image.jpg);
width: 300px; height: 150px }
</style>
<figure class="specific-image">
<img itemprop="image" src="/path-to/image.jpg" width="150" height="150" alt="image">
</figure>
</div>
リソースは同じ URL パスであるため、一度だけダウンロードされ、追加の HTTP 要求はありません。