ホーム » Vaster2 »

[Blogger]ほぼコピペでOK サーチコンソール 構造化データのエラーを消す！JSON-LDでマークアップに挑戦[Search Console] [Vaster 1.9 & 2 ]

更新  
公開
当サイトはアフィリエイト広告を使用しています

Blogger Vaster1.9 Vaster2

  • 通信エラーが発生しました。
この記事は最後の更新から3年以上が経過しています
目次

はじめに

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

テンプレートは、Vaster1.9とVaster2で確認しました。他のテンプレートでも参考にしていただければ幸いです。

JSON-LDでマークアップをするのでmicroformats、microdataの部分は削除しました。

素人が検索を頼りに作成したものです。 とりあえずエラーを消すことを目的にしましたので、このやり方が正解かどうかわかりません、いろいろと過不足があると思います。

@contentのところはhttps://schema.orgとhttp://schema.orgどちらでも結果が変わらなかったので、とりあえず httpsのほうにしました。

元になるコードはこちらです。

このコードに画像の数字、ロゴのURLの記述、imageのURLを取得する際<data:post.firstImageUrl/>について若干の修正をしました。（後述）

<script type="application/ld+json">
{ "@context": "https://schema.org",
"@type": "BlogPosting",
"author": {
 "@type": "Person",
 "name": "<data:post.author/>"
 },
"datePublished": "<data:post.timestampISO8601/>",
"headline": "<data:post.title/>",
"image": {
 "@type": "ImageObject",
 "url" : "<data:post.firstImageUrl/>",
 "width": "画像の横のサイズ",
 "height": "画像の縦のサイズ"
 },
"publisher": {
    "@type": "Organization",
    "name": "<data:blog.title />",
    "logo": {
      "@type": "ImageObject",
      "url": "ロゴ画像のURL",
      "width": "ロゴ画像の横のサイズ",
      "height": "ロゴ画像の縦のサイズ"
    }
  },
"dateModified": "<data:post.lastUpdatedISO8601/>",
"mainEntityOfPage": "<data:blog.url/>"
}
</script>

事前に準備しておくもの

  1. ロゴの画像
  2. ロゴの画像をアップロードして得られるURL

1．ロゴの画像は自分の好きなものでいいと思います。自分はロゴ及び画像ジェネレーターで簡単なものを作成しました。

2．画像のアップロード方法はいくつかあるようです。

この方法でやりました。

サイドバーにイメージガジェットを追加し、コンピュータからファイルを選択。１で用意した画像を選んで設置。

配置を保存をクリックしたあと、一度ブログを表示。

ブログ上のロゴの画像を右クリックして画像のURLを取得（保存）。

画像のURLを取得すれば、ブログ上のイメージガジェット（画像）は削除しても大丈夫だと思います。

また、記事作成画面で画像を挿入しても、画像のURLは得られると思います。

author

authorのところのnameは<data:post.author/>で取得できました。

うまくいかない場合は""の間に直接文字を書き込めばいいと思います。

image

urlは<data:post.firstImageUrl/>で取得しました。

おそらくですが、記事にある一番最初の画像（アイキャッチ画像）のことだと思います。

height width

imageのheight widthは記述しなくてもエラーはでないようです。

サイズについて

の値についていろいろと解釈があるようです。（widthは696px以上あればいいとか、数字ではなく"auto"と書くこともできるとかできないとか）

なので、height widthを記述した場合は各自、数字などをいれて下さい。

画像がない場合

記事に画像がない場合、urlにエラーが出るようです。

（<data:post.firstImageUrl/>でurlを取得できない？）

いろいろ試しましたが、この方法でエラーが出なくなりました。（アイキャッチ画像がない場合の画像のurlが必要です）

参考にしたのは、 bloggerのカスタマイズに必須な条件分岐タグifのまとめ

「アイキャッチ画像があるかないかで条件分岐」のところの

<b:if cond='data:post.thumbnailUrl'>
 <img expr:src='data:post,thumbnailUrl'/>
<b:else/>
 <img src='自分で用意したurl'/>
</b:if>

と、Vasterにあったコード

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

上記２つを組み合わせました。

"image": {
 "@type": "ImageObject",
 "url" : "<b:if cond='data:post.firstImageUrl'>
<data:post.firstImageUrl/>
<b:else/>
記事に画像をつかっていない場合、かわりにつかう画像のurl
</b:if> ",
 "width": "700",
 "height": "525"
 },

素人目に見ても、強引というか力業に見えますが、エラーがでなくなったので良しとしました。

他に良さそうな方法があれば書き換えたいと思います。

