[Blogger]Vaster image height width url 構造化データエラー その7

HTMLを編集します。必ずバックアップを取ってから作業してください。

バックアップの取り方、テンプレートのいじり方を事前にわかっていると後の作業が楽になりますのでサラッと調べておくといいと思います。

初心者が試行錯誤したものです。エラーは消えますが、これが”正しい”コードかどうかは分かりませんので留意してください。 そもそも search consol の構造化データに表示されたエラーは、hentry マークアップ: microformats.org でした。 今回やったことは schema.org についてなので、microformats.org のエラーが消えるかどうかはわかりません。

構造化データテストツールにおいては image,height,width,urlのエラーは消えました。

目次

• 追記
• エラーが増えます
• 対処法
• 考え方
  • ImageObject
  • url

追記

テンプレートVaster1.9,Vaster2において、

<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>

を

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

に変更することによって、imageのエラーは消えます。 height,width,urlも要求されません。

だだこのままだと、記事（投稿）に画像がない場合にはエラーが出るようです。 なので、以下のようにしてエラーを回避しました。 （別途、記事に画像がない場合の画像のurlが必要。画像のurlの位置に記述）

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

の下に

<b:else/>
<meta content='画像のurl' itemprop='image'/>

を追加。

このようにします。

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
<b:else/>
<meta content='画像のurl' itemprop='image'/>

参考サイト bloggerのカスタマイズに必須な条件分岐タグifのまとめ アイキャッチ画像があるかないかで条件分岐のところ

テンプレートVasterについてはこれで問題ないと思いますので、ここから下の記事は参考程度にしてください。 追記おわり

エラーが増えます

今回のエラーは、トップページのみに発生しているようです。1個対処(image)すると、幾つかのエラー(height,width,url)が増えます。うんざりしますが、1個づつ対処していきます。

対処法

Ctrl + Fで

<b:if cond='data:post.firstImageUrl'>

を検索、

<b:if cond='data:post.firstImageUrl'>

と

</b:if>

との間に以下を挿入します

（<meta expr:content='data:post.firstImageUrl' itemprop='image'/>は元々あるコードです）

<span itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
<span itemprop='height' style='display:none;'>150</span>
<span itemprop='width' style='display:none;'>150</span>
<span itemprop='url' style='display:none;’> 
<data:post.firstImageUrl/> 
</span>
</span> 

全体で見るとこんな感じです

<b:if cond='data:post.firstImageUrl'>
<span itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
<span itemprop='height' style='display:none;'>150</span>
<span itemprop='width' style='display:none;'>150</span>
<span itemprop='url' style='display:none;’> 
<data:post.firstImageUrl/>
</span>
</span>
</b:if>

考え方

メッセージを見ると image の  imagetypeの値が無効とのこと。

そこでhttps://schema.org/BlogPosting を見ると、 image はImageObject か URL で記述すればいいことがわかります。

次に、そもそもエラーが出ている場所を探しました。構造化データテストツールのimageのエラーが表示されているところをクリックしてエラーの位置を確認。テンプレートから、どうもコレっぽいと見当をつけました。（自信なし）

はじめに、該当すると思われる

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

を

 <span itemprop='image'>

で囲んでみました。

<span itemprop='image'> <meta expr:content='data:post.firstImageUrl' itemprop='image'/> </span>    

しかしエラーは消えませんでした。

また

<span itemprop='image'>

でいろいろなものを囲んでみましたがエラーは消えませんでした

ImageObject

そこで、ImageObject を使うことに

<span itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> 
<meta expr:content='data:post.firstImageUrl' itemprop='image'/></span>

としたところ、imageのエラーは消えましたが、height,width,url と3つエラーが増えました。

トップページのエラーということで、おそらくはサムネイル画像かな？と見当をつけて、ctrl + f でサムネイルのサイズを調べました。

”トップページ、カテゴリ、アーカイブの記事一覧”の.article-list img にそれっぽいものがあったので、その数値をいれ

style='display:none;

でいれた数値を表示しないようにしました

<span itemprop='height' style='display:none;'>150</span>
<span itemprop='width' style='display:none;'>150</span>

url

このエラーの消し方はいろいろありました。 基本的な考えとしてdata:post.firstImageUrl というのををurl に指定すればいいのではないかと考えました。

やり方1（今回はこれを使いました）

<span itemprop='url' style='display:none;’>

で

 <data:post.firstImageUrl /> 

（ ”最後のスラッシュ / を忘れずに”） を囲む。

<span itemprop='url' style='display:none;’><data:post.firstImageUrl /></span>

やり方2

<data:post.firstImageUrl/>

をいれない

<span itemprop='url' style='display:none;’></span>

やり方3

https://schema.org/URLで入れ子構造にして

<span itemprop='url' itemscope='itemscope' itemtype='https://schema.org/URL' style='display:none;'>
<data:post.firstImageUrl/>
</span>  

やり方4

<data:post.firstImageUrl/>

をいれない

<span itemprop='url' itemscope='itemscope' itemtype='https://schema.org/URL' style='display:none;'>
</span>

でもエラーは消えました。ますます分かりません。

やり方5

元々Vasterのコードにあった

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

の記述方法を真似して

<meta expr:content='data:post.firstImageUrl' itemprop='url'/>

いろいろと理解の範囲外ですがエラーが消えたので良しとしました。