12

私の目標は、HTML マイクロデータを使用してブログ投稿を引用することです。

次の引用のマークアップを改善するにはどうすればよいですか?

HTML5 標準で適切に機能し、現在のブラウザーで適切にレンダリングされ、検索エンジンで適切に解析される結果を生成するために、構文とセマンティクスの改善を求めています。

この質問に対する報奨金は、専門家のアドバイスとガイダンスです。私の調査では多くの意見やスニペットが得られているため、明確な回答、完全なサンプル、および正規のドキュメントを探しています。

これは進行中の作業であり、その正確性についてアドバイスを求めています。

  1. <div class="citation">すべてを包むために使用します。

  2. とを使用<article>して、ネストされた情報を含む投稿情報をラップします。itemscopeBlogPost

  3. と を使用<header>し<h1 itemprop="headline">て、投稿名のリンクをラップします。

  4. <cite>投稿名をラップするために使用します。

  5. <footer>著者情報とブログ情報をラップするために使用します。

  6. <address>著者のリンクと名前をラップするために使用します。

  7. rel="author"著者名へのリンクに注釈を付けるために使用します。

  8. itemprop="isPartOf"投稿をブログに接続するために使用します。

これは進行中の HTML ソースです。

<!-- Hello World authored by Alice posted on Bob's blog -->
<div class="citation">
  <article itemscope itemtype="http://schema.org/BlogPosting">
    <header>
      <h1 itemprop="headline">
        <a itemprop="url" href="…">
          <cite itemprop="name">Hello World</cite>
        </a>
      </h1>
    </header>
    <footer>
      authored by
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <address>
          <a itemprop="url" rel="author" href="…">
            <span itemprop="name">Alice</span>
          </a>
        </address>
      </span>
      posted on
      <span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
        <a itemprop="url" href="…">
          <span itemprop="name">Bob's blog</span>
        </a>
      </span>
    </footer>
  </article>
</div>

これまでの関連メモ:

  • <cite>タグ W3 リファレンスは、タグが「フレーズ レベル」であるため、ブロック div ではなくインライン スパンのように機能すると述べています。しかし、<article>タグは<h1>, <header>,を使用することでメリットがあるよう<footer>です。私が知る限り、この仕様では、<cite>to wrapを使用して記事を引用するための解決策は提供されていません<article>。これに対する解決策または回避策はありますか? (進行中の作業は、を使用してこれをごまかしています<div class="citation">)

  • <address>タグ W3 リファレンスには、「アドレス要素は、実際に関連する連絡先情報でない限り、任意のアドレスを表すために使用してはならない」という内容が記載されています。私が知る限り、この仕様では、記事の連絡先情報とは異なり、記事の著者の URL と名前をマークするための解決策が提供されていません。これに対する解決策または回避策はありますか? (進行中の作業では、作成<address>者の URL と名前を使用してこれをごまかしています)

コメントで質問してください。詳細がわかり次第、この投稿を更新します。

4

1 に答える 1

11

あなたの例を見ずに、ブログ投稿へのリンクのリスト（OP's context ）にどのマークアップを使用するかを尋ねられたら、次のようなものを使用します。

<body itemscope itemtype="http://schema.org/WebPage">

<ul>
  <li>
    <cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">
      <a href="…" itemprop="url" rel="external"><span itemprop="name headline">Hello World</span></a>, 
      authored by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><a href="…" itemprop="url" rel="external"><span itemprop="name">Alice</span></a></span>,
      posted on <span itemprop="isPartOf" itemscope itemtype="http://schema.org/CreativeWork"><a href="…" itemprop="url" rel="external"><span itemprop="name">Bob’s blog</span></a></span>.
    </cite>
  </li>
  <li>
    <cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">…&lt;/cite>
  </li>
</ul>

</body>

あなたの例のようにsectioning content element を使用するarticleことは確かに可能ですが、おそらく珍しいことです (ユースケースを正しく理解している場合):articleあなたがあなたのケースに望むもの。(たとえば、 HTML5 Outlinerでアウトラインを確認できます。)

セクショニング コンテンツ要素が最良の選択ではない可能性があるもう 1 つの兆候:article実際の「メイン」コンテンツが含まれていない。簡単に言えば、セクショニング コンテンツ要素のメイン コンテンツは、そのメタデータを削除することによって決定できます: 、、headerおよびfooter要素address。(これは明示的に指定されたものではありませんが、Sectionsの定義に従います。)

ただし、このコンテンツがないことは間違いではありません。そして、ブログの投稿からスニペットを引用することを簡単に想像できます (そして、おそらくあなたはそうするつもりです) (このケースを検索結果エントリに似たものにします)。その場合、次のようになります:

<article>
  <header></header>
  <blockquote></blockquote> <!-- the non-metadata part of the article -->
  <footer></footer>
</article>

さらに、あなたが を使用したいと仮定しますarticle。

HTML5 に関する注意事項:

  • 意味的には、ラッピングdivは必要ありません。citationクラスをarticle直接追加できます。

  • 要素に見出し要素のみが含まれている場合、要素はオプションです(headerこの要素は、ヘッダーが見出し要素以上で構成されている場合に意味があります)。しかし、もちろん持っていることは悪いことではありません。

  • a要素に要素citeを含めることをお勧めします(仕様の 5 番目の例と同様)。

  • 要素にはフレージング コンテンツspanのみを含めることができるため、子としては許可されません。address

  • このaddress要素は、連絡先情報が含まれている場合にのみ使用する必要があります。したがって、この要素が適切かどうかは、リンクされたページで何が利用できるかによって異なります。連絡先フォームの場合は、はい。作成されたブログ投稿のリストである場合は、いいえ。

  • authorリンク タイプは、article要素の作成者に関する情報を提供するために定義されているため、適切ではない可能性があります。しかし、厳密に言えば、あなたは作者です。articleがブログ投稿の作成者の実際のコンテンツのみで構成される場合は、authorリンク タイプを使用するのが適切です。しかし、あなたの場合、あなたはコンテンツを書いています（「投稿者」、「投稿者」）。

  • すべての外部リンクにexternalリンク タイプを使用することをお勧めします。

Microdata に関する注意事項:

あなたの例を挙げると、これは次のようになります：

<body itemscope itemtype="http://schema.org/WebPage">

<article itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting" class="citation">
    <header>
      <h1>
          <cite itemprop="headline name"><a itemprop="url" href="…" rel="external">Hello World</a></cite>
      </h1>
    </header>
    <footer>
      authored by
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
          <a itemprop="url" href="…" rel="external"><span itemprop="name">Alice</span></a>
      </span>
      posted on
      <span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
        <a itemprop="url" href="…" rel="external"><span itemprop="name">Bob’s blog</span></a>
      </span>
    </footer>
</article>

</body>

(すべてのことを考慮して、私はまだsectionなしのバリアントを好みます。)

于 2014-12-04T15:04:44.060 に答える