Bloggerブログで記事のラベルを中心に構造化データのkeywordsとして追加するSEO対策

構造化データにkeywordsを追加してSEO（検索エンジン最適化）対策に効果的かどうかは定かではない。かつてmetaタグのkeywordsにサイト内容と無関係なキーワードを記載したサイトによって検索結果が混乱したという経緯からGoogleなどの主要な検索エンジンはサイトのmetaタグのkeywordsを完全に読み込まなくなってしまっているんだ。SEO対策でサイト内容の他にキーワードを検索エンジンに伝えるように取り計らっても仕様がないかも知れないけれども何かの役に立たないともかぎらないから構造化データのkeywordsを使ってみたいと感じる。metaタグのkeywordsは間違いなく無理だし、使ってもSEO効果は皆無にせよ、構造化データのkeywordsは同じではない。ひょっとしたらGoogleなどの主要な検索エンジンがサイト内容に読み込むか、またはサイト評価に多少とも加味する可能性がある。SEO対策の実験としてどうなるかを調べても良いと思うし、検索エンジンからのアクセスアップを期待しながらブログに新しく取り入れた。二つのサイコロが下の面に反射しながは並んでいる

Dice by Peter Heeling / CC0

大きなアクセスダウンはないし、ペナルティーなどは受けなさそうで、むしろサイト評価は上向きかも知れないし、必ずしも悪くないので、止めずに続けている。

Bloggerで構造化データにkeywordsを追加する方法
新テーマのJSON-LDの構造化データの場合
追加ページでもkeywordsを追加する
インデックスページでkeywordsを追加する
旧テーマのMicrodataの構造化データの場合
metaタグでのkeywordsのマークアップ
記事ページ以外の振り分けのパターン
どこにmetaタグのkeywordsを記載するか

Bloggerで構造化データにkeywordsを追加する方法公式テーマでブログに使われる構造化データは二つに分かれる。新テーマのContempoとSohoとEmporioとNotableはJSON.LDの構造化データが記事／追加ページに付いている。旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行はMicrodataの構造化データが記事／追加ページに付いている。どちらも語彙はSchema.orgが使われていてマークアップの仕方が違うだけなんだ。キーワードを指定するkeywordsの項目に投稿のラベルを追加する方法を中心に二つのテーマで取り上げる。マークアップは最後にGoogleの構造化データテストツールで検証してエラーがないかどうかを確認するべきだ。新テーマのJSON-LDの構造化データの場合テーマのHTML編集かバックアップ／復元からソースコードを変更する。JSON-LDの構造化データは直接的にカスタマイズできないので、所定のincludeタグから呼び出されるincludableタグを全体的に記載しなくてはならない。Blogのtypeのwidget内のpostMetaのidのincludableタグのpostMetadataJSONのnameのincludeタグから呼び出される同名のidのincludableタグを同様のwidget内に新しく配置してカスタマイズを行う。

<b:includable id='postMeta' var='post'>
  <b:include data='post' name='postMetadataJSON'/>
</b: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 },
<b:if cond='data:view.isPost'>"keywords": [<b:loop var='label' values='data:post.labels' index='index'>"<data:label.name.jsonEscaped/>"<b:if cond='data.post.labels.length gte data:index + 2'>, </b:if>],</b:if>
"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>

※太字の部分がデフォルトのpostMetaのidのincludableタグで、他がBloggerのJSON-LDの構造化データを編集するために必要なpostMetadataJSONのidのincludableタグだ。
※帯文字の部分が記事ページの場合にラベルをkeywordsとして追加するソースコードだ。

参考サイト

postMetadataJSON [GV2]

記事ページにラベルを設定しないと中身が空のkeywordsが記載されてしまうので、全ての記事ページに一つ以上のラベルを付けないと少しでも無駄になるのを避けられない。追加ページにはラベルを設定できないけど、しかしkeywordsを指定するのは不可能ではない。追加ページでもkeywordsを追加するサンプルのソースコードのkeywordsを含んだ部分を変更する。

"keywords": [<b:if cond='data:view.isPost'><b:loop var='label' values='data:post.labels' index='index'>"<data:label.name.jsonEscaped/>"<b:if cond='data.post.labels.length gte data:index + 2'>, </b:if><b:elseif cond='data:view.isPage'/>"追加ページのキーワード①", "追加ページのキーワード②", "追加ページのキーワード③"</b:if>],

