今月は夢の叶え方特集!
やってないと勿体ない!?Facebook OGPの設定
The following two tabs change content below.
ソルティー

塩畑 貴志(ソルティー)ともうします。

中学の頃、完全に記憶喪失になり、普通のレールに乗ることが夢に。しかし、社会人になってからADHDと分かり、組織にうまく染まれず、行き着いたのがフリーランスという道でした。

ブログで大事にしてることは『ブログ』を一つの作品として発信し、どんなに辛いことがあっても見本になれる生き方を見せることです。

どうも、ソルティーです。

 

「シェアする時、なんでタイトルしか出ないの?」

ogpタグ:OGPタグを設定していない場合

という質問をよくいただくんですが、

 

これはFacebookのOGP設定が済んでいないからです!

 

「え?OGP??」という方も多いと思います。

簡単に言うと、Facebookの裏設定のようなもので、この設定をしていることで、FacebookがWordPressの情報を読み取って表示することが可能になるんですね。

 

それでは今回はFacebookのOPGの説明や、設定の仕方を初心者でも分かるように一から十まで丁寧にお伝えしていきます!

 

OGPとは

そもそもOGPとは何なのかというと

OGP(Open Graph Protocol)は、FacebookやTwitterなどのSNS上で、外部サイトの情報を表示するための規格です。

これがきちんと設定されていることで、SNS上で外部サイトのURLがシェアされた時、そのサイト(ページ)の情報が、サムネール画像付きで表示されます。

出典:FacebookのOGP設定を確認する方法

このようOGPを設定するだけでSNSとブログがお互いの情報を読み取ることが可能になります。

図にするとこんな感じ。

Facebook OGP設定:図解

 

OPGを設定することでSNSとの連携が図れるようになり、より正確に意図した情報を伝えることができるようになります。

 

FacebookのOGPって必要なの?

Facebookを使っている方は特にそうですが、これは全員必須の設定です。

なぜかというと、自分がFacebookを使っていなくても、「シェアしたい」と思う人がFacebookにシェアする可能性もあるからです。

 

もし、そこでFacebook OGPの設定がされていないのにシェアされてしまったら…

ogpタグ:OGPタグを設定していない場合

画像もなく質素にシェアされてしまう

 

はい、このようになってしまいます。

こうなってしまうと、画像がないので伝わりにくく、さらに画面の占有率も低いので、クリック率がどうしても低くなってしまうのです。

 

画像だけではなく、タイトルはまだブログのタイトルと同じものが出てくるので良いとしても、ディスクリプションは本文の先頭から100文字程度を読み取って表示してしまいます。

そのため、かなり伝わりにくいディスクリプションになってしまうのです。

 

絶対にFacebook OGPの設定はしておきましょう!

 

Facebook OGP設定を始める前に

WordPressとFacebookを連携するにはちょっと面倒な手順があるのですが、一つ一つ丁寧にこなしていけば大丈夫です。

 

ただし、設定を始める前に前提条件があるので、先に見ておいてください。

 

前提:プライバシーポリシーの作成

Facebook OGP設定:プライバシーポリシーの設定

まず、始める前にプライバシーポリシーのページを作成しておきましょう。

このページがないとFacebookとの連携に必要なOGP設定をライブ状態にできず、使用することができません。

 

ブログとしてもあったほうが良いページなので、絶対に作成しておきましょう。

 

前提:Facebookアカウントの作成

Facebook Developerは、Facebookの開発者向けのアカウントを作成するものです。

つまり、本家Facebookのアカウントを持っていなければ作成できません。

 

Facebookのアカウントを事前に作成しておいてくださいね。

>

 

FacebookDeveloperの登録

app_idを取得するにはFacebook DeveloperというFacebookの開発者向けサービスに登録する必要があります。

 

Facebook OGP設定における必須タグの説明

さて、ここからはFacebook OGP設定で使われる必須タグの説明です。

たくさんの種類があるのですが、かなりマニアックな話な上に、タグはかなり上級者向けです。

 

プラグインを活用して設定していくような初心者は見なくてもOKです。(登録・設定・一般的な使い方にはそんなに関係ありません。)

「登録と設定だけしたい!」という方は、パッと行くボタンで飛ばしてくださいね。

 

OGPの基本属性

Facebook OGPでシェアを使う場合、最低これだけあればOKです。

 

使われているOGP用のタグの詳細はこちらから確認できます。

 

Facebook用OGPタグの設定

基本タグと合わせて必要なのがSNSと連携するためのタグです。

FacebookはApp ID、もしくはAdmin IDと接続しましょう。

 

fb:app_id

fb:app_idはFacebookとの接続をするために必要なIDです。これがないとFacebookにOPGで設定した内容を表示することができません。

 

また、app_idはFacebook Developerに登録しないと取得できないので、注意。

 

もうひとつ、設定する方法にadmin_idがあります。ただし…。

 

fb:admins(オススメしません)

admin_idはFacebook個人に紐付けられているIDです。

しかし、こちらは個人情報が見られてしまう可能性があるので、設定しない方が良いです。

 

もし、Admin IDを調べる方法

まずはこちらにアクセスします。

FacebookのAdmin IDを調べる

 

自分のFacebookのプロフィールページのURLを入力し、[ID番号を探す]のボタンを押しましょう。

Facebook OGP設定:ID番号を探す

 

そうすると自分のAdmin IDが取得できます。

Facebook OGP設定:Admin ID

 

 Admin IDの注意

このようにAdmin IDは調べることが簡単ですが、Facebookは仕様がコロコロ変わってしまうので、その時々によっては取得できないこともあります。

例えば昔はプロフィールのカバー写真、プロフィール写真からAdmin IDを取得できたのですが、今はできなくなっています。

 

