BloggerにOGPを設定する

新しくブログを始めた時、アクセスアップにSNSは不可欠だろう。シェアされた時、その記事がアイキャッチ画像付きでシェアしてくれた人のタイムラインに掲載されればなおよい。それにはOGP（Open Graph Protocol）を設定しておくことが大事だ。さっそくやってみよう。

OGPってなに？
使用するSNSの選定
Twitter Card設定

OGPってなに？

通常記事をフォローすると、Twitter、Facebook、Google+などのタイムラインにその記事のURLしか反映されない。しかしあらかじめOGP設定をしておくと、以下のように画像とディスクリプション付きでタイムラインに表示される。これがOGPだ。

使用するSNSの選定

OGPを設定するにあたり、まずは自身のブログで使用するSNSの選定から。

仕事で運営しているウェブサイトやオフィシャルブログではFacebook、Twitter、Google+でシェアできるように設定しているが、「ウラの裏」ではプライバシー保護のため個人名が表示されるFacebook、Google+にはリンクさせず、Twitter1本で行こうと思う。Google的にはGoogle+の設定をしておいたほうが良いとのだと思うが…。

さっそくTwitterで新規アカウントを作成する。アカウント名は「@uraflt」だ。

アカウントを作成したら、サイドメニューのプロフィール欄にTwitterのシェアボタンを設置する。ボタンはTwitter Publishのサイトにて作成できる。
ページ中央の「Enter a Twitter URL」の窓に自分のTwitterページのURL（自身の場合はhttps://twitter.com/uraflt）を入力しEnter。
その後Twitter Buttonsで「Follow Button」または「Mention Button」を好みで選ぶ。そしてできたhtmlをプロフィールガジェット内に貼りつけるだけだ。

各記事の下部には先日「Bloggerにお問い合わせフォームとプライバシーポリシーを設置」で書いた通り、各SNSボタンを設置した。

これでシェア、フォローの準備が出来た。

Twitter Card設定

OGPを設定するには、各SNSとの連携を設定しなくてはならない。しかし最新のBloggerテーマでは、FacebookとGoogle+についてはこの連携の作業をしなくても、きちんとOGPが反映される。

ちなみにFacebookでOGPが反映されるかどうかを確認するには、Facebookデバッガーを利用するとよい。ログインした状態で反映させたいURLを入力、「デバッグ」ボタンをクリックする。画面中央の「リンクプレビュー」に、記事のタイトル、メタディスクリプション、OG imageが反映されればOKだ。

さて、問題のTwitter Card作成だが、Kuriboさんのブログ「Blogger ブログを Twitter Cards に対応させる方法」を参考にさせて頂いた。TwitterではOGP風の反映をTwitter Cardという。

作業はとっても簡単。ダッシュボードから「テーマ」→「HTMLの編集」を選び、以下のコードを<head>～</head>内に貼りつけるだけだ。
赤字の部分だけ書き換える。先ほど新規アカウント作成にて出来た自分のTwitterユーザー名（自身の場合、https://twitter.com/urafltの”uraflt”部分に@を追加したもの）を入れる。

<meta content='summary' name='twitter:card'/>
<meta content='@uraflt' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

（※Kuriboさんのブログより引用）

貼り付けたらテーマを保存し、ブログを表示してどこも不具合がなければOK。htmlを修正するには、予めhtml全てをコピーしてメモ帳などに貼り付けておくなど、バックアップしておくことが必要だ。

きちんと反映されたかどうかを確認するには、Twitter Card Validatorを利用する。Enter the URL…にブログ記事のアドレスを入力し、Preview Cardボタンをクリック。Facebookデバッガー同様、Card Previewに記事のタイトル、メタディスクリプション、OG imageが反映されればOKだ。

これでTwitterでフォローしてもらう準備が出来た。皆さん、フォローよろしくお願いします。

【お詫び〜 January, 2021】
Google Bloggerで始めたが、この度Wordpressに変更した。
こんなことを書いておいて、Bloggerに関する記事が意味なさなくなってしまうかもしれないことをお許しいただきたい。