publisher

nameのところに会社や団体などの組織のことをいれるようなのですが、個人の場合についてはわかりませんでした。

ですので、とりあえずブログのタイトルをいれることにしました。わかったら変更したいと思っています。

ブログのタイトルは<data:blog.title />で取得できました。

うまくいかない場合は""の間に直接文字を書き込めばいいと思います。

logo

用意した画像をアップロードして得られたURLを直接記入しました。

height width

imageのheight widthは記述しなくてもエラーはでないようです。

mainEntityOfPage

<data:blog.homepageUrl/>を記入する例がみられました。ただここを見ると記事のURLを入れればいいのかなと考え、記事のURLを<data:blog.url/>で取得しました。

貼り付ける場所

<メインコンテンツ編集>の下にある

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

を

<div>

に変更してその下に貼り付けました。

こんな感じです。

<メインコンテンツ編集>
<div>
<script type="application/ld+json">
{ "@context": "https://schema.org", 
"@type": "BlogPosting", 
"author": { 
 "@type": "Person",
 "name": "<data:post.author/>"
 },
"datePublished": "<data:post.timestampISO8601/>",
"headline": "<data:post.title/>",
"image": {
 "@type": "ImageObject",
 "url" : "<b:if cond='data:post.firstImageUrl'> 
<data:post.firstImageUrl/> 
<b:else/> 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgXqN3Pv9ke52k9j9fKmOFrcWVdVaQEkQ-3wEm7tE2cayUI4UHnVeYiQe2xDDbMtdEwVJ4AfkZ7dQ56Z3oUyjItYqCVJLaY1Sg8CwHyXyumKcqodO41ekoy2RkR07eNjJtnzj5S28C8Qf/w140-h140-p/m_e_others_501.png 
</b:if> ",
 "width": "700",
 "height": "525"
 },
"publisher": {
    "@type": "Organization",
    "name": "<data:blog.title />",
    "logo": {
      "@type": "ImageObject",
      "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqAryWcqiw9V93G9-lSkpvrn0M5a48_dRmf7_4hm2xwHluBC_UAXXHGILQSdwh5N3P6TeWC33M2cbo7rporgyHu4l5xgxNJVNC90IVl0PpIzbxMb4V7dFP2qW1Rdw7SZS8TIUDtXp1fMm/s272/1464694871296603.png",
      "width": "180",
      "height": "60"
    }
  },
"dateModified": "<data:post.lastUpdatedISO8601/>",
"mainEntityOfPage": "<data:blog.url/>"
}
</script>

もともとあった<!--TOP カテゴリ アーカイブの時-->の上にある

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

は、そのままでも、または削除しても構造化エラーに関して結果は変わりませんでした。

Bloggerの仕様?

JSON-LDの記述場所は</head>や</body>の間のどこでもいいようです。

ですが、実際に</head>や</body>の間に貼り付けると<data:post.timestampISO8601/> などがうまく取得できませんでした。

また、こちらによると<b:loop values='data:posts' var='post'>の下に貼り付ければOKのようです。

Vaster2にはが<b:loop values='data:posts' var='post'>3カ所ありましたが、 一番上の<b:loop values='data:posts' var='post'>直下に設置したところ機能しました。

最後に

エラーを消すだけでよかったら<メインコンテンツ編集>

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

を

<div>

に変更すればエラーそのものは消えると思いますが、それでは心もとないので、できるだけ対応しました。

サーチコンソール・構造化データのエラー対処法について、いままで書いたものをまとめました

Search Consol error（サーチコンソール・構造化データエラー）まとめ

なんとなくの浅い理解

構造化データのマークアップはgoogleなどの検索エンジンに、イイ感じにウェブサイトの情報を伝えること。

JSON-LDとmicrodataの違いはschema.orgの書き方（伝え方）の違い。

microformatsはmicroformats.orgの書き方（伝え方）。

追記：SiteNavigationElementをマークアップしてみました。

[Blogger] Vaster2にJSON-LDでSiteNavigationElementをマークアップしてみました。[JSON-LD] | すたすた式

[Blogger] Vaster2 に JSON-LD で SiteNavigationElement をマークアップしてみました。[JSON-LD] | すたすた式

JSON-LD でSiteNavigationElement をマークアップしてみました。

sutasutashiki.blogspot.com
  • 通信エラーが発生しました&#12290;

検索

サイト内検索に使ってください 🐤

お知らせ

  • 試験的にいいねボタンを実装しました

カテゴリー

Random Picks

すたすた式

Enjoy!👍

QooQ