ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

Facebookのいいね!

ブログをFacebookでいいね!してもらった時のタイトル、説明文、写真などは適切ですか。今回はWordPressプラグインを使わないOGP設定についてです。WordPress以外のサイトでも応用できますよ。

ゆめぴょん(@yume_pyon)です。こんちはっ!

同じ内容の新しいバージョン記事があります。そちらも参考にしてみてください。

【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK64 shares

OGPとはブログ記事がFacebookでシェアやいいね!された時に、表示される写…

ソーシャルボタンの設置方法については次の記事も参考にしてください。前者はプラグインを使わず自力で設置する方法、後者はWordPressプラグインを使う方法です。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグインWP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン

あなたは新しいブログ記事の更新をどうやって知らせますか。今回は「WP Socia…

FacebookのOGP設定とは?

Facebookでいいね!や送信(シェア)してもらうと拡散効果もありますが単純にうれしいです。WordPressで作成したブログは標準でもタイトルやURLはシェアされますが、写真や説明文は適切でない場合があります。

それらの情報はあらかじめOGP設定することによりFacebookでシェアする時に参照されます。OGPはWordPressプラグインを利用して簡単に設置できますが、柔軟に設定したいので自分で設置してみます。

ちなみに今回の内容はヘッダーファイルを書き換えるため自己責任でお願いします。ファイルのコピーは取りながら進んで下さい。

Facebook「fb:admins」の取得方法

(2015年3月26日追記)fb:adminsの利用は個人情報をさらす可能性もあるため、今後はapp_idの利用をオススメします。

FacebookのOGP設定で個人情報を守る!adminsをapp_idに変更する方法もFacebookのOGP設定で個人情報を守る!adminsをapp_idに変更する方法も24 shares

FacebookのOGP設定は、SNSでシェアされた時の表示をコントロールできる…

最初にFacebookの「fb:admins」というIDナンバーを取得します。方法はいくつかあるようですが、現時点で一番簡単なのは次の方法です。なおこの方法はいつ使えなくなるかわかりません。その時はググって調べて下さい。

Facebookの自分のタイムラインを開き、プロフィール写真をクリック。写真だけが拡大して表示されますが、その時のURLの最後の方を見て下さい。

「.123456789012345&type=1&theater」となってるピリオドの後15桁の数値が「fb:admins」のIDです。桁数は人によって違うかもしれません。

OGP設置ための準備・おまじない

まずOGP設置の前の準備が必要です。設置方法はHTML5とそれ以外で違います。HTMLファイルの最上部に<!DOCTYPE html>があれば「HTML5」です。

WordPressの場合は管理画面の左メニューの「外観」→「テーマ編集」を選択。右のファイル一覧から「ヘッダー(header.php)」を選択。その中に<!DOCTYPE html>があれば「HTML5」です。

HTML5の場合は、headタグを次の1行に置き換えてください。

HTML5以外の場合は、htmlタグを次の1行に置き換えてください。

下の記事も参考にしてみてください。

【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も

ブログやサイトを作成する時に今も悩ましいのがIE(Internet Explor…

FacebookのOGP設定の設置方法

通常ブログ・サイトでのOGP設置方法(WordPress以外)

HTMLファイルのheadタグの直前に次の内容を記述して下さい。【】で囲んだ内容はあなたのサイトに合わせて必ず書きなおして下さいね!

Facebookシェアした時の情報

WordPressでのFacebookのOGP設置方法

「ヘッダー(header.php)」ファイルの</head>タグの直前に次の内容を挿入。

補足:プラグイン「All in One SEO」を利用してる方へ

WordPressで「All in One SEO」のdescription抜粋を利用してるなら、上のソースコードの8行目の「mb_substr(get_the_excerpt(), 0, 100)」を次の内容に書き換えればOKだと思います。未確認ですが。

設定は以上で完了です。「ファイルを更新」するのを忘れじゅに!最後に確認しましょう。

FacebookのOGP設定の確認方法

ブログやサイトのソースをブラウザから開いてみて、</head>の直前に期待どおり記述されていれば問題ありません。次に進んでください。問題があれば上の設定を確認してみてください。

次にFacebookを開いて、近況欄に自分のブログのURLを書いてみます。期待したとおりのタイトル、説明文、写真が出てくれば成功です。もし以前の情報のままなら更新が必要なので次に進んで下さい。

FacebookのOGP設定のデバッガーでの更新方法

Facebookのデバッガーというサービスを利用して、OGP履歴を更新します。下ページを開いて、入力欄にブログURLを入力しデバッグを押します。すると新しい内容に書き換わります。この作業は全ての記事とページで必要みたいです。

デバッガー – Facebook開発者

以上です。今回のソースコードは次ページをかなり参考にしました。ありがとうございました。私の変更箇所はdescriptionに抜粋を利用してる点、固定ページの画像も利用してる点、localeを設定してる点、コメントを修正してる点など。

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

ちなみにTwitterでのOGP(Twitter Cards)は下の記事を参考にしてください。またブログの更新通知についての参考記事もどうぞ。

ツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよツイッターカード/TwitterCards設定方法!ブログ記事をサムネイル付で共有できるよ28 shares

Twitter Cards(ツイッターカード)を設定すれば、ツイッターでシェアさ…

【WordPressまとめ】ブログ更新情報を速く伝えるための通知方法【WordPressまとめ】ブログ更新情報を速く伝えるための通知方法

ブログの更新情報を伝える機能には、RSSフィード、Ping送信、Pubsubhu…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】縦型SNSソーシャルボタンの自力設置コード!ツイッター,Facebookなど【WordPress】YARPPプラグインでRSSに関連記事を表示してアクセスアップ:次記事»
ページ
↑先頭
ホーム