web-dev-qa-db-fra.com

Schema.org donne à un div un itemprop = "image"?

Je remplace une image par un <div> avec background-image pour la raison de background-size: cover; La page est structurée de la même manière qu'auparavant avec une image juste que "l'image" est maintenant une div.

Est-il logique de donner cet élément à un <div>?

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

CSS n'est reconnu par aucun analyseur de microdonnées à ma connaissance. Vous devrez ajouter une balise META pour spécifier l'image comme ceci:

<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

c'est une bonne utilisation pour une balise meta dans le div contenant pour votre itemscope.

Les deux attributs que vous voulez dans cette balise META sont itemprop et content

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

Vous pouvez vérifier que les méta-informations sont bien lues en les testant ici: http://www.google.com/webmasters/tools/richsnippets

9
Kristian

Pourquoi ne pas spécifier le img dans le contenu et le cacher avec CSS s'il doit être vu dans le DOM mais manipulé visuellement comme un background-image? Garde les balises meta hors de votre body ce qui la rend un peu plus traditionnelle à mes yeux et conserve la fonctionnalité de navigateur par défaut que les utilisateurs anticipent avec des images telles que l'enregistrement d'une image (arborescence de menu sur clic droit) et la mise en évidence du curseur, etc.

<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>

La ressource n'est téléchargée qu'une seule fois car il s'agit du même chemin URL, aucune requête HTTP supplémentaire.

0
darcher