[ソーシャル連携]WordPressにOGPを設定する方法。「All in One SEO」とFacebookの新仕様対応でやってみる

  • 更新日:
  • 公開日:

OGPの設定方法

OGPの設定に必要な修正箇所は

  • <html>タグ（名前空間の指定）
  • <meta>タグ(パラメータの指定）

の2つです。

<html>タグの記述（名前空間の指定）

まずは<html>タグの記述から修正します。 HTML5の場合、XHTMLの場合、さらにはFacebook仕様に対応する場合で記述方法が違います。Facebook仕様とは「fb:app_id」や「fb:page_id」、「article:publisher」の事で、これらを使用する場合は各々後者の記述にする必要があります。

そして減るもんじゃないしmixi用の記述も追加しておきます。

HTML5の場合

<html lang="ja" prefix="og: http://ogp.me/ns# mixi: http://mixi-platform.com/ns#">
Markup
<html lang="ja" prefix="og: http://ogp.me/ns# mixi: http://mixi-platform.com/ns# fb: http://www.facebook.com/2008/fbml">
Markup

XHTMLの場合

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">
Markup
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Markup

<meta>タグの記述（パラメータの指定）

こちらは先述した大本のソースを少々書き換え、必要な部分を条件分岐する形になります。

<!-- OGP Facebook対応版 -->
<meta property="fb:app_id" content="●●●●●Facebookのapp_idを記述。必要無かったら削除●●●●●" />
<meta property="fb:admins" content="●●●●●自分のFacebookアカウントidを記述●●●●●" />
<meta property="og:locale" content="ja_JP" /><!-- 文字化け対策 -->
<?php if (is_home() && !is_paged() || is_front_page() && !is_paged()) { //トップページの場合
echo '<meta property="og:type" content="website" />';
}else {//単一記事ページやその他の場合（アーカイブページなど）
echo '<meta property="og:type" content="article" />';
echo '<meta property="article:publisher" content="●●●●●https://www.facebook.com/FacebookページURL●●●●●" /><!-- Facebookページに紐付ける場合の設定 -->';
}
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo' | '; bloginfo('name'); echo '">';echo "n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "n";//単一記事URLを表示
} else {//単一記事ページ以外の場合（アーカイブページやホームなど）
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$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 ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="●●●●●OGP用のデフォルト画像（1500px×1500px推奨）への絶対パスを記述●●●●●">';echo "n";
}
} else {//単一記事ページ以外の場合（アーカイブページやホームなど）
echo '<meta property="og:image" content="●●●●●OGP用のデフォルト画像（1500px×1500px推奨）への絶対パスを記述●●●●●">';echo "n";
}
?>
<!-- /OGP Facebook対応版 -->
PHP

このソースのハイライトした2,3,9,35,38行目を書き換えたり、要らなかったら削除します。

2行目: 「fb:app_id」

Facebookで作成したアプリのapp_idを「content=””」内に記述します。「content=”12345678910″」こんな感じでapp_idは数字だけです。

設定しなくても良い場合はこの行は削除します。

Facebookページ用にFacebookアプリを作成しapp_idを確認する方法は別記事『OGP用にFacebookアプリを作成してapp_idを取得する』に書いておきました。

3行目: 「fb:admins」

Facebookページの管理者に自分のFacebookアカウントを指定するための記述です。app_id同様に数字を記述します。

設定しなくても良い場合はこの行は削除します。

Facebookアカウントのidの調べ方も別記事『FacebookアカウントのIDを調べる』に書いておきました。

9行目: 「article:publisher」

Facebookページと紐付けたい場合は設定します（詳細は前ページへ）。ここは単にFacebookページのURLを記述するだけです。

または、個人アカウント紐付ける場合は「article:author」と書き換え、URLの部分に個人アカウントのURLを記述します。

Facebookページが無かったり必要が無ければこの行は削除して下さい。

35行目、38行目: OGP用のデフォルト画像指定

OGP用のデフォルト画像を用意してテーマのimagesディレクトリ等にアップロードし、画像までの絶対パスを記述します。推奨は1500px*1500pxです。35行目、38行目どちらも同じURLで大丈夫です。

これでOGPの設定が出来ているはずです。

Facebookデベロッパーのデバッガーでチェック

実際にOGPがちゃんと適応されたかFacebookデベロッパーのデバッガーでチェックしましょう。デバッグしたいURLを入力して「デバッグ」ボタンをクリックするだけです。

app_idやadmins等の記述を削除した場合は警告が出ると思われますが、実際の挙動には問題が無いです。

「fb:app_id」や「fb:admins」に関して

この2つが必要かどうかの判断なのですが、これは下記ページが参考になります。

「fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

という訳で、なるべく指定した方が良さそうです。

最近はmixiを活用していなかったので知らなかったのですが、mixiに関してはサムネイルが適応されるのはmixiチェックのみらしいですね。mixiイイネ！ボタンと2つに分かれてややこしや…^^;

ページ: 1 2

書いた人

Symbol Mark

Ryoichi（しつ）

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone