web-dev-qa-db-fra.com

Utiliser Schema.org pour bloguer: Article VS BlogPosting

Je refais mon site Web depuis un certain temps et je souhaite le lancer le plus rapidement possible, mais je veux le faire devenir le leader Edge si possible. J'utilise actuellement un modèle modifié (je sais! Concepteur Web utilisant le modèle tut tut… mais ça fait longtemps que j'avais une semaine pour obtenir un site web en direct et pour préparer un plan d'entreprise pour une subvention à l'entreprise et depuis que je travaille, je travaille à plat jusqu’à 2 mois et son chillzor! qui est Nice!). Passer à autre chose!

Bien que la conception soit importante, je souhaite également prendre un vif intérêt pour l'utilisation du balisage, mais le problème que je rencontre est que Schema.org est SOOOO VAGUE! et ça me brise le cerveau.

La question est assez simple mais assez complexe en même temps, laquelle considérez-vous le mieux:

  1. itemtype = "http://schema.org/Article"
  2. itemtype = "http://schema.org/BlogPosting"

Il vaut la peine de mentionner que j’ai déjà fait quelques recherches dans ce domaine et que c’est soi-disant la différence entre un article de blog et un article, par définition en dehors de Schema.org, c’est que les articles de blog sont généralement de 50 à 400 mots, alors que sont plus détaillés et contiennent 500 mots vers le haut. Mais en regardant sur Schema.org, ils associent un article avec des magazines et des journaux, ce n’est sûrement pas vrai?

De plus, est-ce une bonne ou une mauvaise idée d'utiliser des catégories en tant que schéma de "mots-clés"?

Ceci est mon balisage actuel et j'apprécie toute critique ou conseil supplémentaire sur l'amélioration du balisage actuel, peut-être même en soulignant les mauvaises habitudes de <p>, en plus, vous pouvez le voir en ligne - ici et comment Google voit cela ici.

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="Why all of your website designs should be responsive" href="#just-a-test3">Why all of your website designs should be responsive</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-25</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup3.png" alt="markup3"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test3">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="101 Ways of Grabbing Your Audience Less than 0.1secs" href="#just-a-test2">101 Ways of Grabbing Your Audience Less than 0.1secs</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-12</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup2.png" alt="markup2"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test2">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="10 Top Design Tips" href="#just-a-test1">10 Top Design Tips</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-11</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup1.png" alt="markup1"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test1">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

MODIFIER:

J'utilise maintenant:

<article itemscope itemtype="http://schema.org/BlogPosting">

    <header>
        <h1 itemprop="name"><a rel="bookmark" title="Title Description" href="#">Article Header</a></h1>
        <dl>
            <dt>Publish Date:</dt>
            <dd><time itemprop="datePublished">2013-01-25</time></dd>
            <dt>Authors:</dt>
            <dd><a rel="author" href="#">Author Name</a></dd>
        </dl>
    </header>  

    <div class="blog-container">
        <a title="Title Description" class="th" href="#">
            <img width="870" height="400" itemprop="image" alt="Alt Text here" class="post" src="#">
        </a>
        <p itemprop="description">A long but not to long decription</p>
        <a itemprop="url" title="Title Description" href="#" class="creading">Continue Reading</a>
    </div>

    <footer>
        <dl>
            <dt>Filed Under:</dt> 
            <dd itemprop="keywords"><a rel="category" title="Title Description" href="#">Responsive Design</a></dd>
            <dd itemprop="keywords"> <a rel="category" title="View all posts in Website Design" href="#">Website Design</a></dd>
        </dl>
    </footer>

</article>
htmlhtml5microdatamarkupschema.org
21
Simon Hayter

schema.org: Article, BlogPosting

Si quelque chose est un schéma: BlogPosting, c'est un schéma: Article aussi, n'est-ce pas? En tant que schéma: BlogPosting est un plus spécifique schéma: Article :

Types plus spécifiques

  • BlogPosting
  • NouvellesArticle
  • Article savant

Vous avez donc un schéma: Article, et vous pouvez maintenant décider si l’un de ces types plus spécifiques s’applique à votre contenu. Sinon, restez avec schéma: Article.

HTML5

  • Pas besoin de l'attribut title sur le lien bookmark (car il contient le même contenu).

  • Vous pouvez utiliser l'élément time pour les dates de publication.

  • Je n'utiliserais pas de sous-titre pour la date de publication et l'auteur, car je ne pense pas qu'il s'agisse d'un titre alternatif ou d'un slogan (cela pourrait néanmoins être approprié pour votre contenu actuel). Au lieu de cela, je les inclurais dans un footer element :

    footer contient généralement des informations sur sa section, telles que son auteur…

  • Je n'inclurais pas l'image dans un p element . Vous pouvez omettre n'importe quel élément "conteneur" ou utiliser un div si vous en avez besoin.

  • Le lien "Lire l'article complet ..." ne doit pas figurer dans le footer. J'utiliserais l'élément nav , car il s'agit de la navigation principale pour cet élément de sectionnement (→ article).

  • J'utiliserais un dl element (ou un ul) pour les mots-clés.

Donc, un article pourrait ressembler à:

<article itemscope itemtype="http://schema.org/Article">

  <h1 itemprop="name headline"><a rel="bookmark" href="#just-a-test3">Why all of your website designs should be responsive</a></h1> 
  <!-- no need for 'header', but can be added if needed -->

  <footer>
    Publish Date: <time itemprop="datePublished">2013-01-25</time> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a>
    <!-- 'dl' could be used if you use "Author:" instead of "by:" -->
  </footer>

  <img itemprop="image" src="http://www.bybe.net/downloads/markup3.png" alt="markup3">

  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>

  <nav>
    <a itemprop="url" class="more-link" href="#just-a-test3">Read the full article...</a>
  </nav>

  <footer>
    <dl>
      <dt>Filed Under</dt>
      <dd itemprop="keywords"><a href="#">Responsive Design</a></dd>
      <dd itemprop="keywords"><a href="#">Website Design</a></dd>
    </dl>
  </footer>

</article>
23
unor

À mon avis et selon mon expérience, le schéma de publication de blog devrait être utilisé pour les publications sur un blog. Il contient tous les propriétés dont vous pouvez avoir besoin sur un blog (bien que le schéma d’article le soit aussi).

Plus un moteur de recherche utilise les informations fournies via Schema, plus votre contenu devient pertinent s'il est correctement identifié (est balisé). J'associerais le schéma Articles au contenu publié par une organisation de nouvelles ou d'éducation et à d'autres documents ou documents officiels.

Cette question pourrait également être considérée comme un doublon avec celui-ci .

4
zigojacko