BloggerのJSON-LDの構造化データのpublisherをブログ自体に合わせる 結城永人 - 2018年9月20日 (木) 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/条件式に当て嵌まると当て嵌まらない)の場合の値になっている。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た サイトを見ていたら妙な感じがするので、良く見てみるとGoogleサービスで、ログインして右上のプロフィールアイコンが出ているときに風船と紙吹雪が飛んで来ていることに気付いた。 Googleから久し振りに受け取った誕生祝い サマリー|Search Console| Goog...
コメント