プラグインを使わずにFacebook OGPを設定する方法【WordPress対応】

2017年05月03日 (更新: 2018年08月09日) WordPress / SNS / WEB制作

OGPの設定方法

Pocket

最近のWEBサイトへの流入元は、検索エンジンに続いてソーシャルメディアから集客がとても増えています。WEBサイト運営者にとってSNS対策は、もはや手を抜けない重要課題になっています。

そこで今回は、WEBサイトやブログのコンテンツがFacebookでシェアされた時に、その記事情報が正しく表示される「OGPの設定方法」についてご紹介します。

OGPとはOpen Graph Protcol(オープン・グラフ・プロトコル)の略称で、FacebookなどのSNSでシェアされた時に、画像・タイトル・説明文・URLを正しく表示させるための仕組みです。

OGPの設定はWordPressのプラグインでもできますが、今回はプラグインを使わずにFacebook OGPの設定方法を詳しく解説したいと思います。

Facebookへの投稿やシェアで意図しない画像やタイトルが表示された経験のある方は、この設定を行えば意図通りの内容を表示させられるはずなので、ぜひ参考にしてみてください。

OGPを設定を行う場合、まず初めに「OGPを使うための宣言」をprefix属性で設定します。prefix属性の設定方法をOGPの公式サイトである「The Open Graph protocol」で確認すると、HTML5ではhtmlタグにprefix属性を設定しています。

<html prefix="og: http://ogp.me/ns#">
<head>

一方、Facebookの「開発者向けFacebook」では、次のようにheadタグにprefix属性を設定しています。

WEBサイトの場合(websiteOpen GraphObject Type)
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

記事ページの場合(articleOpen GraphObject Type)
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

Facebook方式では、記事やニュースの投稿ページでは属性値に「article」を使い、記事以外のページでは「website」を使います。

For specific pages within a website, the article object type should be used.
WEBサイト内の特定のページでは記事オブジェクトタイプを使用する必要があります。

prefix属性の書き方が2通りあるため、htmlタグとheadタグのどちらにprefix属性を記述するのが一般的か大手サイトを調べてみたところ、サイトによってOGPの書き方がバラバラで統一性がないことが分かりました。

結論から言えばどちらの書き方でも問題ないと思いますが、OGPを設置する目的がFacebookとの連携にあることから、Facebook方式のheadタグにprefix属性を記述する方法をオススメしたいと思います。

では早速、WordPressでprefix属性を設定する場合の書き方を記載します。WordPressでは分岐条件が使えるので次のように書きます。

WordPressのprefix属性設定

<html lang="ja">
<?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 } ?>

次はproperty属性をheadタグ内に設定します。最初は「og:type」のように属性値がページによって異なるものから説明します。

WEBサイト(og:type → website)
<meta property="og:type" content="website">

記事ページ(og:type → article)
<meta property="og:type" content="article">
<meta property="article:publisher" content="FacebookページのURL">

og:type
先ほど設定したprefix属性と同じで、記事やニュースの投稿ページではcontentの値が「article」で、記事以外のページでは「website」を使います。

article:publisher
この「article:publisher」については「og:type」がarticleの場合のみ設定可能です。この設定によりニュースフィードに流れた記事に対してフォローボタンが表示されるので、Facebookページを運用している場合は必ず設定を行いましょう。

article:publisherの設定例:content=”https://www.facebook.com/xxxxxx/”

OGPの共通設定
<meta property="og:url" content="WEBサイトのURL">
<meta property="og:title" content="ページタイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="ページ説明">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="FacebookアプリID">

og:url
WEBサイトのURLを記入します。

og:title
ページのタイトル名を記入します。

og:image
表示する画像のURLを記入します。アイキャッチ画像がある時は通常これを使用します。アイキャッチ画像がない場合は、共通利用できる画像(例えばロゴやトッページのメインビジュアルなど)を1つ用意して表示させる方法をオススメします。

og:description
ページの要約となる説明文を記入します。表示される文字数はPCとスマホでかなり異なり、タイトルの長さにも影響を受けるため、あまり文字数に拘らなくてもよさそうです。目安は80〜120字程でHTMLのdescriptionタグと同じ設定でよいと思います。

og:locale
デフォルト値が「en_US」なので、日本語でマークアップしていることを明示する「ja_JP」を記入します。

og:site_name
こちらの設定は、The Open Graph protocolには「大規模サイトの場合」と書かれており、また開発者向けFacebookには「Not supported」となっているので除外しました。

