シーサーブログでOGP設定とSNSとの連携

前回OGP設定の必要性について書きましたが、自分の記事がFacebookやTwitterで「いいね!」「シェア」等された時により多くの人にブログを読んでもらえるように準備しておくと効果的です。

という訳で今回はSeesaaブログのOGP設定(Facebook&Twitter)と連携の方法、やり方について紹介していきます。Seesaaブログの場合は結構簡単に設定できると思っていましたが結構色々やる事がありました。

早速説明していきます。まずはFacebookやTwitterの連携の方法からね。

FacebookページやTwitterとの連携

まず自分の「Facebookページ」とか「Twitter」のアカウントを持っている場合には自分のブログと連動させておきます。連携と解除はいつでもできます。

シーサーブログの管理画面から「設定」⇒「外部連携」と進みます。ここから各SNSとの連携ができるのでやっていきましょう。

シーサーOGP-1

Twitterの連携

まずはTwitterとの連携ね。事前に連携したいTwitterアカウントでログインしておきます。外部連携に「Twitterとの連携」と「Facebookとの連携」という項目があるので、まずは「Twitterの認証を行う」をクリック。

シーサーOGP-2

認証画面になるので「連携アプリを認証」をクリック。

シーサーOGP-3

するとシーサーブログに管理画面に戻るので、ブログの記事公開した時にTwitterでも公開するかどうかを選択します。

シーサーOGP-4

その下に「Twitterまとめ投稿」という項目がありますが、これは前日のTwitterでの投稿を自動で投稿する?という設定です。

シーサーOGP-5

「Twitterまとめ投稿」は私は利用した事がないので、「しない」を選択しています。

以上でTwitterの連携は完了。画面の一番下の「保存」をクリックして保存しておきます。

Facebook(個人ページ)もしくはFacebookページとの連携

今度はFacebookの連携。Facebook個人アカウントのページもしくはFacebookページと連動させる事ができます。これもシーサーブログの「外部連携」から「Facebookとの連携」の項目の「Facebookとの認証を行う」をクリック。

シーサーOGP-6

認証ができるとブログの投稿をFacebookにも「投稿する」「投稿しない」が選択できます。それと「投稿先」で「個人のページ」もしくはFacebookページの中からどこに投稿できるか選択する事ができます。

シーサーOGP-7

後は投稿する時のコメント(無くてもOK)を入れて完成です。

シーサーOGP-8

これでFacebookもしくはFacebookページとの連携は完了。画面下の「保存」を忘れずに。

ちなみにTwitterやFacebookの連携をしておくと、新しい記事を作成する時に画面の下にこのような項目が追加されています。

シーサーOGP-9

つまり各記事でそれぞれコメントを入れたり、TwitterやFacebookに投稿「する」、「しない」が切り替えできますよ。

シーサーブログのOGP設定

さて、ようやく本題。シーサーブログの場合のOGPタグの設置とちょっと細かい部分を追加していく必要があるのでそれも設定していきます。

先ほどの連携と同様にシーサーブログの管理画面から「設定」⇒「外部連携」と進み、次の2つの設定をやっておきます。

  • 「OGPタグの追加」という項目で「追加する」にチェック
  • 「OGPの画像を設定」という部分の「ファイル選択」で画像を設定する

シーサーOGP-10

このOGPの画像というのは設定していない場合、FacebookやTwitterではシーサーブログのロゴ?が表示されます。こんな感じ。

シーサーブログOGP-4

この「OGPの画像を設定」で設定した画像というのは、トップページや画像のないページで表示される画像なのね。画像を設定してやるとこんな感じになります。

シーサーブログOGP-3

もちろんトップページ以外(個別記事)で画像を使っている場合にはそれが表示されるようになっています。とりあえず画像まで設定できたら一度画面下の「保存」をしておくと、先ほどの設定項目がこのように変化します。

シーサーOGP-11

一度画像をアップしてから「保存」するとこの項目に「常にこの画像を使用する」と「記事内に投稿した画像があればそれを使用する」という選択ができるようになっているので、ここはお好みで変更して再度「保存」。

一応これだけ設定しておくと基本的な部分はOKですが、念のためもうちょっと追加していきます。

