すたすた式
Blogger Vaster1.9 Vaster2
HTMLを編集します。必ずバックアップを取ってから作業してください。
テンプレートは、Vaster1.9とVaster2で確認しました。他のテンプレートでも参考にしていただければ幸いです。
JSON-LDでマークアップをするのでmicroformats、microdataの部分は削除しました。
microformats
microdata
素人が検索を頼りに作成したものです。 とりあえずエラーを消すことを目的にしましたので、このやり方が正解かどうかわかりません、いろいろと過不足があると思います。
@contentのところはhttps://schema.orgとhttp://schema.orgどちらでも結果が変わらなかったので、とりあえず httpsのほうにしました。
@content
https://schema.org
http://schema.org
https
元になるコードはこちらです。
このコードに画像の数字、ロゴのURLの記述、imageのURLを取得する際<data:post.firstImageUrl/>について若干の修正をしました。（後述）
<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を取得（保存）。
画像のURLを取得すれば、ブログ上のイメージガジェット（画像）は削除しても大丈夫だと思います。
また、記事作成画面で画像を挿入しても、画像のURLは得られると思います。
authorのところのnameは<data:post.author/>で取得できました。
<data:post.author/>
うまくいかない場合は""の間に直接文字を書き込めばいいと思います。
urlは<data:post.firstImageUrl/>で取得しました。
おそらくですが、記事にある一番最初の画像（アイキャッチ画像）のことだと思います。
imageのheight widthは記述しなくてもエラーはでないようです。
height
width
の値についていろいろと解釈があるようです。（widthは696px以上あればいいとか、数字ではなく"auto"と書くこともできるとかできないとか）
"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" },
素人目に見ても、強引というか力業に見えますが、エラーがでなくなったので良しとしました。
他に良さそうな方法があれば書き換えたいと思います。
nameのところに会社や団体などの組織のことをいれるようなのですが、個人の場合についてはわかりませんでした。
ですので、とりあえずブログのタイトルをいれることにしました。わかったら変更したいと思っています。
ブログのタイトルは<data:blog.title />で取得できました。
<data:blog.title />
用意した画像をアップロードして得られたURLを直接記入しました。
<data:blog.homepageUrl/>を記入する例がみられました。ただここを見ると記事のURLを入れればいいのかなと考え、記事のURLを<data:blog.url/>で取得しました。
<data:blog.homepageUrl/>
<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 カテゴリ アーカイブの時-->の上にある
<!--TOP カテゴリ アーカイブの時-->
は、そのままでも、または削除しても構造化エラーに関して結果は変わりませんでした。
JSON-LDの記述場所は</head>や</body>の間のどこでもいいようです。
</head>
</body>
ですが、実際に</head>や</body>の間に貼り付けると<data:post.timestampISO8601/> などがうまく取得できませんでした。
<data:post.timestampISO8601/>
また、こちらによると<b:loop values='data:posts' var='post'>の下に貼り付ければOKのようです。
<b:loop values='data:posts' var='post'>
Vaster2にはが<b:loop values='data:posts' var='post'>3カ所ありましたが、 一番上の<b:loop values='data:posts' var='post'>直下に設置したところ機能しました。
エラーを消すだけでよかったら<メインコンテンツ編集>
に変更すればエラーそのものは消えると思いますが、それでは心もとないので、できるだけ対応しました。
Search Consol error（サーチコンソール・構造化データエラー）まとめ
構造化データのマークアップはgoogleなどの検索エンジンに、イイ感じにウェブサイトの情報を伝えること。
JSON-LDとmicrodataの違いはschema.orgの書き方（伝え方）の違い。
microformatsはmicroformats.orgの書き方（伝え方）。
[Blogger] Vaster2にJSON-LDでSiteNavigationElementをマークアップしてみました。[JSON-LD] | すたすた式
[Blogger] Vaster2 に JSON-LD で SiteNavigationElement をマークアップしてみました。[JSON-LD] | すたすた式
JSON-LD でSiteNavigationElement をマークアップしてみました。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