fb:app_id
FacebookアプリIDの番号を記入します。FacebookアプリIDがない場合は、facebook for developersに登録してアプリIDを取得しましょう。

以前は「fb:app_id」の代わりに「fb:admins」を設定する場合がありましたが、こちらはFacebook個人アカウントのIDを使用するため、個人情報を晒す危険があります。そのため「fb:admins」を記述しない方が賢明です。

以上の説明を整理して、HTML5でOGPを設定する場合の記述方法を、記事ページとその他のページ(トップページやアーカイブなど)に分けて表示します。

1. WEBページ(og:type=website)のOGP設定【HTML5】

<meta property="og:type" content="website">
<meta property="og:url" content="WEBサイトのURL">
<meta property="og:title" content="ページタイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="ページ説明">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="FacebookアプリID">

2. 記事ページ(og:type=article)のOGP設定【HTML5】

<meta property="og:type" content="article">
<meta property="og:url" content="WEBサイトのURL">
<meta property="og:title" content="ページタイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="ページ説明">
<meta property="og:locale" content="ja_JP">
<meta property="article:publisher" content="FacebookページのURL">
<meta property="fb:app_id" content="FacebookアプリID">

WordPressでOGPを設定すると、記事一覧が表示されるアーカイブページや新着記事を表示しているページで、画像やタイトルが正しく表示されないことがあります。

Facebookシェアデバッガーを使ってその原因を調査すると、「取得したURL」「カノニカルURL」「og:url」の3つの値が一致していないことがほとんどです。そのためこの3つの値を正しく取得して一致させることが重要です。

WordPressでは条件分岐が使えるので、これを使ってheadタグ内にOGPを設定していきます。それでは順番に設定方法を見ていきましょう。

og:typeの設定
<?php if( is_single() ) { ?>
<meta property="og:type" content="article">
<?php } else { ?>
<meta property="og:type" content="website">
<?php } ?>

og:type
property属性の時と同じで、投稿ページではcontent=”article”、その他のWEBページではcontent=”website”と記述します。

og:urlの設定
<meta property="og:url" content="<?php echo ( 'http://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>">

og:urlの設定(SSL対応のHTTPS接続の場合)
<meta property="og:url" content="<?php echo ( 'https://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>">

og:url
WordPressでOGPを設定する場合、この「og:url」の設定がカギになります。この設定が不正確だとトップページやアーカイブページで意図しない画像やタイトルが出力されてしまいます。

contentの値である現在ページのURLを取得するのにthe_permalink()を使う場合は、条件分岐を細かく設定しないと、トップページやアーカイブページで、そのページのURLではなく一覧表示している新着記事や記事リストからURLを拾ってしまいます。

それを回避するため、PHPで上記のように記述することで現在ページを正しく取得してくれます。この設定なら現在ページのURLと「og:url」の値が常に一致し、正確な画像やタイトルが表示されるはずです。

Facebookシェアデバッガーで確認した限りでは、この設定を行うことで「カノニカルURL」も正しく表示されるようになるので、カノニカルのカスタマイズまでは必要ないと思われます。

WPプラグインでAll in One SEO Packを使っている場合は、[一般設定]>[Canonical URL]にチェックを入れるだけで全ページにカノニカルを出力できます。このプラグインを導入している方にはオススメです。

og:titleの設定
<meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?>">

og:title
ここではwp_title()を使って記述していますが、他にも色々な書き方ができます。基本的にはtitleタグの設定と同じOKです。wp_title()の後継とされるwp_get_document_title()も結構使えるので試してみてはいかがでしょうか?

og:imageの設定
<?php if( ( is_single() || is_page() ) && has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php the_post_thumbnail_url( 'full' ); ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo esc_url( get_template_directory_uri() ); ?>/images/facebook_1200x630.png">
<?php } ?>

og:image
この設定では投稿または固定ページで且つアイキャッチ画像がある場合は、セットされているアイキャッチ画像を出力します。(200×200ピクセル未満の画像は出力されないのでご注意ください。)

the_post_thumbnail_url()の引数は、thumbnail、medium、large、fullが設定可能です。Facebookでは現時点で「1200 x 630ピクセル」の画像サイズを推奨しているので、この点を考慮して引数の設定を行ってください。

