スキップしてメイン コンテンツに移動

BloggerのデフォルトのOGP設定にtypeとlocaleを追加するSEO対策

BloggerのOGP設定はデフォルトでurlとtitleとdescriptionとimageが出力される。テーマのhtml編集やバックアップ/復元のテーマをダウンロードから確認できるけれどもhead内の独自タグの<b:include data='blog' name='all-head-content'/>にOGP設定のマークアップが含まれている。機械的にブログのソースコードに記載されて主にソーシャルメディアへの共有でブログの内容を表示するために使われる。

BloggerのデフォルトのOGP設定の四項目

<meta content='ページのURL' property='og:url'/>
<meta content='ページのタイトル' property='og:title'/>
<meta content='ページの説明文' property='og:description'/>
<meta content='ページの画像' property='og:image'/>

OGP(Open Graph Protocol/オープングラフプロトコル)自体はFacebookが採用しているメタデータ(RDfaに基づくから構造化データの一種だ)で、ウェブ管理者向けシェア機能ガイドによると他にも色んな項目が幾つも用意されている。

Bloggerのカスタマイズでブログのテンプレートに追加して良いと思うけれどもSEO対策に一般的に役立つ項目としてtypeとlocaleが挙げられる。

Seach Consoleの構造化データにOGP設定のurlとtitleとdescriptionとimageとtypeとlocaleの項目が表示されている

Seach Consoleの検索での見え方の構造化データにOGP設定の項目が含まれていると分かったためだ。つまりGoogle検索はOGP設定をサイト解析に使用しているかも知れない。少なくとも検出しているかぎり、OGP設定がサイト評価に与える影響は否定できないと思う。

検索エンジンにサイト内容を詳しく伝えるほどにキーワードの検索結果で、有利に紹介される可能性が高まるし、OGP設定はサイトのSEO対策として検索エンジンからのアクセスアップに繋がると期待される構造化データの一つなのは明らかなんだ。

FacebookによればOGP設定はurlとtitleとdescriptionとimageの四つが基本の項目で、typeとlocaleの二つが補足の項目になっているからかりに使えばブログの共有にも役立つはずだし、対応する他のソーシャルメディアを含めてブログに取り入れて損はない。

因みにtypeは基本の四項目に追加するとTwitterでもOGP設定を表示できるようになる。

TwitterはTwitterカードのcardを指定しないとOGP設定を使えないけれどもOGP設定のtypeで代替可能なんだ。基本の四項目が揃っていればマークアップは完了するから後は検証ツールでOKを取るだけで、ツイートにサイト内容がスニペット――デザインは標準のSummaryになる――で反映してくれる。

OGP設定が構造化データに検出される条件

Seach Consoleの構造化データで、OGP設定はSchema.org(機械向けの語彙集の一つ)の「spore:url」(因子:URL)から表示されている。サイトのSchema.orgを使った構造化データの直接のマークアップとは違っていて他にもhead内の一部のlinkタグ(feedのURL)やTwitterカードの項目などが含まれていたりもする。なぜかは不明だけれどもGoogleのサイト解析がSchema.orgの構造化データに他のOGP設定などのマークアップも包含的に捉えるのは事実なんだ。

Bloggerブログでは以前はSeach Consoleの構造化データにOGP設定の項目は表示されなかった。

調べると2017年の公式テーマのContempoとSohoとEmporioとNotableで変わっていて何よりもメインの構造化データのマークアップに基づいているようなんだ。

Googleが推奨するJSON-LDが新しく使われているけど、ただしそれだけではOGP設定は構造化データに検出されない。他の所有サイトで同じようにJSON-LDで構造化データを記載しているのにSeach Consoleの構造化データには何も表示されなかった。

考えると大事なのはページのURLがSchema.orgのページ全体のcontextのtypeから主要部のmainEntityや大部分のmainEntityOfPageなどのtypeを入れ子にしてidで示されているかどうかだった。

<script type="application/ld+json"> {
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage,
"@id" "ページのURL"},
(中略)}
</script>

OGP設定が構造化データに検出されるのは他の構造化データの特定のマークアップにかかっていて単独で使ってもSEO対策には役立たない可能性がある。

必要ならばJSON-LDの「@id」でURLを指定するような構造化データのマークアップを行わなくてはならないだろう。

