今日はWordPressで作ったサイトにFacebookのOGPを設定する方法をご紹介します。
プラグインで対応している方も多いと思いますが、なるべくプラグインを使わないでサイトを軽くするために手動で設定していきましょう。
子テーマの使用方法
テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。
STINGER7での子テーマの使用方法はこちら↓
特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法
OGPとは？
まずはお約束の「OGP」についての簡単な説明を少し。
もう見飽きた！って人は飛ばしてください（笑）
OGPは「Open Graph Protocol」を略した言葉です。
直訳するとOpen（公開された）Graph（グラフ・データを）Protocol（送受信するためのルール）って感じでしょうか。
WEBサイトの内容をコンピューターに正しく伝えることで、FacebookやTwitterなどのSNSでシェアされた時に意図した通りに表示できるようになります。
OGPを設定するメリット
【メリット１】シェアされた時の見た目が良くなる
例えば記事がFacebookでシェアされた時、OGPを設定していないとこんな感じで表示されます↓
記事中の画像の中から適当なやつが使われたり、説明文もなんか変ですね。
これが正しくOGPの設定を行った後はこうなります↓
画像も説明文もキレイに表示できてますね！
狙った画像や説明文を掲載できるので、見た人に内容が伝わりやすくなります。
【メリット２】情報がより拡散されるようになる
Facebookの場合、OGPを設定していないサイトはいいね！を押してもらっても、その人のウォールにしか表示されません。
人のタイムラインなんて、あんまり見に行かないですよね。
でもOGPを設定したサイトだと、いいね！を押してくれた人の友達のニュースフィードにも表示されるんです！
皆さんも自分のタイムラインで「◯◯さんがリンクについて「いいね！」と言っています。」というのを見たことがあると思います。
画像・タイトル・説明文も表示されるので、たまたま見た人が興味を持ってくれるかもしれません。
SNSで拡散する利点は、検索してサイトに訪れる人とは違うターゲットを集められることです。
SEO対策をすれば検索して来てくれる人が増えますが、SNSで拡散されるようになると、たまたま記事のリンク見つけた人が興味を持ってくれるかもしれません。
なので少しでも多くの人にサイトを知ってもらうために、OGPの設定はサイト運営者にとって必須項目と言えるでしょう。
WordPressでのFacebook OGPの設定方法
では早速設定していきましょう！
まずは「header.php」の「<!DOCTYPE html>」の直後に下記コードを挿入します。
投稿記事と、それ以外のページで条件分岐をして「article」と「website」を分けています。
|
1 2 3 4 5 |
<?php if (is_single()) { ?> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <?php } else { ?> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <?php } ?> |
上記はhtml5用なので、「<html xmlns=”http://www.w3.org/1999/xhtml”>」のような記述がある場合はxhtml用のこちらを使ってください↓
|
1 |
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja"> |
次に下記コードをコピペして、「header.php」の中にある<head></head>内に貼り付けます。
黒丸の部分は各サイトに合わせた値を入力する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<meta property='og:locale' content='ja_JP'> <meta property='fb:app_id' content='●●●'> <meta property='og:site_name' content='<?php bloginfo('name'); ?>'> <?php if (is_single()){ if(have_posts()): while(have_posts()): the_post(); echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n"; echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n"; echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n"; echo '<meta property="og:type" content="article">';echo "\n"; echo '<meta property="article:publisher" content="●●●">';echo "\n"; endwhile; endif; } else { echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n"; echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n"; echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n"; echo '<meta property="og:type" content="website">';echo "\n"; } $str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i'; if (is_single()){ if (has_post_thumbnail()){ $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); echo '<meta property="og:image" content="'.$image[0].'">';echo "\n"; } else if ( preg_match( $searchPattern, $str, $imgurl )){ echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n"; } else { echo '<meta property="og:image" content="●●●">';echo "\n"; } } else { echo '<meta property="og:image" content="●●●">';echo "\n"; } ?> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@●●●"> |
ではコードについて説明していきます。
1行目：og:locale
|
1 |
<meta property='og:locale' content='ja_JP'> |
サポートする言語の設定です。
日本語なので「ja_JP」としています。
2行目：fb:app_id
|
1 |
<meta property='fb:app_id' content='●●●'> |
OGPの設定は「fb:admins」か「fb:app_id」のどちらかを記述する必要があります。
「fb:admins」はFacebookの個人アカウントのIDなので、個人情報が気になる場合は「fb:app_id」を使用しましょう。
「fb:app_id」は黒丸の部分にFacebookのアプリIDを入れるので、まずはFacebookのアプリを作成する必要があります。ちょっとめんどくさいです。
サクッと終わらせたい方は「fb:admins」を使用してください↓
|
1 |
<meta property='fb:admins' content='●●●'> |
「fb:admins」の確認方法はこちらのサイトの記事に分かりやすく記載されています。
「fb:app_id」の取得方法はこちらのサイトの記事が参考になると思います。
3行目：og:site_name
|
1 |
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'> |
この3行目までは全ページ共通の設定です。
「og:site_name」には管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を「<?php bloginfo(‘name’); ?>」で表示してます。
4〜12行目：投稿ページのみの設定
|
1 2 3 4 5 6 7 8 9 |
<?php if (is_single()){ if(have_posts()): while(have_posts()): the_post(); echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n"; echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n"; echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n"; echo '<meta property="og:type" content="article">';echo "\n"; echo '<meta property="article:publisher" content="●●●">';echo "\n"; endwhile; endif; |
個別の記事ページだけに設定するための内容です。
「og:title」→記事のタイトル。
「og:description」→抜粋文を表示。抜粋文がない場合は本文から抜粋して表示。
「og:url」→記事のURL。
「og:type」→投稿ページのみ「article」を設定。
「article:publisher」→黒丸の部分にFacebookページのURLを入れます。
これを設定しているとFacebookで共有された時に、まだそのページにいいね！していない人が見た時にページに対してのいいね！ボタンが表示されるようになります。
ページのフォロワーを増やすためにぜひ設定しておいてください。
Facebookページを作っていない方はこの行は削除してください。
13〜18行目：投稿ページ以外のページの設定
|
1 2 3 4 5 6 |
} else { echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n"; echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n"; echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n"; echo '<meta property="og:type" content="website">';echo "\n"; } |
個別の記事ページ以外（トップページ、固定ページ、アーカイブページなど）の設定です。
「og:title」→管理画面の「設定」→「一般」で設定されている「サイトのタイトル」を表示。
「og:description」→管理画面の「設定」→「一般」で設定されている「キャッチフレーズ」を表示。
「og:url」→管理画面の「設定」→「一般」で設定されている「サイトアドレス」を表示。
「og:type」→投稿ページ以外には「website」を設定。
※投稿ページで設定した「article:publisher」は、og:type が article の場合のみ使え、それ以外だとエラーになるので投稿ページ以外には設定しません。
19〜34行目：画像の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i'; if (is_single()){ if (has_post_thumbnail()){ $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); echo '<meta property="og:image" content="'.$image[0].'">';echo "\n"; } else if ( preg_match( $searchPattern, $str, $imgurl )){ echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n"; } else { echo '<meta property="og:image" content="●●●">';echo "\n"; } } else { echo '<meta property="og:image" content="●●●">';echo "\n"; } ?> |
投稿ページの場合は
１．「アイキャッチ画像があれば表示」
２．なければ記事中の最初の画像を表示
３．記事中にも画像がなければ指定した画像を表示
という処理になっています。
29行目の「content=“●●●”」の黒丸の部分に画像のURLを入れます。
URLは管理画面の「メディア」から画像をアップして、画像選択後に右側に出る「URL」のところをコピペすれば簡単に入力できます。
32行目の黒丸のところも投稿ページ以外で表示する画像の指定なので、同じようにURLを入力してください。
ちなみにOGP用の画像サイズは「1200×630px」が推奨されています。
35,36行目：Twitterカードの設定
|
1 2 |
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@●●●"> |
OGPを設定したついでにTwitterカードも設定しちゃいましょう！
Twitterカードは、Facebook OGPと同じようにTwitterで共有された時にキレイに表示するための設定です。
OGPとセットならたった2行追加するだけで設定できちゃうので楽ちんです♪
「twitter:card」→共有された時の表示の種類を指定できます。
“summary”、”summary_large_image“、”photo”、”gallery”、”app”、”product”など色々ありますが、通常は”summary”か”summary_large_image“を使用するのが一般的です。
表示のされ方についてはTwitterの開発者ページに詳しく載っています↓
「twitter:site」→ここにはツィッターのアカウント（@以降）を入れてください。
設定したらエラーが無いかチェック！
全て設定できたらFacebookデバッガーで正しく設定できているかチェックしましょう！
１．Facebookデバッガーにアクセス。
２．確認したいページのURLを入力してから「Debug」ボタンを押します。
３．OGP情報が表示されるのでちゃんと設定できているかチェックしましょう。
エラーがあった場合はその内容も表示されるので、どこが間違っているのか確認してください。
修正・変更した後はキャッシュをクリア
OGP情報を変更した直後は古いキャッシュが残っているのですぐに反映されません。
その時は「Fetch new scrape Information」をクリックすればすぐにキャッシュをクリアして最新情報を取得してくれます。
エラーが無くなれば無事に設定完了です！
お疲れ様でした(^^)
comment