BloggerのJSON-LDの構造化データのpublisherをブログ自体に合わせる

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableは記事毎にJSON-LDの構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher（公開主）がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。芝生の上でパルクールの側転を始めた男性

A man who began doing parkour cartwheel on the grass by farioff / Pixabay

検索エンジンからのアクセスアップのSEO（検索エンジン最適化）対策にブログのサイト評価が他のBloggerの意味合いへ分散しなくなればもっと役立つかも知れないとも期待される。JSON-LDの構造化データのpublisherはサイト名を入れるのが一般的なマークアップで、すると画像なしの場合の画像についてもサイトに合わせたデザインが取られて記載されるわけだ。BloggerのJSON-LDの構造化データのカスタマイズテーマのHTML編集かバックアップ／復元でマークアップの書き換えを行う。<b:includable id='postMeta' var='post'> <b:include data='post' name='postMetadataJSON'/> </b:includable>デフォルトのソースコードはBloggerのサーバーからincludeタグのnameのpostMetadataJSONで出力されていて変更できない。呼び出される同名のpostMetadataJSONのidのincludableタグを追加するとカスタマイズできるようになる。<b:includable id='postMetadataJSON' var='post'> <script type='application/ld+json'> { "@context": "http://schema.org", "@type": "BlogPosting", "mainEntityOfPage": { "@type": "WebPage", "@id": "<data:post.url.canonical.jsonEscaped/>" }, "headline": "<data:post.title.jsonEscaped/>", "description": "<b:eval expr='(data:post.body snippet { length: 150, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>", "datePublished": "<data:post.date.iso8601.jsonEscaped/>", "dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>", "image": { "@type": "ImageObject", "url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200").jsonEscaped'/>", "height": <b:eval expr='data:post.featuredImage ? 630 : 348'/>, "width": 1200 }, "publisher": { "@type": "Organization", "name": "Blogger", "logo": { "@type": "ImageObject", "url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60", "width": 206, "height": 60 } }, "author": { "@type": "Person", "name": "<data:post.author.name.jsonEscaped/>" } } </script> </b:includable>

参考サイト

postMetadataJSON [GV2]

ブログで使用しているBlogのtypeのwidget内――デフォルトではBlog1のidを持っている――のどこかに追加する。元のpostMetadataJSONのnameのincludeタグを囲んだpostMetaのidのincludableタグの次に置いておくと分かり易いと思う。何もなくても同一のソースコードがBloggerのサーバーから読み込まれているけれどもマークアップを変更するには取り出してテンプレートに追加しておくと当のincludableタグがサーバーから読み込まれるよりも優先されてブログのソースコードに反映するようになる。BloggerのJSON-LDのpublisherのカスタマイズソースコードのpublisherから大括弧（{}）で囲まれた部分（logoについてもう一つの大括弧を含む）のマークアップを変更する。デフォルトのnameが「Blogger」になっているからブログ名に書き換える。"name": "ブログ名",または独自タグの<data:blog.title.jsonEscaped/>を使っても構わない。"name": "<data:blog.title.jsonEscaped/>",独自タグでブログ名を出力するマークアップだと他の設定などからブログ名を変更した場合に併せて自動的に書き換えられるからもっと便利だと思う。publisherのデフォルトのマークアップでは他にロゴの画像URLと縦横のサイズが指定されているから必要に応じて書き換えなくてはならない。ロゴの画像URLはロゴを作成してブログに載せるか、imgurなどの画像URLが取得できるWebサービスを使って取得しなくてはならない。publisherに使われるサイトのロゴのデザインはGoogleのAPM（検索エンジンのキャッシュから高速表示されるマークアップ）の記事向けの推奨だと構造化データのガイドのArticleで細かく指定されている。

jpgかpngかgifのファイル形式

アニメーションを使用しない

名前のロゴ／アイコンではない

背景は白か薄い色にする

サイズは600×60以内のレクタングル（長方形）で、スクウェア（正方形）にしない。そして縦横のどちらかの長さ、600pxか60pxを合わせなくてはならない。ロゴの文字は中揃えに配置して最大で48px以内のサイズにして上下左右の内側の余白は6px以上を取るようにする。Bloggerの公式テーマはAMPに対応してないから不要かも知れないけれどもデフォルトのJSON-LDの構造化データではGoogle推奨の仕方が適用されているようだ。マークアップが検索エンジンに分かり易ければSEO対策に向いていてアクセスアップが可能なはずだから同じように適用したロゴを作成すると良いと思う。"url": "ロゴの画像URL", "width": ロゴの横幅, "height": ロゴの縦幅,BloggerのJSON-LDのpublisherのカスタマイズはnameとlogoを変更すると完了する。他にも項目を追加して良いと思うし、語彙はScheme.orgのpublisherを使うので、そこから調べて必要に応じてさらにJSON-LDの構造化データを詳しく纏められる。サイト内容が検索エンジンに適切に伝わるほどにSEO効果を上げられる。説明文のdescriptionやサイトアドレスのurlなどが一般的に取り入れ易い。"publisher": { "@type": "Organization", "name": "ブログ名", "description": "説明文", "url": "サイトアドレス", "logo": { "@type": "ImageObject", "url": "ロゴの画像URL", "width": ロゴの横幅, "height": ロゴの縦幅 } },マークアップはデフォルト各項目と同じように項目と値をそれぞれに半角二重引用符（""）で囲って半角コロン（:）を使って並置する。画像のサイズなどの数値は半角二重引用符がなくても大丈夫みたいで、Bloggerのソースコードでは使われてないけど、使うのが一般的だろう。項目と値のセットがマークアップの最後――半角大括弧か半角角括弧（[]）で囲まれる――でなければ半角コンマ（,）で、区切って記載する。改行するかどうかはどちらでも構わない。諸々の記号は一つでも抜けるとJSON-LDの構造化データは全てがエラーになって検索エンジンなどに読み込まれなくなるから注意しなくてはならない。カスタマイズする場合はGoogleの構造化データテストツールにかけてマークアップを検証するのが肝心だ。Bloggerブログは記事／追加ページのJSON-LDの構造化データを幾らか加工するだけで、トップやアーカイブなどのインデックスページにも使い回せるようになる。

関連ページ

BloggerブログのJSON-LDの構造化データのSEO対策のためのカスタマイズについて

publisherをブログ自体に変更する方法は同じだから併せて些細な日常では取り入れ始めた。公式テーマではシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行はJSON-LDの構造化データがデフォルトで付いてない。ソースコードは使えるけど、ただし他のMicrodataの構造化データが付いていて語彙がどちらもScheme.orgで被るから外さないと完全に重複する部分が出て来てしまう。もしも変更するならばテンプレートの「itemscope」と「itemtype」と「itemprop」に関連したマークアップを全て削除してから行うべきだろう。最初からエラーが多くて適切にマークアップされてないし、構造化データとしてSEO対策に役立っているかどうかは定かではないMicrodataなので、必要な項目を幾つも修正しなくてはならないよりはいっそJSON-LDに取り替えてしまうのが手早いとも感じる。画像なしの場合の画像のカスタマイズpublisherのロゴの画像と同じようにデフォルトのBloggerのロゴから変更する画像を個別に作成する。そしてブログに載せるか、imgurなどの画像URLが取得できるWebサービスを使って画像URLを取得しなくてはならない。デフォルトのマークアップは縦横のサイズも指定されている。画像ありの場合の画像は1200×630で、投稿から切り出されてJSON-LDの構造化データに使われている。なので画像なしの場合の画像も同じに揃えて作成しておくとバランスが取れるし、カスタマイズもし易い。Googleの記事向けの推奨では横幅1200px以上の画像が指定されていてBloggerのデフォルトのマークアップでも取り入れられている。サイズが1200×630の場合のソースコード"image": { "@type": "ImageObject", "url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "画像なしの場合の画像URL").jsonEscaped'/>". "height": 630, "width": 1200 },※太字の「630」はデフォルトの<b:eval expr='data:post.featuredImage ? 630 : 348'/>から置き換える。画像なしの場合の画像に他のサイズを使う場合は画像ありの場合の画像のサイズとマークアップを区別しなくてはならない。サイズが1200×630ではない場合のソースコード"image": { "@type": "ImageObject", "url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "画像なしの場合の画像URL").jsonEscaped'/>". "height": <b:eval expr='data:post.featuredImage ? 630 : 縦幅'/>, "width": <b:eval expr='data:post.featuredImage ? 1200 : 横幅'/> },※太字の部分の<b:eval expr='data:post.featuredImage ? 1200 : 横幅'/>はデフォルトの「1200」から書き換える。BloggerのデフォルトのJSON-LDの構造化データは記事／追加ページに反映するけど、画像があるかないかを独自タグで振り分けて記載している。ソースコードの内容はデータを演算して出力できるevalを使って三項演算子が画像ありの場合の「data:post.featuredImage」に対して付けられている。すると半角疑問符（?）の前がそうした条件式で、半角コロンの前後が画像ありと画像なし（trueとfalse／条件式に当て嵌まると当て嵌まらない）の場合の値になっている。