web-dev-qa-db-ja.com

itemprop = 'image'マークアップが正しくないのはなぜですか？

私はMicrodataを実験してきましたが、ブログで試してみようと思いました。私が使用していたテンプレートにはすでにマークアップが追加されていました。それは素晴らしくなかったので、できることを修正しました。

運を試してみるために、最新の投稿にマークアップを追加しましたが、Googleの構造化データテストツール（SDTT）はitemprop='image'属性に満足しておらず、その理由はわかりません。

Structured Testing Tool errors

結果ページ 。

このようにデータを構造化したのは、その間のすべてのコードを無視した私の理解です：

<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>
    <a href="2.png" itemprop="url"><img itemprop="image sharedContent" src="2.png" /></a>
    <a href="3.png" itemprop="url"><img itemprop="image sharedContent" src="3.png" /></a>
  </div>
</div>

そして、これは私には正しいようです。 BlogPostingは、 https://schema.org/BlogPosting に従ってプロパティarticleBodyおよびimageを持つことができますが、SDTTに従って：

属性itemtypeの値が無効です。

実際、上記のサンプルコードでSDTTを試​​したところ、検証に失敗しました。

Example code in the SDTT

だから私は明らかに何かが欠けています。何が間違っていますか？

microdataschema.orggoogle-rich-snippets-tool
8
Ken Sharp

schema.org/BlogPosting imageはImageObjectとURLを許可しますが、 GoogleはImageObjectのみを許可します 、したがってエラーが発生します。目的のマークアップは次のとおりです。

<!-- my code -->
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <img src="image.jpg" itemprop="url">
</div>

別の矛盾は schema.org/ImageObjectcontentUrlを推奨しますが、Googleはurlを推奨するため、上記の使用法です。

コメントのコード に応答して、構造はまだ正しくありません。行ごとに説明します。

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

軽微な点ですが、XHTMLを使用する場合を除き、itemscope='itemscope'は間違っています。 itemscopeを使用します（後で行います）。

<!-- your code -->
  <div itemprop='articleBody'>
    <div itemscope itemtype="http://schema.org/ImageObject"/>

ImageObjectはarticleBodyプロパティの子ですが、この方法で関連付けていません。このように、関連付けられたプロパティと関連付けられていないImageObjectを持つarticleBodyがあります。あなたが使用する必要があります

<!-- my code -->
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">

また、この要素には子と終了/>があるため、XHTMLを試行している場合でも、</div>は正しくありません。上記のスニペットに含めたように、>を使用してください。

<!-- your code -->
      <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>

ここでsharedContentは何をしていますか？ sharedContentはCreativeWorkを予期します SocialMediaPostingのプロパティとして使用する場合— ImageObjectのプロパティとしてではなく、imgでも使用しないでください。

次のようにsharedContentプロパティを配置する その他のコードスニペット も間違っています。

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <div itemprop='sharedContent'>
      <div itemscope itemtype="http://schema.org/ImageObject"/>
        …

SharedContentは現在適切な場所にありますが、CreativeWorkである必要があります。構造化データテストツールで示されているように、ImageObjectsは引き続きBlogPostingに関連付けられていません。

以下は正しいコードです。

<!-- my code -->
<div itemscope itemtype="http://schema.org/BlogPosting">
  <div itemprop="articleBody">
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="1.png" itemprop="url"><img itemprop="image" src="1.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="2.png" itemprop="url"><img itemprop="image" src="2.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="3.png" itemprop="url"><img itemprop="image" src="3.png"></a>
    </div>
  </div>
</div>
14
grg