htmlタグの書き換え

これは無くても機能はするのですが、念のために追加しておいた方が良さそうです。

Seesaaブログの場合は「旧システム」と「新デザインシステム」でやり方がちょっと違うのでそれぞれ説明します。旧と新で管理画面の画像も違うのでそれを見たらどちらかは判断できます。

旧デザインシステム(従来のシステム)の場合

旧デザインの場合は「デザイン」⇒「HTML」と進み、適応中のHTMLを選択。

シーサーOGP-17

旧デザインの方で初めてHTMLを編集する方はHTMLのを追加して名前を付けておいて下さい。

見出しタグ-3

「旧デザイン」の場合はHTMLの最初の方にこのような記述があります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

これを次のように書き換え。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

こんな感じになります。

シーサーOGP-19

ここまでできたら一度「保存」しておきましょう。

新デザインシステムの場合

新デザインシステムの場合はSeesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」⇒「HTMLの編集」と進みます。

編集-1

「新デザインシステム」の場合はHTMLの最初の方に「head」という記述があります。

<head>

こいつを下記のように書き換えます。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

変更して保存したらOK。こんな感じになります。

編集-2

TwitterCards(Twitterカード)の認証

上記のTwitterとの連携でTwitterとの連携をした場合にはTwitterCardsの認証をやっておくのがおすすめです。

「TwitterCards」というのはTwitterで自分のブログのURLを投稿した時に「概要を表示」という項目を追加してブログ情報をリッチに表示してくれるやつです。

シーサーOGP-12

この「概要を表示」をクリックするとこんな感じに表示されます。

シーサーOGP-14

TwitterCardを利用する場合に必要なタグは先ほどのOGPタグの追加で既に追加されているので、後はTwitterでの認証。こちらに移動。
Card validator

ページに移動して今設定したブログのURLを入力し、「Preview Card」をクリック。

シーサーOGP-15

以前は「Request Approval」という申請ボタンがあったような気がしましたが今は見当たりません。とりあえず「自分のURL is whitelisted for summary card」と表示が出てくればOKです。

シーサーOGP-16

これでTwitterに自分のブログのURLをTwitterで投稿すると「概要を表示」が表示されるはず(ちょっと時間かかる場合もあるかも)。

FacebookアプリIDを追加する

普通はOGPの設定で「FacebookアプリのID」もしくは「個人アカウントのID」を入れておくのですが、シーサーブログの場合はこれが無くてもエラーは出ない(何で?)。でも一応追加しておいた方がいいような気がします。

fb:admins と fb:app_id は記述しないと表示されないのかしら?と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。

Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.

「fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

参考:FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは? | Cappee Design

という訳でちょっと面倒ですがFacebookアプリIDを取得してIDを追加します。FacebookアプリIDの取得方法と確認方法はこの記事です。
FacebookアプリIDの取得方法と確認方法

アプリIDが取得できたらシーサーブログの管理画面から「デザイン」⇒「HTML」と進みます。

シーサーOGP-17

OGPの設定をしているとHTMLの「head」部分にこのような記述が追加されているはずです。

<% blog.ogp_tag(article_for_ogp) %>

これの直前にでもアプリID用のタグを追加します。

<meta property="fb:app_id" content="この中にID番号">

こんな感じになります。

シーサーOGP-18

OGP設定の確認

最後にFacebookのDebuggerでエラーがでないかをチェックします。
Debugger

調べたいURLを入力して「Debug」をクリック。

シーサーOGP-20

それでもしかするとキャッシュ(以前のデータ)が残っているかもしれないので、「Fetch new scrape information」もクリック。これはキャッシュ(以前のデータ)が残ってたりするので2、3回クリックするといいかも。

シーサーOGP-21

これでエラーや警告(Warnings That Should Be Fixed)が出ていなかったらOK。以上でシーサーブログのOGP設定は終了です。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

シーサーブログでOGP設定とSNSとの連携”に1件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. ピクミン

    いつもありがとうございます。
    しげぞうさま、一つ質問があります。
    今、シーサーブログの新デザインの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”>

    この場合、どうしたらよいでしょうか?
    よろしくお願いします。