こんにちは、ミスターフュージョン メディア事業部の山田祐輔です。

早速ですが、自社サイトをFacebookでシェアしたら全然関係ない画像が表示されていたので、FacebookのOGP設定を修正しました。

↓↓ちなみにその時の画像がこちら↓↓

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-15-01-24

これでは、「銭湯のサイトかよ!」と思われてしまうので、きちんと会社のロゴが表示されるように修正した方法をこれからお話していきます。

OGP設定ってなに?

まず、OGP設定をご存知の方もいると思いますが、知らない方のために簡単にご説明します。

OGP設定とは、「オープン・グラフ・プロトコル」の略称の事です。

簡単にいうと、Facebookでシェアされた時に表示される画像のことを指します。

ちなみにこのサイトの「【WEB担当者必見】モバイルファーストインデックス(MFI)の基本的な4つの考え方」という記事をFacebookでシェアするとこんな感じで表示されます!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-06-15

この場合、アイキャッチ画像に設定している画像をFacebookでシェアした時にも使用するように設定されています。

では、今回はプラグインを使わずにOGP設定を行う方法について解説していきます。

プラグインを使わずにFacebookのOGPを設定する方法

1、Facebookコードを取得しよう!

shutterstock_479376418

まず、OGP設定するにあたって「Facebookコード」を取得します。

このFacebookコードは以下のサイトを使うと簡単に調べることができますよ。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-15-53

→ Find your Facebook ID

こちらのサイトに自身(または自社)のFacebookIDを入力していきます。

ちなみに「株式会社ミスターフュージョン」のFacebookページの場合は、「https://www.facebook.com/mrfusionjp/」です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-20-35

入力が完了すると、「Facebookコード」が確認できます!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-23-07

こちらのID番号は後ほど使うので、メモ帳などに控えておきましょう!

2、OGP用のタグをサイトに埋め込む

shutterstock_433368475

次に、サイト内にOGP用のタグを埋め込んでいきます。

※HTML5、HTML5以外でコードの記述方法が異なります。

<参照> [ WP ] OGPとは? WordPressにプラグイン無しで設定する方法

こちらのサイトより、コードを参照させていただきます。

<HTML5以外の場合の記述方法>

<HTML5の場合の記述方法 >

HTML5で構成している場合は<head>内、HTML5以外で構成している場合は<html>内に記述する必要があるようです。

弊社のサイトはHTML5で構成されているので、HTML5の方で記述しました。

<補足>HTML5で構成されているか確認する方法

どこでもいいので、右クリック(Macの方はタップ)します。

項目の中から「ページを検証」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-38-06

すると、ズラーっとページのソースが表示されるので、一番上の記述を確認します。

下記は弊社の自社サイトのソースコードです。(一番上に<!DOCKTYPE html>の記述が確認できます)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-42-54

こちらが上記と違う場合は、HTML5以外で構成されていることになります。

3、OGP用のタグをサイトに埋め込む〜続き〜

shutterstock_399151624

先ほどのHTMLの記述が完了したら、次に<head>内に下記のコードを記載していきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-18-56-23

(外観→テーマの編集→header.php内の<head>〜</head>に挿入)

コードは以下の通りとなります。(先ほどのヨスさんのブログから情報引用

こちらのコードを<head>〜</head>内に埋め込んだら3箇所ほど修正を入れていきます。

コード内の修正箇所

shutterstock_519438235

①fb:adminsのIDを入力

こちらは、先ほどの1の「Facebookコード」で取得したコードを入力します。

②画像が一切ない記事ページで表示させたい「デフォルト画像のURL」

こちらは、画像を設定していない記事ページの場合に表示する画像を設定します。

サイト内に画像が存在する場合は、「メディア」→「ライブラリ」からURLの確認をすることができます。

③ホームとかカテゴリページで出したい画像のURL

こちらは、ホーム画像として表示したい画像のURLを設定します。弊社の場合は、ミスターフュージョンの会社ロゴを設定しています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-17-25-58

4、Facebookデバッグ確認

shutterstock_443885788

3までの設定が終わったら最後にFacebookのデバックの確認を行います。

Facebookのデバッグは下記のサイトから行えます。

→ https://developers.facebook.com/tools/debug/sharing/

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-19-34-59

上記の箇所にURLを入力し、「デバッグ」をクリックします。

すると、下記のような画面になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-19-42-20

表示が違う(前回のまま)場合は、上部の「Scrape Again」で更新してみてください!

※それでも表示が改善されない場合は、タグの設定が間違っているか、もしくは画像に問題がある可能性があります。

5、実際のFacebookのタイムラインで最終確認

shutterstock_421484053

最後に、実際にFacebook上でデバッグ確認します。

投稿ページでURLを設定してみて、画像が正しく表示されているか確認してください!

下記のように「サイトのドメイン」や「記事のURL」を入力してみて、正しく表示されて入ればOKです!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-17-25-58 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-28-17-26-20

まとめ

いかがでしたでしょうか?

今回は、「ワードプレスでプラグインを使わずにFacebookのOGPを設定する方法」について解説しました。

自分自身、OGP設定を行う際、色々なサイトから情報収集して設定を行いました。

今回のOGPの設定で参考にさせていただいたサイトをご紹介します。

[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法

【Web制作】FacebookのOGP設定をプラグインなしで設置する方法

ぜひ、上記のサイトなども参照しながらOGP設定を行っていってくださいね!

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

株式会社ミスターフュージョン メディア事業部所属。「WEB制作」内製化支援.com編集長。「WEB制作」内製化支援.comの記事執筆や毎月、企業のWEB担当者様向けに「WEB担当者育成プログラム」を開催しています。 趣味:ブログを書くこと、映像制作。