2016年版:WordPressでOGPを正しく簡単に設定する方法 [プラグイン不使用]

      2016/09/12

eye_wp

今日はWordPressで作ったサイトにFacebookのOGPを設定する方法をご紹介します。

プラグインで対応している方も多いと思いますが、なるべくプラグインを使わないでサイトを軽くするために手動で設定していきましょう。

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓

STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓

STINGER7:親テーマの任意のファイルを子テーマで編集する方法

OGPとは?

まずはお約束の「OGP」についての簡単な説明を少し。
もう見飽きた!って人は飛ばしてください(笑)

OGPは「Open Graph Protocol」を略した言葉です。
直訳するとOpen(公開された)Graph(グラフ・データを)Protocol(送受信するためのルール)って感じでしょうか。

WEBサイトの内容をコンピューターに正しく伝えることで、FacebookやTwitterなどのSNSでシェアされた時に意図した通りに表示できるようになります。

OGPを設定するメリット

【メリット1】シェアされた時の見た目が良くなる

例えば記事がFacebookでシェアされた時、OGPを設定していないとこんな感じで表示されます↓

20160225a

記事中の画像の中から適当なやつが使われたり、説明文もなんか変ですね。
これが正しくOGPの設定を行った後はこうなります↓

20160225b3

画像も説明文もキレイに表示できてますね!
狙った画像や説明文を掲載できるので、見た人に内容が伝わりやすくなります。

 

【メリット2】情報がより拡散されるようになる

Facebookの場合、OGPを設定していないサイトはいいね!を押してもらっても、その人のウォールにしか表示されません。
人のタイムラインなんて、あんまり見に行かないですよね。

でもOGPを設定したサイトだと、いいね!を押してくれた人の友達のニュースフィードにも表示されるんです!
皆さんも自分のタイムラインで「◯◯さんがリンクについて「いいね!」と言っています。」というのを見たことがあると思います。
画像・タイトル・説明文も表示されるので、たまたま見た人が興味を持ってくれるかもしれません。

SNSで拡散する利点は、検索してサイトに訪れる人とは違うターゲットを集められることです。
SEO対策をすれば検索して来てくれる人が増えますが、SNSで拡散されるようになると、たまたま記事のリンク見つけた人が興味を持ってくれるかもしれません。

なので少しでも多くの人にサイトを知ってもらうために、OGPの設定はサイト運営者にとって必須項目と言えるでしょう。

WordPressでのFacebook OGPの設定方法

では早速設定していきましょう!
まずは「header.php」の「<!DOCTYPE html>」の直後に下記コードを挿入します。
投稿記事と、それ以外のページで条件分岐をして「article」と「website」を分けています。

上記はhtml5用なので、「<html xmlns="http://www.w3.org/1999/xhtml">」のような記述がある場合はxhtml用のこちらを使ってください↓

次に下記コードをコピペして、「header.php」の中にある<head></head>内に貼り付けます。
黒丸の部分は各サイトに合わせた値を入力する必要があります。

ではコードについて説明していきます。

1行目:og:locale

サポートする言語の設定です。
日本語なので「ja_JP」としています。

2行目:fb:app_id

OGPの設定は「fb:admins」か「fb:app_id」のどちらかを記述する必要があります。
「fb:admins」はFacebookの個人アカウントのIDなので、個人情報が気になる場合は「fb:app_id」を使用しましょう。

「fb:app_id」は黒丸の部分にFacebookのアプリIDを入れるので、まずはFacebookのアプリを作成する必要があります。ちょっとめんどくさいです。

サクッと終わらせたい方は「fb:admins」を使用してください↓

「fb:admins」の確認方法はこちらのサイトの記事に分かりやすく記載されています。

嘘ばっかり!OGPのadminsはFacebook公式から1クリックで確認できる!
現在Facebookとしっかり連携を取るべく全力で勉強中です! 前回からFacebookの作成、OGPの設定と取り組んできたわけですが、1つ気になったことがありました。 OGPで設定する「admins」の項目の意味と指定する値です。 OGPの設定で検索して見つかる情報だと、既に使えなくなっている方法だったり、何の根拠も示していない訳の分からない方法ばかり。 やはりFacebook公式が示しているものを探すのが一番だと「ヘルプ」と「Developers」の中を駆けずり回りました。 そして見つけました! 答えはドメインインサイトにあり 他の方法が間違っているとかの説明は後にして、先に答えからいきます! インサイトとは Facebookではインサイトという、アクセス解析のようなサービスが提供されています。 インサイトの種類は3つあります。 アプリアナリティクス:Facebookアプリに関する情報 ページインサイト:Facebookページに関する情報 ドメインインサイト:ウェブサイトに関する情報(今回の主役) これらには、Facebookの「プラットフォームインサイト」ページからアクセス可能です。 何もインサイトを設定していない場合は、このような画面が表示されます。 ドメインインサイトにある「ドメインを追加」をクリックします。 思っきり書いてくれてますね\(^o^)/ というわけでインサイトの画面にアクセスして1クリックで解決です! なのでこの「admins」の値を設定してあげましょう。 ちゃんと設定してあげれば、インサイトを利用出来るようになります。 インサイトの使い方は、別の記事で書きます! 管理人が複数いる場合の「admins」 「admins」は、コンマ繋ぎでidを複数指定出来ます。 ただ、これをすると正しい指定の仕方だと思うのですが、開発者向けFacebook「オブジェクトデバッガー」でWarningが出ます。 Warnings That Should Be Fixed

