Maximiser les données structurées (Schema.org) dans une page d'artiste
Cela fait très longtemps que j'essaie d'utiliser des microformats, des microdonnées et des améliorations de balisage générales à des fins de référencement. Dernièrement, les données structurées commencent vraiment à "prendre" et je voudrais incontestablement le faire correctement cette fois-ci.
Je crée une page qui affiche le travail d'un artiste (art numérique) et qui contient une image principale, un aperçu de la transparence, ainsi que des mots-clés, une légende, à propos de, etc.
Je montre le code HTML de ma page prototype et je me demande ce que je pourrais faire pour vraiment maximiser cela afin que ce soit un véritable chef-d'œuvre de l'application de données structurées.
J'espère que cela ne va pas à l'encontre de l'esprit de SE, mais je pense que de nombreux utilisateurs comme moi ne comprennent que les bases minimales de cette nouvelle science des données et ne l'utilisent pas pleinement.
Cela étant dit, comment puis-je maximiser ces données structurées qui peuvent s'appliquer à celles de l'art numérique ou de la photographie?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>This is the SEO Title | example.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='/static/css/gecko-bootstrap.css?1b160de18a8e16ad4b1d' rel='stylesheet' />
<link href='/static/css/styles.css' rel='stylesheet' />
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body class="product" id="" >
<div class="">
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="/">example.com</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<p class="navbar-text">
<i class="fa fa-user"></i> leo
</p>
<li>
<a href="/account/settings/"><i class="fa fa-cog"></i> Settings</a>
</li>
<li>
<a id="account_logout" href="/account/logout/"><i class="fa fa-power-off"></i> Log out</a>
</li>
</ul>
<form id="accountLogOutForm" style="display: none;" action="/account/logout/" method="POST">
<input type='hidden' name='csrfmiddlewaretoken' value='G5qPsBb1Ap4Y4Whwpl7Sppx52CdnK3f9' />
</form>
</div>
</div>
</div>
</header>
<div itemscope itemtype="http://schema.org/ImageObject" id="">
<h1 itemprop="name">Orange Man Contractor Pointing Or Presenting Left</h1>
<!--SHOWCASE-->
<div id="showcase">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#preview-1" aria-controls="preview-1" role="tab" data-toggle="tab">
Image
</a>
</li>
<li role="presentation" class="">
<a href="#preview-2" aria-controls="preview-2" role="tab" data-toggle="tab">
Transparent png
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="preview-1">
<img itemprop="representativeOfPage" alt="This is the alt title" height="700" width="364" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-129.jpg" />
</div>
<div role="tabpanel" class="tab-pane fade " id="preview-2">
<img alt="This is the alt title" height="700" width="700" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-130.jpg" />
</div>
</div>
</div>
<!--//SHOWCASE-->
<div class="container">
<h2>Small description h2</h2>
<div itemprop="caption">
Orange man contractor Pointing to left side, presenting an idea, design, product, or object.
</div>
<h3>Long description h2</h3>
<div itemprop="about">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<a itemprop="license"></a>
</div>
<div>
<a itemprop="keywords" href="/stock/keyword/occupation/">occupation</a>
<a itemprop="keywords" href="/stock/keyword/graphic/">graphic</a>
<a itemprop="keywords" href="/stock/keyword/man/">man</a>
<a itemprop="keywords" href="/stock/keyword/manage/">manage</a>
<a itemprop="keywords" href="/stock/keyword/render/">render</a>
<a itemprop="keywords" href="/stock/keyword/3d/">3d</a>
<a itemprop="keywords" href="/stock/keyword/worker/">worker</a>
<a itemprop="keywords" href="/stock/keyword/contractor/">contractor</a>
<a itemprop="keywords" href="/stock/keyword/orange-man/">orange man</a>
<a itemprop="keywords" href="/stock/keyword/person/">person</a>
<a itemprop="keywords" href="/stock/keyword/engineer/">engineer</a>
<a itemprop="keywords" href="/stock/keyword/cute_1/">cute</a>
<a itemprop="keywords" href="/stock/keyword/design/">design</a>
<a itemprop="keywords" href="/stock/keyword/helmet/">helmet</a>
<a itemprop="keywords" href="/stock/keyword/isolated/">isolated</a>
<a itemprop="keywords" href="/stock/keyword/left/">left</a>
<a itemprop="keywords" href="/stock/keyword/mascot/">mascot</a>
<a itemprop="keywords" href="/stock/keyword/construction/">construction</a>
<a itemprop="keywords" href="/stock/keyword/pointing/">Pointing</a>
<a itemprop="keywords" href="/stock/keyword/offer/">offer</a>
<a itemprop="keywords" href="/stock/keyword/communication/">communication</a>
<a itemprop="keywords" href="/stock/keyword/communcating/">communcating</a>
<a itemprop="keywords" href="/stock/keyword/presenting/">presenting</a>
<a itemprop="keywords" href="/stock/keyword/character/">character</a>
<a itemprop="keywords" href="/stock/keyword/pose/">pose</a>
<a itemprop="keywords" href="/stock/keyword/professional/">professional</a>
<a itemprop="keywords" href="/stock/keyword/gesture_1/">Gesture</a>
<a itemprop="keywords" href="/stock/keyword/direction/">direction</a>
<a itemprop="keywords" href="/stock/keyword/cartoon/">cartoon</a>
<a itemprop="keywords" href="/stock/keyword/supervise/">supervise</a>
<a itemprop="keywords" href="/stock/keyword/safety/">safety</a>
<a itemprop="keywords" href="/stock/keyword/direct/">direct</a>
<a itemprop="keywords" href="/stock/keyword/orange/">orange</a>
<a itemprop="keywords" href="/stock/keyword/command/">command</a>
<a itemprop="keywords" href="/stock/keyword/abstract/">abstract</a>
</div>
<hr />
<a title="edit" href="/gecko-admin/edit-images/product-115/">Edit</a>
</div>
</div>
22
<hr />
<footer>
<div class="container">
© 2015 <your company here>
</div>
</footer>
</div>
<script src='/static/js/site.js?1b160de18a8e16ad4b1d'></script>
<script src="/static/pinax/js/theme.js"></script>
</body>
</html>
Peut-être que cet exemple vous aidera
<div itemscope itemtype="http://schema.org/VisualArtwork">
<link itemprop="sameAs" href="http://rdf.freebase.com/rdf/m.0439_q" />
<h1 itemprop="name" lang="fr">La trahison des images </h1>
<p>
A <span itemprop="artform">painting</span> also known as
<span>The Treason of Images</span> or
<span itemprop="alternateName">The Treachery of Images</span>.
</p>
<img itemprop="image" src="http://http://upload.wikimedia.org/wikipedia/en/b/b9/MagrittePipe.jpg" />
<div itemprop="description">
<p>
The painting shows a pipe. Below it, Magritte painted,
<q lang="fr">Ceci n'est pas une pipe.</q>, French for
"This is not a pipe."
</p>
</div>
<ul>
<li>Artist:
<span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<a itemprop="sameAs" href="https://www.freebase.com/m/06h88">
<span itemprop="name">René Magritte</span>
</a>
</span>
</li>
<li>Dimensions:
<span itemprop="width" itemscope itemtype="http://schema.org/Distance">940 mm</span> ×
<span itemprop="height" itemscope itemtype="http://schema.org/Distance">635 mm</span>
</li>
<li>Materials:
<span itemprop="artMedium">oil</span> on <span itemprop="artworkSurface">canvas</span>
</li>
</ul>
</div>
lire la suite sur :
Ajoutez définitivement la propriété http://schema.org/Person à l'artiste (utilisez la propriété author ), y compris en remplissant la url propriété dans http://schema.org/Person avec un lien de média social (google plus ou facebook idéalement).
Je ne vois pas de lien vers des œuvres d'art connexes, des liens connexes peuvent être définis avec les propriétés.
Il n'y a pas non plus de propriété image dans ImageObject.
Une liste complète des propriétés utiles et des exemples peut être trouvée sur http://schema.org/ImageObject - consultez également les propriétés de http://schema.org/CreativeWork = et http://schema.org/Thing (les propriétés de Thing s'appliquent à tout, les propriétés de CreativeWork s'appliquent à ImageObject).
Ces champs sont particulièrement importants:
- gros titre
- image
- date publiée
- thumbnailUrl
- la description
- prénom
- url
- légende
- auteur
Également utile:
- mentions
- relatedArticle - lien vers un article de presse sur les œuvres d'art
- la taille
- largeur
- date de dépôt
Imbrication d'une personne dans ImageObject et définition des propriétés image et author
<div itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="headline">Moonlight in New Orleans</span>
<img src="moonlight.png" alt ="Moonlight in New Orleans" itemprop="image"> by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">J.S. Olson</span>
<a href="http://plus.google.com/5425142" itemprop="url">View Profile</a>
</span>
</div>