web-dev-qa-db-ja.com

Schema.orgはdivにitemprop = "image"を与えますか？

<div>の理由で、画像をbackground-imageでbackground-size: cover;に置き換えています。ページは、「画像」が現在divである画像で以前と同じように構成されています。

そのitempropを<div>に渡すのは理にかなっていますか？

html5css3semantic-websemantic-markupschema.org
30
Wayne's World

CSSは、私が知っているMicrodataパーサーによって認識されません。次のような画像を指定するには、メタタグを追加する必要があります。

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="image" content="bg.jpg"></meta>
  <div style="background-image:url('bg.jpg')"></div>
</div>
49
Shawn Simister

これは、itemscopeを含むdiv内のメタタグの使用に適しています。

そのメタタグに必要な2つの属性は、itempropとcontentです。

<meta itemprop="image" content="/some/url/to/an/image.gif" />

メタ情報が実際に正しく読み取られていることを確認するには、ここでテストしてください。 http://www.google.com/webmasters/tools/richsnippets

9
Kristian

コンテンツでimgを指定し、DOMで表示する必要があるがbackground-imageとして視覚的に操作する必要がある場合、CSSで非表示にしないのはなぜですか？ 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リクエストがないため、一度だけダウンロードされます。

0
darcher