Usando Schema.org para blogs: Artigo VS BlogPosting

23

Estou refazendo meu site há algum tempo e quero iniciá-lo o mais rápido possível, mas quero torná-lo pioneiro, se possível. Atualmente, estou usando um modelo modificado (eu sei! Web designer usando o modelo tut tut… mas para encurtar a história, eu tive uma semana para obter um site ao vivo, além de fazer um plano de negócios para uma concessão de negócios e, desde que estou operando, estou trabalhando até os últimos 2 meses e seu chillzor! o que é bom!). Se movendo!

Embora o design seja importante, também quero ter um grande interesse no uso da marcação, o problema que encontro é que o Schema.org é SOOOO VAGUE! e está absolutamente esmagando meu cérebro.

A questão é bastante simples, mas complexa ao mesmo tempo, qual você considera melhor:

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

Vale ressaltar que eu já fiz alguma pesquisa sobre isso e, supostamente, a diferença entre uma postagem no blog e um artigo por definição fora do Schema.org é que a postagem no blog geralmente tende a estar entre 50 e 400 palavras, enquanto geralmente artigos são mais detalhados e contêm 500 palavras para cima. Mas, olhando para o Schema.org, eles associam um artigo a revistas e jornais, certamente isso não está certo?

Também é uma boa ou má idéia usar categorias como esquema de 'palavras-chave'?

Esta é a minha marcação atual e agradeço qualquer crítica ou conselho adicional sobre como melhorar a marcação atual, talvez até apontando maus hábitos <p>, além disso, você pode visualizá-la on-line aqui e como o Google vê isso aqui .

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

EDITAR:

Agora estou usando:

<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>
Simon Hayter
fonte

Respostas:

24

schema.org: Artigo, BlogPosting

Se algo é um esquema: BlogPosting, é um esquema: artigo também, não é? Como esquema: BlogPosting é um esquema mais específico : Artigo :

Tipos mais específicos

  • BlogPosting
  • Notícias
  • Artigo acadêmico

Portanto, você tem um esquema: Article e agora pode decidir se um desses tipos mais específicos se aplica ao seu conteúdo. Caso contrário, fique com o esquema: artigo.

HTML5

  • Não há necessidade do titleatributo no bookmarklink (pois ele contém o mesmo conteúdo).

  • Você pode usar o timeelemento para as datas de publicação.

  • Eu não usaria um subtítulo para data e autor da publicação, pois não acho que seja um título alternativo ou um slogan (embora possa ser apropriado para o seu conteúdo real). Em vez disso, eu os incluiria em um footerelemento :

    Um footernormalmente contém informações sobre sua seção, como quem a escreveu…

  • Eu não incluiria a imagem em um pelemento . Você pode omitir qualquer elemento "container" ou usar um divse precisar de um.

  • O link "Leia o artigo completo ..." não deve estar no footer. Eu usaria o navelemento , pois é a navegação principal para esse elemento de seção (→ article).

  • Eu usaria um dlelemento (ou a ul) para as palavras-chave.

Portanto, um artigo pode se parecer com:

<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>
unor
fonte
1
+1 é o tipo de informação e sugestões que estou procurando! Não me importo de usar microdados adicionais se as pessoas tiverem alguma idéia!
Simon Hayter
Eu acho que você pode estar errado com o marcador rel, até onde acredito que o título funcione como um passe o mouse sobre permita que informações adicionais sejam fornecidas enquanto o marcador define o link permanente. A remoção da tag title desativa a passagem do mouse - pelo menos no Firefox.
Simon Hayter
1
Parece que várias palavras-chave são permitidas à primeira vista: stackoverflow.com/a/8050088/1892635
Simon Hayter
Acabei de atualizar com um novo código, o que você acha?
Simon Hayter
@bybe: Em relação ao titleatributo: Sim, a dica está faltando. Mas o ponto é: a dica de ferramenta não é necessária aqui, pois o mesmo conteúdo já está presente na âncora do link. O conteúdo do titleatributo não fornece nenhuma informação nova aqui. Por exemplo, para alguns usuários de leitores de tela, o mesmo conteúdo seria lido duas vezes.
unor
4

Na minha opinião e experiência, o esquema de postagem do blog deve ser usado para postagens em um blog. Ele contém todas as propriedades que você pode exigir nas postagens de um blog (embora o esquema do artigo também seja o caso).

Quanto mais um mecanismo de pesquisa utiliza as informações fornecidas por meio do esquema, mais relevante o seu conteúdo se torna, se puder ser identificado corretamente (está marcado). Eu associaria o esquema de artigos a conteúdo publicado por uma organização educacional ou de notícias e artigos como documentação ou documentos oficiais.

Esta questão também pode ser considerada uma duplicata com esta .

zigojacko
fonte