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

更新日: 2019/10/17
公開日: 2013/09/07

カテゴリー:
- WordPress

OGPの設定方法
「fb:app_id」や「fb:admins」に関して

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#">

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

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#">

<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">

<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対応版 -->

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