Google Blogger で OGP を設定してリンクカードを表示させる方法

X（Twitter）や LINE などでウェブサイトの URL を投稿すると、そのリンク先のページのサムネイル画像、タイトル、説明文が一緒に表示されることがあります。

この表示はリンクカードと呼ばれ、リンクカードを表示するには、リンク先のサイトが OGP（Open Graph Protocol）を設定している必要があります。

シェアされた時のクリック率を上げるためにもできるだけ設定しておきたいですね。

しかし、Google Blogger では OGP の設定ができないわけではないですが、残念ながら管理画面にそのような設定項目が用意されていません。

そこで Blogger で OGP を設定する方法を解説します。

Blogger で OGP を設定するサンプルコード

Blogger で OGP を設定するには、HTML と BloggerXML（Blogger の独自 XML）の基礎知識を要するため、これらを理解している前提で説明します。

これが Blogger の OGP のサンプルコードです。これをブログテーマの XML の head タグ内に追加すると設定できます。


<!-- URL -->
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<!--▽ ページタイトル -->
<b:if cond='data:view.isHomepage'>
  <!-- 条件: トップページ -->
  <meta property='og:title' expr:content='data:blog.title'/>
  <b:elseif cond='data:view.archive.month'/>
  <!-- 条件: 月別アーカイブ -->
  <meta property='og:title' expr:content='data:view.archive.year + " 年 " + data:view.archive.month + " 月の記事｜" + data:blog.title'/>
  <b:elseif cond='data:view.archive.year'/>
  <!-- 条件: 年別アーカイブ -->
  <meta property='og:title' expr:content='data:view.archive.year + " 年の記事｜" + data:blog.title'/>
  <b:elseif cond='data:view.isPost or data:view.isPage'/>
  <!-- 条件: 記事, 固定ページ -->
  <meta property='og:title' expr:content='data:blog.pageName + "｜" + data:blog.title'/>
  <b:elseif cond='data:blog.pageType == "index"'/>
  <!-- 条件: 記事一覧ページ -->
  <meta property='og:title' expr:content='data:blog.title'/>
</b:if>
<!--△ ページタイトル -->
<!--▽ サムネイル画像 -->
<b:with var='width' value='800'>
<b:if cond='data:view.featuredImage'>
  <!-- 条件: 記事・固定ページに画像あり -->
  <meta property='og:image' expr:content='resizeImage(data:view.featuredImage, data:width)'/>
  <b:elseif cond='data:blog.pageType in {"item", "static_page"}'/>
  <!-- 条件: 記事・固定ページに画像なし -->
  <meta property='og:image' expr:content='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgosodmt2LXBJtuN1a2IQYoL99ChiVeRsl477w1NEWwYDFXuW-lfUh7H1Tf7NFK_MG44uox9eYmlOFPA6LTpNK-ZpXfHGyWQ20PA0p2COZBE1d1xHSCxE4BUAoQXbTRKAk8tu2WmoRqe3xifzUyXqxC6BgyX-ZdD4HsoEm4fq8vJbMHUHKN12b__CEg/s1600/no-image.png", data:width)'/>
  <b:elseif cond='data:blog.pageType == "index" or data:view.isArchive'/>
  <!-- 条件: 記事一覧 または アーカイブ -->
  <meta property='og:image' expr:content='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcrHb3z8QT1-HRcfQWMGeNFbYuii3KjArz5_GNUDswulctYbc1RIPKhONIyHhgPu7bNEaAE_Vqcx4bnywZjEJt4uxLu6BZYt2peASNUEbvg09mIaSHy8hxPADPf8hHuhh0F9-225Kj19uom71dGQaPiR1ECi8blIJcf1o92hEqLiOKDcfzyUYMVy2EbU/s1600/DSC00885.JPG", data:width)'/>
</b:if>
</b:with>
<!--△ サムネイル画像 -->
<!-- 検索エンジン向け説明 -->
<meta property='og:description' expr:content='data:view.description'/>
<!-- Twitter カードの画像サイズ -->
<!--## 画像サイズは大に -->
<meta name='twitter:card' content='summary_large_image'/>

赤マーカーはサムネイル未設定の投稿に設定されるサムネイル（代替画像）の URL、青マーカーはトップページなど投稿ページ以外ので設定されるサムネイルの URL です。

これらは私が用意したサンプル画像なので各自変更お願いします。

head タグの「prefix='og: http://ogp.me/ns#'」は無くても OGP が機能するため必須でないようです。

また、サンプルコードを適用したサンプルブログもあります。サンプルブログの URL を X の投稿などに貼るとリンクカードが表示されるかと思います。

Blogger Base Theme

OGP のコードの解説

サンプルコードに登場する「expr:」は属性を Blogger 式（BloggerXML の式）にするもので、「expr:属性名='data:メソッド + "他の文字列"'」のように記述し、出力は「属性名='メソッドの値他の文字列'」のように式の計算結果が属性値、つまりメソッドの値と文字列の結合になります。

OGP のコードのテンプレートはこの形です。

<meta property='設定項目名' content='設定値'/>

OGP に必要な設定項目は以下の 5 つです。

「og:url」...リンクカードのリンク先 URL
「og:title」...リンクカードに表示されるタイトル
「og:image」...リンクカードのサムネイル画像の URL
「og:description」...リンクカードに表示される説明文
「twitter:card」...X のリンクカードのレイアウト

og:url

og:url は「<meta property='og:url' expr:content='data:blog.canonicalUrl'/>」(サンプルコード 2 行目) に記述しています。

「data:blog.canonicalUrl」は今見ているページの URL を出力します。

「data:blog.url」だと ?m=1 など不要なパラメーターが出力されるため canonicalUrl にしています。

og:title

og:title はページの種類によって表示したい内容が異なるため、トップページ、月別アーカイブ、年別アーカイブ、記事・固定ページ、記事一覧ページにそれぞれ条件分岐しています（サンプルコード 4～19 行目）。

ページタイトルの表示形式を変えたい時は content 属性の Blogger 式を各自変更して下さい。

Blogger は、検索結果ページや 404 エラーページでは OGP を表示できないため、それらのページでは og:title を出力しないようにしています。

og:image

og:image は、記事と固定ページでは本文の一番上の画像となり、無ければ赤マーカーの URL の画像となります（サンプルコード 22～32 行目）。

トップページ、アーカイブページ、記事一覧ページでは一律に青マーカーの URL となります。

「<b:with var='width' value='800'>」の value の値はサムネイル画像出力時の横幅 px です。変えたい時は各自変更して下さい。

og:description

og:description は「<meta property='og:description' expr:content='data:view.description'/>」(サンプルコード 36 行目) に記述しています。

「data:view.description」は、投稿の「検索向け説明」が入力されていればその内容を出力し、なければ管理画面の「設定」の「説明」の入力内容を出力します。トップページなど投稿以外のページでもこの「説明」の入力内容が出力します。

twitter:card

twitter:card は「<meta property='twitter:card' content='summary_large_image'/>」(サンプルコード 40 行目) に記述しています。

X でリンクカードの表示とレイアウト設定に必要な設定項目です。

リンクカードのレイアウトは、content 属性を「summary_large_image」にするとサムネイル画像が全面に広がり、「summary」にするとサムネイル画像とテキスト項目が 2 つ横並びになります。

他にも種類はあるようですが、滅多に使わないと思うので省略します。

X リンクカード summary_large_image — 「summary_large_image」のリンクカード

イーロン云々はさておき、この解説が Blogger のカスタマイズのお役に立てば幸いです。