Schema.orgを使用したブログ:記事VS BlogPosting


23

私は今しばらくウェブサイトを作り直しており、できるだけ早くそれを立ち上げたいと思っていますが、可能であれば最先端にしたいと思います。現在、変更されたテンプレートを使用しています(テンプレートを使用するWebデザイナーtut tutを使用しています...長い話は短いですが、1週間でライブWebサイトを取得し、ビジネス助成金のビジネスプランを作成し、営業して以来、過去2か月までフラットになり、その寒さ!続けて!

デザインは重要ですが、マークアップの使用にも強い関心を持ちたいと思いますが、私が直面している問題はSchema.orgがSOOOO VAGUEであるということです!それは絶対に私の脳を破壊しています。

質問はかなり単純ですが、同時にかなり複雑であり、どれを最もよく考えますか:

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

既にいくつかの研究を行ったことに言及する価値があります。おそらく、Schema.org以外の定義によるブログ投稿と記事の違いは、ブログ投稿は一般に50ワードから400ワードまでの傾向があることです。より詳細で、500ワード以上含まれています。しかし、Schema.orgを見ると、彼らは記事を雑誌や新聞に関連付けています。確かにこれは正しくありません。

また、カテゴリを「キーワード」スキーマとして使用するのは良い考えですか、悪い考えですか?

これは私の現在のマークアップであり、私はおそらくの悪い習慣を指摘し、現在のマークアップを改善する上の任意の追加的な批判やアドバイスを歓迎<p>加えて、あなたがオンラインで表示することができ、ここでは、どのようにGoogleはこれを見てここに

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

編集:

私は現在使用しています:

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

回答:


24

schema.org:記事、ブログ投稿

何かがschema:BlogPostingである場合、schema:Articleでもありませんか?schema:BlogPostingはより具体的なschema:Articleであるため

より具体的なタイプ

  • ブログ投稿
  • ニュース記事
  • 学術論文

したがって、schema:Articleがあり、これらのより具体的なタイプのいずれかがコンテンツに適用されるかどうかを決定できます。そうでない場合は、schema:Articleのままにしてください。

HTML5

  • リンクtitle上の属性は必要ありませんbookmark(同じコンテンツが含まれているため)。

  • 公開日のtime要素を使用できます。

  • 私はそれが代替タイトルやキャッチフレーズだとは思わないので、出版日と著者に小見出しを使用しません(ただし、実際のコンテンツには適切かもしれません)。代わりに、これらをfooter要素に含めます

    footerは通常、誰が書いたかなど、そのセクションに関する情報が含まれています…

  • p要素に画像を含めません。「コンテナ」要素は省略できdivますが、必要な場合はaを使用できます。

  • 「記事全文を読む...」リンクはにはありませんfooternav要素を使用します。これは、セクション要素のメインナビゲーションであるためです(→ article)。

  • キーワードにdl要素(またはul)を使用します

したがって、記事は次のようになります。

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

1
+1これは私が探している種類の情報と提案です!アイデアがあれば、追加のマイクロデータを使用しても構いません!
サイモンヘイター

ブックマークがパーマリンクを定義している間、タイトルが追加情報を提供できるようにすることで、relブックマークが間違っている可能性があると思います。タイトルタグを削除すると、ホバーオーバーが無効になります-少なくともFirefoxでは懸念事項です。
サイモンヘイター

1
複数のキーワードを一目見ただけで許可されているようだ:stackoverflow.com/a/8050088/1892635
サイモン・ヘイター

新しいコードで更新したばかりです。どう思いますか?
サイモンヘイター

@bybe:title属性に関して:はい、ツールチップはありません。ただし、ポイントは次のとおりです。同じコンテンツがリンクアンカーに既に存在するため、ツールチップはここでは必要ありません。title属性の内容は、ここでは新しい情報を提供しません。たとえば、一部のスクリーンリーダーユーザーの場合、同じコンテンツが2回読み取られます。
-unor

4

私の見解と経験では、ブログ投稿スキーマはブログの投稿に使用する必要があります。ブログの投稿に必要なすべてのプロパティが含まれています(ただし、記事のスキーマも同様です)。

検索エンジンがスキーマを介して提供される情報を利用するほど、コンテンツを正しく識別できる(マークアップされる)場合、コンテンツの関連性が高まります。Articlesスキーマを、ニュースや教育機関が発行するコンテンツや、より公式なドキュメントや論文などに関連付けます。

この質問はまたと重複して考えることができ、この1

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.