構造化データの他の形式のMicrodataやRDFaやMicroformatsでは親要素のtypeに子要素のtypeを入れ子にしても無理みたいで、Googleの構造化データテストツールにかけると二つに分かれて検出されてしまうからJSON-LDだけが「@id」でのURL指定に有効だと思う。

BloggerのContempoとSohoとEmporioとNotableの新テーマは少なくとも記事/追加ページでは最初から備わっているから何も変えなくて大丈夫なんだ。

現状、JSON-LDの「@id」を使わないとOGP設定はGoogleに検出されないけれども他の検索エンジンは検出するかも知れないし、Googleもサイト解析の仕方が後から変わらないとはかぎらないので、基本の四項目だけではなくて補足の二項目のtypeとlocaleも追加しておくとSEO対策で有利だ。

追記:Bing検索ではOGP設定が独立して構造化データとして認識される――Webマスターツールのマークアップバリデータで表示される――からSEO対策に有効なのは間違いない。

OGP設定のtypeとlocaleのマークアップ

Googleが検出するし、一定の条件を満たすかぎりは明らかにOGP設定が構造化データとしてSEO対策に役立つかも知れないので、サイト評価を上げるべく、項目を少しでも詳しく載せるのが効果的だと感じる。

<meta content='ページの種類' property='og:type'/>
<meta content='ページの言語と国' property='og:locale'/>

OGP設定のtypeとlocaleは入力する文字列が規定されている。前者はOpen Graph参照ドキュメント、後者はローカライズによって二字ずつのISO言語コード国コードの組み合わせから選択できる。

汎用的なtype

webpage
ウェブページ
article
記事

※typeを記述しない場合はwebpageとして扱われる。

日本向けのlocale

ja_JP
日本語と日本

※二つを半角アンダーバー(_)で区切って記載する。

OGP設定のtypeとlocaleの最低限の記述はトップやアーカイブなどのインデックスページにwebpageと記事などの個別ページにarticleのtype、そして日本ではja_JPのlocaleを使うと良いと思う。

インデックスページのtypeと日本のlocaleの場合

<meta content='webpage' property='og:type'/>
<meta content='ja_JP' property='og:locale'/>

記事ページのtypeと日本のlocaleの場合

<meta content='article' property='og:type'/>
<meta content='ja_JP' property='og:locale'/>

FacebookによればOGP設定のtypeを記述しないとwebpageとして扱われるらしいけど、ところがSeach Consoleの構造化データには表示されない。なのでSEO対策のためにはwebpageのtypeも明記してGoogleが認識するように仕向けるのが良いと思う。

Bloggerの独自タグで振り分けるソースコード

インデックスページと記事ページでtypeが異なるので、それぞれのソースコードに振り分けて記載するべきだ。

Bloggerではページ毎にテンプレートのマークアップを振り分ける独自タグがあるので、使ってトップやアーカイブなどのインデックスページにwebpageのtype、記事/追加ページにarticleのtypeが別々に追加したいしたい。

<b:if cond='data:view.isMultipleItems'>
  <meta content='webpage' property='og:type'/>
<else/>
  <meta content='article' property='og:type'/>
</b:if>
  <meta content='ja_JP' property='og:locale'/>

OGP設定のtypeのwebpageとarticleをトップやアーカイブなどのインデックスページと記事/ページで振り分けてlocaleは全ページで共通だから何もしない。

テーマのhtml編集かバックアップ/復元のダウンロードからhead内のどこかに置いておく。OGP設定の基本の四項目が<b:include data='blog' name='all-head-content'/>からデフォルトで出力されるから直後に続けるとソースコードが纏まって分かり易い。記述したらテーマの保存かアップロードで完了する。

GoogleでOGP設定が構造化データとして検出されるとしても他の構造化データが欠かせないし、それ自体の内容は一般的だから大抵は他の構造化データの繰り返しになるだろう。なのでサイト評価を実際に上げるとは殆ど期待できないSEO対策にせよ、検索エンジンにサイト内容を僅かでも多く伝えるためにはなるべくやっておきたいと感じる。

コメント

些細な日常の人気の投稿

Imgurで画像URLと埋め込みコードを取得する方法

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策