更新日: 2016年3月22日
WordPress

WordPressにOGP設定・プラグインなしでFacebook/Twitter Cards対応

WordPress に OGP タグを設定する手順です。OGP 設定をしておくと、Facebook や Twitter などで記事がシェアされた時に、画像付きで良い感じに表示してくれるので、より拡散されるのに一役買ってくれる（らしい）。ということで、WordPress で運用しているこのブログに OGP 設定したので、その作業内容をメモしておきます。プラグインなしで Facebook や Twitter Cards などに対応する OGP 設定の方法です。

— 環境 —
WordPress 4.4.2

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

以降、WordPress に OGP 設定する作業手順です。

Facebook App ID を取得

Facebook 用の OGP を設定するには、Facebook の App ID が必要となります。なので、前もって Facebook App ID を取得しておく。

Facebook for Developers

まずは、上記開発者向けページの「+ Add a New App」から、新規にアプリを追加します。

アプリを追加後に「Skip Quick Start」をクリックして、Settings からメアドと URL を入力して保存。

Screen_Shot_2016-03-22_at_21_17_39

続いて App Review から「Make アプリ名 public?」を yes にして公開します。

Screen_Shot_2016-03-22_at_21_18_00

以上の手順で、Facebook App ID が利用可能となります。Facebook App ID を取得して控えておきます。

header.php に OGP 対応の html/head タグを追加

次に WordPress の header.php テンプレートを編集します。使っているテーマが XHTML か HTML5 かに合わせて、以下のいずれかのコードを header.php に追加。

XHTML用

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">

1	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">

HTML5用

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

1	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

利用している WordPress テーマが XHTML か HTML5 かは、HTML 最上部のドキュメントタイプ宣言（DOCTYPE）で見分けられます。

XHTML の場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 の場合

<!DOCTYPE html>

1	<!DOCTYPE html>

OGP タグ設定用の関数を functions.php に作成

OGP タグを設定する関数を functions.php に作成します。今回は、個別記事ページ（single.php テンプレート）とトップページ（index.php テンプレート）への OGP 設定に対応しました。

functions.php

/*
 * OGP for single.php, index.php
 */
function get_ogp_image() {
    // デフォルトの OGP 用画像
    $image = content_url() . '/uploads/****/**/*****.jpg';

    if (is_single()) {
        global $post;
        $content_str = $post->post_content;

        // 投稿記事に画像があるか調べるための正規表現パターン
        $img_pattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';

        if (has_post_thumbnail()) {
            // アイキャッチ画像がある場合
            $eyecatch_id = get_post_thumbnail_id();
            $eyecatch = wp_get_attachment_image_src( $eyecatch_id, 'full' );
            $image = $eyecatch[0];
        } elseif ( preg_match( $img_pattern, $content_str, $matches ) ) {
            //アイキャッチ画像はないが記事内に画像がある場合
            $image = $matches[2];
        }
    }

    return $image;
}

function get_ogp_tags() {
    // OGP 情報
    $title = '';
    $type  = '';
    $url   = '';
    $image = get_ogp_image();
    $description = get_meta_description();
    $site_name   = get_bloginfo('name');
    $facebook_app_id = '*****';
    $twitter_account = '@*****';

    if (is_single()) {
        // 個別記事では記事タイトルと記事URLを取得
        $title = get_the_title();
        $type  = 'article';
        $url   = get_permalink();
    } elseif (is_home()) {
        // ホームページではブログ名とホームURLを取得
        $title = get_bloginfo('name');
        $type  = 'website';
        $url   = home_url();
    }

$ogp_tags = <<< EOF
<!-- OGP -->
<meta property="og:title" content="$title" />
<meta property="og:type" content="$type" />
<meta property="og:url" content="$url" />
<meta property="og:image" content="$image" />
<meta property="og:description" content="$description" />
<meta property="og:site_name" content="$site_name" />
<meta property="fb:app_id" content="$facebook_app_id" />
<meta name="twitter:site" content="$twitter_account">
<meta name="twitter:card" content="summary">
EOF;

    return $ogp_tags;
}

function echo_ogp_tags() {
    if (is_single() || is_home()) {
        echo get_ogp_tags();
    }
}

* OGP for single.php, index.php