キーワードの数は必要に応じて変更して構わない。JSON-LDの構造化データのマークアップは項目の値に半角二重引用符（""）を使って複数の場合は半角角括弧（[]）で全体を囲いながら個別に半角コンマ（,）で区切って最後は何も付けないようにする。インデックスページでkeywordsを追加する新テーマのJSON-LDの構造化データはデフォルトで記事／追加ページしかマークアップされないけれども特定のカスタマイズによってトップやアーカイブなどのインデックスページに使えるようにもなるんだ。その場合でもkeywordsを新しく記載できる。記事ページのラベルのようにブログから個別に取り込むわけには行かないから追加ページのように大部分は規定で行わなければならない。とはいえ、アーカイブの日付やラベルページのラベルなどは独自タグで個別に取り込むように対応できる。Bloggerブログはブログ内の検索ページやラベルページにはデフォルトで検索エンジンをブロックするrobots.txtがかかっていて検索避けと等しい状況になっている。Googleなどから読み込まれないわけなので、設定の検索設定の独自のrobots.txtを編集して解除しないかぎり、どんな構造化データを指定してもSEO対策には意味がないと思う。通常の運営ならばインデックスページにkeywordsを指定するのはトップとアーカイブを対象にするだけで十分だろう。

"keywords": [<b:if cond='data:blog.pageName'>"<data:blog.pageName/>", </b:if>"インデックスページのキーワード①", "インデックスページのキーワード②", "インデックスページのキーワード③"],

独自タグの<b:if cond='data:blog.pageName'>"<data:blog.pageName/>", </b:if>のところはアーカイブページで日付をキーワードとして出力するために記載している。他はトップとアーカイブで共通してそれぞれのソースコードに記載される。必要に応じて変更して構わないし、アーカイブページで日付のキーワードが不要ならば当該の独自タグも削除して簡略化できる。ラベルページでは独自タグのところはラベル名が出力されるので、もしもrobots.txtを解除して検索エンジンが読み込むように設定を変更するならばそのままでも良いかも知れない。インデックスページのkeywordsをページ毎に細かく振り分ける方法もある。

"keywords": [<b:if cond='data:view.isHomepage'>トップページ用スペース<b:elseif cond='data:view.isArchive'>アーカイブページ用スペース<b:elseif cond='data:view.isLabelSearch'>ラベル／検索結果ページ用スペース<b:elseif cond='data:view.isSearch''>検索ページ用'スペース</b:if>],

※各スペースにkeywordsのソースコードを記載して使う。個々のスペースにキーワードを記載するとページ毎のJSON-LDの構造データのkeywordsに反映する。追加ページと同じように専用の記述法を使って行う。諸々の記号を少しでも間違えるとkeywords以外の全てのマークアップがエラーになって読み込まれないから注意しなくてはならない。旧テーマのMicrodataの構造化データの場合テーマのHTML編集かバックアップ／復元からソースコードを変更する。Microdataの構造化データはHTMLに付け加えて記載する。Bloggerの記事ページのラベルにはリンクのaタグが付いているからkeywordsを指定するのは簡単だ。itemprop属性で一つずつ対応するように追加するだけで済んでしまう。

<div class='post-figcaption-line post-figcaption-line-2'>
  <span class='post-labels'>
    <b:if cond='data:top.showPostLabels and data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag' itemprop='keywords'><data:label.name.escaped/></a><b:if cond='not data:label.isLast'>,</b:if>
      </b:loop>
    </b:if>
  </span>
</div>

旧テーマはデスクトップとモバイルにソースコードが分かれていてデフォルトでは記事ページのラベルは前者しか表示されないし、ソースコードに記載されない。後者でもラベルを使うためにはそうしたカスタマイズが必要になる。Microdataの構造化データのkeywordsのマークアップは両方のテンプレートで共用できるからさらに編集しなくても大丈夫だ。Blogのtypeのwidget内のpost-figcaption-line-2のclassのdivタグの中のラベルのリンクのaタグに「itemprop='keywords'」を記載すると一つずつ対応するようにテンプレートに反映してくれる。記事ページ以外のトップやアーカイブなどのインデックスページでもラベルが表示されるから同様に指定される。または他のページを除外して記事ページだけにするマークアップも可能だ。リンクのaタグのところを変更する。

