web-dev-qa-db-ja.com

HTML5 + Microdata検証エラー：属性「コンテンツ」は要素「p」で許可されていません

Product Rich Snippet に関するGoogleのドキュメントによると、ショップで製品の在庫をマークしたい場合、次のことを行う必要があります（Microdataを使用）。

<span itemprop="availability" content="in_stock">In stock! Order now!</span>

そして、私は似たようなことをします：

<p class="centered" itemprop="availability" content="in_stock">Produkt dostępny</p>

残念ながら、W3Cバリデーターは次のエラーを報告します。

行569、列73：属性contentは、この時点では要素pで許可されていません。

それで、私のコードやGoogleの何が問題になっていますか？

EDIT：警告もあります：

RDFa Core属性contentは、HTML5 + RDFa 1.1 Liteドキュメントのp要素では許可されていません。代わりに、HTML5 + RDFa 1.1スキーマに対するチェックを検討してください。

しかし、仕様を正しく理解すれば、HTML5は1.1 LiteではなくRDFa 1.1を意味しますか？私のDOCTYPEは<!DOCTYPE HTML>です。

EDIT2：私は今解決策を得ました

問題のコードは正しいHTML5コードではありませんが、 リッチスニペットをテストするためのGoogleのツール によって正しく認識されました。それは私を満足させなかったので、content属性が<meta>タグでのみ許可されている場合、<meta>を使用してみましょう：

<p class="centered">Produkt dostępny</p>
<meta itemprop="availability" content="in_stock"/>

このようにコードは次のとおりです。

  • 明確-meta要素はitemscope要素の子です。
  • HTML5検証ツール で受け入れられ、
  • それでもGoogleのツールによって適切に認識されます。
html5microdatavalidationgoogle-rich-snippets-toolw3c-validation
5
Al W

HTML5 + Microdataでは、 meta要素のみがcontent属性を持つことができます 。

（HTML5 + RDFaでは、すべての要素にcontent属性を設定できます。）

したがって、文字列値「in_stock」を追加し、ページに表示されないようにするには、meta要素を使用するのが正しい選択です。

<meta itemprop="availability" content="in_stock" />

おそらくボキャブラリーData-Vocabulary.orgを使用していましたが、Schema.orgを使用している場合： Schema.orgのavailability property は値としてURIを想定しているため、link要素 代わりに使用する必要があります ：

<link itemprop="availability" href="http://schema.org/InStock" />
2
unor

マイクロデータには、使用できるタグに関する厳格なルールがあります。pタグを使用してitempropを開き、データボキャブラリを指定できますが、ネストされた要素はpタグに含めることはできません。

たとえば、次を使用できます。

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>

そして、電話などの別の要素をpタグに追加する場合、次のように<p>内に別のスパンをネストする必要があります。

  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

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

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>
  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

したがって、あなたの場合、次のようなものを使用します。

<div itemscope itemtype="http://data-vocabulary.org/Product">
    <span itemprop="brand">Brand Name</span> <span itemprop="name">Item Name</span>
    <span itemprop="availability" content="in_stock">In stock! Order now!</span>
</div>
<p class="centered">
    <span itemprop="availability" content="in_stock">Produkt dostępny</p>
</p>

そのため、DIVとPを使用できますが、ほとんどの場合、スパンはネストされ、最初のスパンは閉じられているため、スパンを使用する必要があります。それを説明することを気にしないと理解するのはかなり複雑です。 「 html5 microdataに分割 」をご覧になることを強くお勧めします

0
Simon Hayter