function get_ogp_image() {

// デフォルトの OGP 用画像

$image = content_url() . '/uploads/****/**/*****.jpg';

if (is_single()) {

global $post;

$content_str = $post->post_content;

// 投稿記事に画像があるか調べるための正規表現パターン

$img_pattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';

if (has_post_thumbnail()) {

// アイキャッチ画像がある場合

$eyecatch_id = get_post_thumbnail_id();

$eyecatch = wp_get_attachment_image_src( $eyecatch_id, 'full' );

$image = $eyecatch[0];

} elseif ( preg_match( $img_pattern, $content_str, $matches ) ) {

//アイキャッチ画像はないが記事内に画像がある場合

$image = $matches[2];

}

return $image;

}

function get_ogp_tags() {

// OGP 情報

$title = '';

$type = '';

$url = '';

$image = get_ogp_image();

$description = get_meta_description();

$site_name = get_bloginfo('name');

$facebook_app_id = '*****';

$twitter_account = '@*****';

if (is_single()) {

// 個別記事では記事タイトルと記事URLを取得

$title = get_the_title();

$type = 'article';

$url = get_permalink();

} elseif (is_home()) {

// ホームページではブログ名とホームURLを取得

$title = get_bloginfo('name');

$type = 'website';

$url = home_url();

}

$ogp_tags = <<< EOF

EOF;

return $ogp_tags;

}

function echo_ogp_tags() {

if (is_single() || is_home()) {

echo get_ogp_tags();

}

***** などとなっている箇所をご自分のものに変更してください。

$image            // デフォルトの OGP 用画像
$facebook_app_id  // 最初に取得した Facebook App ID
$twitter_account  // Twitter アカウント名

$image // デフォルトの OGP 用画像

$facebook_app_id // 最初に取得した Facebook App ID

$twitter_account // Twitter アカウント名

の変数の部分です。

また、description 設定のために get_meta_description() という関数を用いていますが、これは以下ページで作成したものを利用していますのでご参照お願いいたします。

WordPressでmeta descriptionを設定（プラグインなし版） | EasyRamble

header.php で表示または functions.php で add_action

header.php の head タグ内に、先ほど作成した OGP タグ表示用のコード echo_ogp_tags() を追記します。

header.php

<?php echo_ogp_tags(); ?>

1	<?php echo_ogp_tags(); ?>

または、functions.php で先ほど作成した echo_ogp_tags() 関数を wp_head に追加する add_action として追記しても良いです。

functions.php

add_action( 'wp_head', 'echo_ogp_tags' );

1	add_action( 'wp_head', 'echo_ogp_tags' );

どちらか一方の方法を利用します。

以上が完成しましたら、functions.php および header.php の両ファイルを FTP などでアップロードします。またはデプロイ等。

OGP の動作・表示を確認

設定した OGP が正しく動作して表示されるかどうかを Facebook と Twitter の開発者ツールで確認します。

Facebook の Debugger で確認。

Debugger – Facebook for Developers

Twitter の Card Validator で確認。

Card Validator | Twitter Developers

いずれも確認したい URL を入力して送信します。正しく OGP 表示されるかを確認します。

以上でプラグイン無しで WordPress に OGP 設定する作業は終了です。おつかれさまでした！

WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。

いちばんやさしいWordPressの教本人気講師が教える本格Webサイトの作り方第2版 WordPress 4.x対応

独習PHP 第3版

>> 次の記事 : WordPressブログに更新日を表示

<< 前の記事 : WordPressでパンくずリスト・複数の親子カテゴリーを表示

2件のコメント

なお

2016年4月5日 11:22

こんにちは、「なお」といいます。
　
突然、メールいたしまして、申し訳けありません。
　
　
　
実際の状況として、行き詰まっています。
ＨＥＬＰのメールをいたしました。
　
宜しく、お願いいたします。
　
　
◆環境
WordPress 4.4.2
テーマ：Twenty Sixteen

◆目的
ワードプレス（ＷＰ）で直接ＯＧＰ設定を行う。
パソコンwin7にてＯＧＰ設定フェイスブック（ＦＢ）対応しております。

　
◆ＦＢのデバッガー
Warnings That Should Be Fixed
Inferred Property The ‘og:url’ property should be explicitly provided,
even if a value can be inferred from other tags.
Inferred Property The ‘og:title’ property should be explicitly provided,
even if a value can be inferred from other tags.
Inferred Property The ‘og:description’ property should be explicitly provided,
even if a value can be inferred from other tags.
Inferred Property The ‘og:image’ property should be explicitly provided,
even if a value can be inferred from other tags.
Share App ID Missing The ‘fb:app_id’ property should be explicitly provided,
Specify the app ID so that stories shared to Facebook will be properly attributed to the app.
Alternatively, app_id can be set in url when open the share dialog.
　
Based on the raw tags, we constructed the following Open Graph properties
　
◆プログラム（ＷＰ）実行結果
ＯＧＰ設定した画像が表示されず、ＦＢがチョイスしたものが表示される。
タイトルなとは、文字表示されています。
　
◆対処
ＷＰのソースを表示　：　ＯＧＰは表示されていない。
ＰＨＰの確認　：　
header.phpに追加　：　
functions.phpに追加　：　
/*
* OGP for single.php, index.php
*/
function get_ogp_image() {
// デフォルトの OGP 用画像
$image = content_url() . ‘/uploads/****/**/*****.jpg’;
　　｜
　　｜
　　｜
}
}

変更箇所
$image // デフォルトの OGP 用画像
$facebook_app_id // 最初に取得した Facebook App ID
$twitter_account // Twitter アカウント名
処置ＯＫ。
==================================================
functions.php に meta description を出力する関数を定義
functions.phpに追加　：　
// get meta description from the content
function get_meta_description() {
global $post;
$description = “”;
if ( is_home() ) {
　　｜
　　｜
　　｜
}
}
==================================================
ヘッダー部のテンプレート header.php で meta description を出力

header.phpに追加　：

==================================================

◆ＦＢデバッガーでの表示のように、ＯＧＰを認識していないと思われます。
どのように対処すればいいのか？
見当がつきません。
　
ご教授を、お願いいたします。
なお　より。

返信
- taka
  
  2016年4月8日 18:33
  
  なおさん、こんにちは。
  ご質問の件ですがさっと目を通しましたところ、Facebook の debugger メッセージで「App ID Missing」と表示されています。
  Facebook の OGP 設定には、Facebook で開発者用の App ID が必要となりますが、その App ID の設定はお間違いないでしょうか？
  一度ご確認をお願いいたします！
  
  返信