<a expr:href='data:label.url' rel='tag'><b:attr cond='data:view.isPost' name='itemprop' value='keywords'><data:label.name.escaped/></a>

ページ毎に属性と値を振り分けてHTMLタグに追加する独自タグのattrを使う。記事ページ以外に個別のkeywordsを追加する場合はブログに何も表示されてないからそれぞれに振り分けながらmetaタグで別途に指定しなくてはならない。metaタグでのkeywordsのマークアップ

<meta itemprop='keywords' content='キーワード'/>

複数の場合はmetaタグを個別に追加する。

<meta itemprop='keywords' content='キーワード①'/><meta itemprop='keywords' content='キーワード②'/><meta itemprop='keywords' content='キーワード③'/>

記事ページ以外の振り分けのパターンブログで追加ページは記事ページにコンテンツとして等しくてインデックスではなくて投稿だから別々に捉えるようにする。インデックスページを一つに振り分ける

<b:if cond='data.view.isMultipleItems'>
トップとアーカイブとラベル／検索結果と検索ページのスペース
</b:if>

インデックスページを個別に振り分ける

<b:if cond='data.view.isHomepage'>
トップページ用のスペース
<b:elseif cond='data.view.isArchive'/>
アーカイブページ用のスペース
<b:elseif cond='data.view.isLabelSearch'/>
ラベル／検索結果ページ用のスペース
<b:else if cond='data.view.isSearch'/>
検索ページ用のスペース
</b:if>

追加ページを振り分ける

<b:if cond='data.view.isPage'/>
追加ページ用のスペース
</b:if>

※それぞれのスペースにkeywordsのソースコードを記載して使う。Bloggerブログはブログ内の検索ページやラベルページにはデフォルトで検索エンジンをブロックするrobots.txtがかかっていて検索避けと等しい状況になっている。Googleなどから読み込まれないわけなので、設定の検索設定の独自のrobots.txtを編集して解除しないかぎり、どんな構造化データを指定してもSEO対策には意味がないと思う。通常の運営ならば記事ページ以外でkeywordsを指定するのはトップとアーカイブのインデックスページと追加ページを対象にするだけで十分だろう。インデックスページ用の振り分けトップとアーカイブを一つに振り分ける

<b:if cond='data:view.isHomepage or data:view.isArchive'>
トップとアーカイブ用のスペース
</b:if>

トップとアーカイブを個別に振り分ける

<b:if cond='data.view.isHomepage'>
トップページ用のスペース
<b:elseif cond='data.view.isArchive'/>
アーカイブページ用のスペース
</b:if>

追加ページを振り分ける

<b:if cond='data.view.isPage'/>
追加ページ用のスペース
</b:if>

※それぞれのスペースにkeywordsのソースコードを記載して使う。アーカイブとラベルページで、日付とラベル名をキーワードに使いたい場合には独自タグのexprでmetaタグに個別の値を出力しなくてはならない。

<meta expr:value='data:blog.pageName' itemprop='keywords'/>

どこにmetaタグのkeywordsを記載するかブログに表示されないので、ソースコードに出力されればデザイン上はどこでも構わないけど、ただしMicrodataの構造化データはitemscopeとitemtypeによってコンテンツの範囲を定めるのが基本的なマークアップなんだ。記事ページのラベルはBlogのtypeの中のBlogPostingのtypeの範囲内に収まっている。後者はブログ投稿、前者はブログを意味するので、記事ページ以外だとインデックスページはBlogのtype、追加ページは記事ページにコンテンツとしては等しいからBlogPostingのtypeに収まるように記載するのが望ましいと考えられる。インデックスページへ記載するソースコード

<b:if cond='data:blog.pageType == "index"'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
    インデックスページ用のmetaタグのkeywordsのソースコード
  </div>
</b:if>

丁度、ブログ名（Blogのname）や説明文（Blogのdescription）を指定するmetaタグのMicrodataがインデックスページに振り分けて記載されているので、keywordsのソースコードも併せて追加し易い。デスクトップとモバイルで共通するから一ヵ所だけ記載すれば両方のテンプレートに反映する。追加ページへ記載するソースコードデスクトップ：postのidのincludable内

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
追加ページ用のmetaタグのkeywordsのソースコード
中略
</div>

モバイル：mobile-postのidのincludable内

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
追加ページ用のmetaタグのkeywordsのソースコード
中略
</div>