すたすた式
Blogger Vaster1.9
Search Consol error（サーチコンソール・構造化データのエラー）まとめ
New JSON-LD ←新しく書きました。JSON-LDをつかって構造化データのエラーに対処しました。こちらの方が簡単かもしれません。
HTMLを編集します。必ずバックアップを取ってから作業してください。
バックアップの取り方、テンプレートのいじり方を事前にわかっていると後の作業が楽になりますのでサラッと調べておくといいと思います。
初心者が試行錯誤したものです。エラーは消えますが、これが”正しい”コードかどうかは分かりませんので留意してください。 そもそも search consol の構造化データに表示されたエラーは、hentry マークアップ: microformats.org でした。 今回やったことは schema.org についてなので、microformats.org のエラーが消えるかどうかはわかりません。
構造化データテストツールにおいては image,height,width,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の位置に記述）
<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>
との間に以下を挿入します
（<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のエラーが表示されているところをクリックしてエラーの位置を確認。テンプレートから、どうもコレっぽいと見当をつけました。（自信なし）
はじめに、該当すると思われる
<span itemprop='image'>
<span itemprop='image'> <meta expr:content='data:post.firstImageUrl' itemprop='image'/> </span>
しかしエラーは消えませんでした。
また
でいろいろなものを囲んでみましたがエラーは消えませんでした
そこで、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>
このエラーの消し方はいろいろありました。 基本的な考えとして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
<span itemprop='url' itemscope='itemscope' itemtype='https://schema.org/URL' style='display:none;'> </span>
やり方5
元々Vasterのコードにあった
の記述方法を真似して
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
いろいろと理解の範囲外ですがエラーが消えたので良しとしました。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