アイキャッチ画像がない場合は、imagesフォルダ内の画像「facebook_1200x630.png」を表示させています。アイキャッチ画像がない場合に備えて少なくとも1つは使い回しができる画像を用意しましょう。

「og:image」の設定については、WEBサイトの状況に応じて分岐条件や出力画像を自由にカスタマイズしてお使いください。

og:descriptionの設定
<?php if( is_single() ) { ?>
<meta property="og:description" content="<?php echo mb_substr( str_replace( array( "\r\n" , "\n" , "\r" ), '', strip_tags( $post->post_content ) ), 0, 100 ); ?>">
<?php } else { ?>
<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
<?php } ?>

og:description
投稿ページでは、改行コードや不要なタグを取り除いて記事の先頭から100字を表示しています。100字を超えた場合はFacebook側で自動的に「…」を出力してくれます。

文字数の設定は簡単に変えられますので、お好みで文字数を変更してください。ただし、最大で120字ぐらいまでにした方がよさそうです。

mb_substr()でゴニョゴニョ記述していますが、これは改行スペースや不要なHTMLタグを取り除いてから必要な文字だけを出力させているからです。 wp_trim_words()を使えばもう少しすっきりした記述にできるかもしれません。

投稿ページ以外の場合は[管理画面]>[一般設定]で設定したキャッチフレーズを出力しています。こちらもお好みに応じて自由にカスタマイズしてください。

WordPressのOGP設定

//og:type
<?php if( is_single() ) { ?>
<meta property="og:type" content="article">
<?php } else { ?>
<meta property="og:type" content="website">
<?php } ?>

//og:url
<meta property="og:url" content="<?php echo ( 'http://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>">

//og:title
<meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?>">

//og:image
<?php if( ( is_single() || is_page() ) && has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php the_post_thumbnail_url( 'full' ); ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo esc_url( get_template_directory_uri() ); ?>/images/facebook用画像ファイル">
<?php } ?>

//og:description
<?php if( is_single() ) { ?>
<meta property="og:description" content="<?php echo mb_substr( str_replace( array( "\r\n" , "\n" , "\r" ), '', strip_tags( $post->post_content ) ), 0, 100 ); ?>">
<?php } else { ?>
<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
<?php } ?>

//og:locale
<meta property="og:locale" content="ja_JP">

//article:publisher
<?php if( is_single() ) { ?>
<meta property="article:publisher" content="FacebookページのURL">
<?php } ?>

//fb:app_id
<meta property="fb:app_id" content="FacebookアプリID">

Facebookが提供しているシェアデバッガーを使えば、WEBサイトのコンテンツがシェアされた時の表示内容をプレビュー画面で確認できます。

OGPの設定が終わったら一度表示内容を確認してみましょう。シェアデバッガーに確認したいページのURLを入力して「デバッグ」ボタンをクリックすれば、Facebookが現在保持しているキャッシュ内容を確認できます。

Facebook シェアデバッガー

もしプレビュー内容に意図しない画像・タイトル・説明文が表示されていれば、「取得したURL」「カノニカルURL」「og:url」のURLが全て一致しているか確認してください。次に「og:title」「og:description」「og:image」の出力内容をチェックして問題点を見つけます。

OGPの設定を修正した時は「もう一度スクレイピング」ボタンを押して、Facebook側のキャッシュを更新します。これで表示内容が最新情報に入れ替わるので、表示内容を再度確認しましょう。

Facebook シェアデバッガー(スクレイピング)

Facebook側のキャッシュを更新するには、Open Graphオブジェクトデバッガーを使う方法もあります。ページのURLを入力して「新しいスクレイピング情報を取得」ボタンをクリックすれば、Facebookの保持情報が最新のものに更新されます。

Open Graphオブジェクトデバッガー

以上でFacebookのOGP設定が正しくできたと思います。とくに新着リストや人気記事ランキングを表示させているページでは、一覧表示されている記事の中から画像やタイトルを拾ってしまうことがありますが、これで正しい内容が表示できたはずです。

最後にWEBサイトにFacebookのシェアボタンを設置する場合の注意点をお伝えします。下記のようにdata-hrefの設定に注意して「いいね!・シェア」ボタンを設置すれば、どのページでも意図通りの画像やタイトルが表示されます。

<div class="fb-like" data-href="<?php echo ( 'http://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>

関連ページ

▼いいね!ボタン(開発者向けFacebook)
https://developers.facebook.com/docs/plugins/like-button

この記事が気に入ったら
いいね ! しよう

Pocket