また、プロフィールページは誰でもアクセスできる場所なので、Admin IDは誰でも取得できるIDなんですよね。注意してください。

このようにあまりオススメできるものではないので、できる限りapp_idを使うようにしましょう。

 

 

Facebook OGPの設定

Facebook OGP用のIDを取得できたら、WordPressに設定を行います。

この設定を行わないと、WordPressと連携できないので注意してください。

 

方法は大きく分けて3つ。

  1. WordPressのテーマで設定
  2. プラグインを使って設定
  3. 自力で<head>に設定

3はうまく設定できない人も多い上に、まともに動かないことが多いので、1か2にしましょう。

 

All in one SEO Packの場合

All in One SEO Packというプラグインを使っている方の設定方法です。

まずはソーシャル設定を行うために[機能管理]を選択。

Facebook OGP設定:機能管理

 

[Activate]を押し、ソーシャルメディアに色を付けてONにします。

Facebook OGP設定:ソーシャルメディア

 

ソーシャルメディアという項目が増えているので、選択します。

Facebook OGP設定:ソーシャルメディアが追加!

 

下に進むとFacebook App IDと書いてあるところがあるので、設定しましょう。

 Admin IDの場合、Facebook 管理者IDに入力します

Facebook OGP設定:App IDを設定

ちなみに他にもたくさんの設定項目がありますが、最低でもこのApp IDさえ入力しておけばOKです。

 

Yoast SEOの場合

Yoast SEOというプラグインを使っている方の設定方法です。

SEOからソーシャルという項目を選択しましょう。

Facebook OGP設定:ソーシャル設定

 

Facebookという項目を選び、Open Graph メタデータを有効にするをONにします。

Facebook OGP設定:有効化

 

そのまま下に進むとFacebookインサイトと管理という項目にFacebook App IDを入力できる欄があるので入れておきましょう!

Facebook OGP設定:インサイトと管理

 

自力で埋め込む場合

こちらはちょっと難しい<head>内に自力で設定する方法です。記事毎に設定できないので、オススメもしていません。

 オススメしない理由

WordPressで各ページ毎に個別のカスタマイズというのは相当難しくなります。今回はテーマエディターにて編集する方法を書いていますが、個別で設定できない方法です。あくまで参考に…くらいで。

また、ファイルをカスタマイズするのでミスするとページが表示されないなど不具合が起こります。自己責任にて改造してください。

 

ダッシュボード→外観→テーマエディターを選択します。

Facebook OGP設定:テーマエディタ

 

子テーマを設定している場合は親テーマを選んで、[選択]ボタンを押します。

Facebook OGP設定:テーマの選択

 

テーマファイル内のheader.phpを選択します。

Facebook OGP設定:header

 

<head>以下を書きの内容に書き換えて、自分のページの情報を入力します。

 

<head>の部分は書き換えていますが、ここは書き換えなくても正常に動作します。

入力が終わったら[ファイルの更新]を押して完了しましょう。

Facebook OGP設定:OGPタグの設定

 もう一度。この設定はブログ記事毎に設定できないのでオススメしません。

 

OGP設定で気をつけるポイント

1ページごとにOGP設定すること

OGPはシェアしたいページ毎に設定します。

これはOGPというのが『そのページがどんな内容なのか』をシェアした時に伝えるためのタグだからです。

 

今回の場合は、All in One SEO Packプラグインで設定していますが、手順はほとんど同じです。

タイトル、説明文、画像…面倒かもしれませんが、それぞれの記事で個別の設定をしっかりしておきましょう。

Facebook OGP設定:ソーシャル設定

 

テーマによっては設定できない

自力で埋め込む方法でも紹介しましたが、OGPは各ブログ記事で設定することが重要です。

入力する場合はテーマで設定できます。

できない場合は、さきほど紹介したAll in One SEOや、Yoast SEOなどのプラグインを導入しましょう。

 

Facebook OGPがうまく表示されない場合

「あれ?シェアしたのにうまく表示されてない!」

なんて時があります。そんな時は2つのツールを使って確認してみましょう。

 

キャッシュの更新

  • 設定したのにうまく表示されない
  • 更新した内容を反映させたい

こんな時はFacebookデバッガーを使ってみましょう。

Facebookデバッガー

 

OGP設定したい記事のURLを入力し、[デバッグ]を押します。

 このURLはまだFacebookでシェアされていませんと表示された場合

[新しい情報を取得]のボタンを押しましょう。

Facebook OGP設定:デバッグ

 

OGPタグが設定されているにも関わらず「修正が必要な課題」が表示された場合、うまく情報を取得できなかったことが多いので、[もう一度スクレイピング]を押しましょう。

Facebook OGP設定:もう一度スクレイピング

 

画像やタイトルが表示された場合、シェアした際にしっかり表示されます。

Facebook OGP設定:レスポンスコード

 

画像サイズの確認

OGPで設定した画像が変な状態になってしまうという場合にはOGP画像シミュレータを使ってみましょう。

このツールを使うと、OGP設定した画像がどんな見え方になるのか一挙に表示してくれます。

OGP画像シミュレータ

 

使い方はとっても簡単。ドラッグ&ドロップで画像を追加して…

Facebook OGP設定:ドラッグ&ドロップで画像を追加

 

表示を確認するだけです。

Facebook OGP設定:画像の見え方を確認

 

まとめ:ブログを使うなら絶対に設定しておきたい

Facebookを使っていない!という方は多いと思います。

しかし、シェアをする人というのはTwitterに限った話ではありません。

 

その時、魅力を伝えきれないのは非常に勿体ありません。

そして、OGP設定をしているからこそシェアカウントが蓄積され、記事の評価にもつながります。

 

最初の一回やっておけば良いだけなのでぜひ設定してみましょう!

関連コンテンツ

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう