今回はSeesaaブログのOGP設定（Facebook＆Twitter）と連携の方法、やり方について紹介していきます。Seesaaブログの場合は結構簡単に設定できると思っていましたが結構色々やる事がありました。
早速説明していきます。まずはFacebookやTwitterの連携の方法からね。
FacebookページやTwitterとの連携
まず自分の「Facebookページ」とか「Twitter」のアカウントを持っている場合には自分のブログと連動させておきます。連携と解除はいつでもできます。
シーサーブログの管理画面から「設定」⇒「外部連携」と進みます。ここから各SNSとの連携ができるのでやっていきましょう。
Twitterの連携
まずはTwitterとの連携ね。事前に連携したいTwitterアカウントでログインしておきます。外部連携に「Twitterとの連携」と「Facebookとの連携」という項目があるので、まずは「Twitterの認証を行う」をクリック。
認証画面になるので「連携アプリを認証」をクリック。
するとシーサーブログに管理画面に戻るので、ブログの記事公開した時にTwitterでも公開するかどうかを選択します。
その下に「Twitterまとめ投稿」という項目がありますが、これは前日のTwitterでの投稿を自動で投稿する？という設定です。
「Twitterまとめ投稿」は私は利用した事がないので、「しない」を選択しています。
以上でTwitterの連携は完了。画面の一番下の「保存」をクリックして保存しておきます。
Facebook（個人ページ）もしくはFacebookページとの連携
今度はFacebookの連携。Facebook個人アカウントのページもしくはFacebookページと連動させる事ができます。これもシーサーブログの「外部連携」から「Facebookとの連携」の項目の「Facebookとの認証を行う」をクリック。
認証ができるとブログの投稿をFacebookにも「投稿する」「投稿しない」が選択できます。それと「投稿先」で「個人のページ」もしくはFacebookページの中からどこに投稿できるか選択する事ができます。
後は投稿する時のコメント（無くてもOK）を入れて完成です。
これでFacebookもしくはFacebookページとの連携は完了。画面下の「保存」を忘れずに。
ちなみにTwitterやFacebookの連携をしておくと、新しい記事を作成する時に画面の下にこのような項目が追加されています。
つまり各記事でそれぞれコメントを入れたり、TwitterやFacebookに投稿「する」、「しない」が切り替えできますよ。
シーサーブログのOGP設定
さて、ようやく本題。シーサーブログの場合のOGPタグの設置とちょっと細かい部分を追加していく必要があるのでそれも設定していきます。
先ほどの連携と同様にシーサーブログの管理画面から「設定」⇒「外部連携」と進み、次の２つの設定をやっておきます。
- 「OGPタグの追加」という項目で「追加する」にチェック
- 「OGPの画像を設定」という部分の「ファイル選択」で画像を設定する
このOGPの画像というのは設定していない場合、FacebookやTwitterではシーサーブログのロゴ？が表示されます。こんな感じ。
この「OGPの画像を設定」で設定した画像というのは、トップページや画像のないページで表示される画像なのね。画像を設定してやるとこんな感じになります。
もちろんトップページ以外（個別記事）で画像を使っている場合にはそれが表示されるようになっています。とりあえず画像まで設定できたら一度画面下の「保存」をしておくと、先ほどの設定項目がこのように変化します。
一度画像をアップしてから「保存」するとこの項目に「常にこの画像を使用する」と「記事内に投稿した画像があればそれを使用する」という選択ができるようになっているので、ここはお好みで変更して再度「保存」。
一応これだけ設定しておくと基本的な部分はOKですが、念のためもうちょっと追加していきます。
htmlタグの書き換え
これは無くても機能はするのですが、念のために追加しておいた方が良さそうです。
Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」⇒「HTMLの編集」と進みます。
HTMLの最初の方に「head」という記述があります。
<head>
こいつを下記のように書き換えます。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
変更して保存したらOK。こんな感じになります。
TwitterCards（Twitterカード）の認証
上記のTwitterとの連携でTwitterとの連携をした場合にはTwitterCardsの認証をやっておくのがおすすめです。
「TwitterCards」というのはTwitterで自分のブログのURLを投稿した時に「概要を表示」という項目を追加してブログ情報をリッチに表示してくれるやつです。
この「概要を表示」をクリックするとこんな感じに表示されます。
TwitterCardを利用する場合に必要なタグは先ほどのOGPタグの追加で既に追加されているので、後はTwitterでの認証。こちらに移動。
⇒Card validator
ページに移動して今設定したブログのURLを入力し、「Preview Card」をクリック。
以前は「Request Approval」という申請ボタンがあったような気がしましたが今は見当たりません。とりあえず「自分のURL is whitelisted for summary card」と表示が出てくればOKです。
これでTwitterに自分のブログのURLをTwitterで投稿すると「概要を表示」が表示されるはず（ちょっと時間かかる場合もあるかも）。
FacebookアプリIDを追加する
普通はOGPの設定で「FacebookアプリのID」もしくは「個人アカウントのID」を入れておくのですが、シーサーブログの場合はこれが無くてもエラーは出ない（何で？）。でも一応追加しておいた方が良さそうです。
という訳でちょっと面倒ですがFacebookアプリIDを取得してIDを追加します。FacebookアプリIDの取得方法と確認方法はこの記事です。
アプリIDが取得できたらシーサーブログの管理画面から「デザイン」⇒「HTML」と進みます。
OGPの設定をしているとHTMLの「head」部分にこのような記述が追加されているはずです。
<% blog.ogp_tag(article_for_ogp) %>
これの直前にでもアプリID用のタグを追加します。
<meta property="fb:app_id" content="この中にID番号">
こんな感じになります。
OGP設定の確認
最後にFacebookのDebuggerでエラーがでないかをチェックします。
調べたいURLを入力して「Debug」をクリック。
それでもしかするとキャッシュ（以前のデータ）が残っているかもしれないので、「Fetch new scrape information」もクリック。これはキャッシュ（以前のデータ）が残ってたりするので２、３回クリックするといいかも。
これでエラーや警告（Warnings That Should Be Fixed）が出ていなかったらOK。以上でシーサーブログのOGP設定は終了です。
コメント
いつもありがとうございます。
しげぞうさま、一つ質問があります。
今、シーサーブログの新デザインのOGP設定をして、FacebookアプリIDを取得してHTMLに入れようとしたのですが
HTMLに
が見当たりません。
ちなみにこれが今の僕のHTMLです。新デザインのシンプルB.ホワイト 右カラムを使ってます。
: : : 1 -%>()
<meta name="description" content=",” />
<meta name="keywords" content="” />
<link rel="stylesheet" href="” />
<link rel="stylesheet" href="/css/user-common.css” />
<link rel="alternate" href="index.rdf” type=”application/rss+xml” title=”RSS” />
<script src="/js/html5shiv.min.js”>
この場合、どうしたらよいでしょうか？
よろしくお願いします。