「fb:app_id」の取得方法はこちらのサイトの記事が参考になると思います。

Facebook アプリID取得方法 - User's Manual2

3行目:og:site_name

この3行目までは全ページ共通の設定です。
og:site_name」には管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を「<?php bloginfo('name'); ?>」で表示してます。

4〜12行目:投稿ページのみの設定

個別の記事ページだけに設定するための内容です。

「og:title」→記事のタイトル。

og:description→抜粋文を表示。抜粋文がない場合は本文から抜粋して表示。

og:url→記事のURL。

og:type→投稿ページのみ「article」を設定。

article:publisher→黒丸の部分にFacebookページのURLを入れます。
これを設定しているとFacebookで共有された時に、まだそのページにいいね!していない人が見た時にページに対してのいいね!ボタンが表示されるようになります。

ページのフォロワーを増やすためにぜひ設定しておいてください。
Facebookページを作っていない方はこの行は削除してください。

13〜18行目:投稿ページ以外のページの設定

個別の記事ページ以外(トップページ、固定ページ、アーカイブページなど)の設定です。

「og:title」→管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を表示。

og:description管理画面の「設定」→「一般」で設定されている「キャッチフレーズ」を表示。

og:url管理画面の「設定」→「一般」で設定されている「サイトアドレス」を表示。

og:type→投稿ページ以外には「website」を設定。

※投稿ページで設定した「article:publisher」は、og:type が article の場合のみ使え、それ以外だとエラーになるので投稿ページ以外には設定しません。

19〜34行目:画像の設定

投稿ページの場合は
1.「アイキャッチ画像があれば表示」
2.なければ記事中の最初の画像を表示
3.記事中にも画像がなければ指定した画像を表示
という処理になっています。

29行目の「content="●●●"」の黒丸の部分に画像のURLを入れます。

URLは管理画面の「メディア」から画像をアップして、画像選択後に右側に出る「URL」のところをコピペすれば簡単に入力できます。

32行目の黒丸のところも投稿ページ以外で表示する画像の指定なので、同じようにURLを入力してください。

ちなみにOGP用の画像サイズは「1200×630px」が推奨されています。

35,36行目:Twitterカードの設定

OGPを設定したついでにTwitterカードも設定しちゃいましょう!
Twitterカードは、Facebook OGPと同じようにTwitterで共有された時にキレイに表示するための設定です。

OGPとセットならたった2行追加するだけで設定できちゃうので楽ちんです♪

twitter:card→共有された時の表示の種類を指定できます。
"summary"、"summary_large_image"、"photo"、"gallery"、"app"、"product"など色々ありますが、通常は"summary"か"summary_large_image"を使用するのが一般的です。

表示のされ方についてはTwitterの開発者ページに詳しく載っています↓

Twitterカード
Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。

twitter:site→ここにはツィッターのアカウント(@以降)を入れてください。

設定したらエラーが無いかチェック!

全て設定できたらFacebookデバッガーで正しく設定できているかチェックしましょう!

1.Facebookデバッガーにアクセス。

2.確認したいページのURLを入力してから「Debug」ボタンを押します。

20160225c

3.OGP情報が表示されるのでちゃんと設定できているかチェックしましょう。

20160225d

エラーがあった場合はその内容も表示されるので、どこが間違っているのか確認してください。

修正・変更した後はキャッシュをクリア

OGP情報を変更した直後は古いキャッシュが残っているのですぐに反映されません。
その時は「Fetch new scrape Information」をクリックすればすぐにキャッシュをクリアして最新情報を取得してくれます。

20160225e

エラーが無くなれば無事に設定完了です!
お疲れ様でした(^^)

スポンサーリンク

この記事をシェアする!

 - WordPress ,