WordPressでOGPを設定するソースコードと注意するポイント

バイラルメディアを始めSNSでの拡散も戦略にするサイトにとってOGP（Open Graph Protocol）。今回はWordPressにおけるOGP設定方法と設定にあたり注意するべきポイントをまとめます。

WordPressにOGPを設定するソースコード
CocoonやXeoryはOGP設定が組み込まれたテーマ
プラグイン「All In One SEO Pack」からもOGP設定が可能
OGPの重複に注意
JetpackのOGPを消す
fb:app_idで個人情報だだ漏れ

WordPressにOGPを設定するソースコード

テーマやプラグインでOGPの設定を行わない場合はheader.phpを修正します。

まずはheadタグを下記に修正。細かい理由は置いといて、これをやっておくとFacebookでシェアした時にリッチコンテンツなるとかどうとか。

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

次にheader.phpの「< php wp_head(); >」前に書きをコピペします。

<!--OGP-->
<meta property='og:locale' content='ja_JP'>
<meta property="fb:app_id" content="00000000000000" />
<?php if ( is_single() ) {  ?>
<meta property='og:type' content='article'>
<meta property='og:title' content='<?php the_title() ?>'>
<meta property='og:url' content='<?php the_permalink() ?>'>
<meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>
<?php } else {  ?>
<meta property='og:type' content='website'>
<meta property='og:title' content='<?php bloginfo('name') ?>'>
<meta property='og:url' content='<?php bloginfo('url') ?>'>
<meta property='og:description' content='<?php bloginfo('description') ?>'>
<?php } ?>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if ( is_single() or is_page() ) {
    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";
    } elseif ( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive() ) {
        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";
}
?>
<!--OGP-->

fb:app_idは最悪削除しちゃっても問題ありませんが、自分のFacebookアカウントのプロフィール画像のリンクの「00000000000000&type=3&theater」の「00000000000000」部分の数字を設定しておかないとリッチコンテンツにならないとかどうとか。

CocoonやXeoryはOGP設定が組み込まれたテーマ

無料の人気テーマでもある「Cocoon」や「Xeory」は、テーマのPHPをいじらずともWordPress管理画面の操作からOGPが設定できます。詳しくは各テーマの公式サイトを確認してください。

プラグイン「All In One SEO Pack」からもOGP設定が可能

定番のSEO対策プラグイン「All In One SEO Pack」の「Feature Manager」から「Social Meta」をONにすることでOGPの設定が可能です。ですが全文英語という点と、ちょっと挙動があやしい点から自分は使いません。

OGPの重複に注意

上記のOGP設定組込型テーマに「All In One SEO Pack」の「Social Meta」がONの状態だとヘッダーの中にOGPが複数ある状態になります。HTMLの性質上、下にある記述がおかしいと正常にSNSに反映されません。OGPの設定は一箇所だけ。不要な記述は削除しましょう。

JetpackのOGPを消す

またプラグイン「Jetpack」を利用してSNSへ自動投稿を行っている場合は、プラグインの仕様でJetpackのOGPが勝手に挿入されます。なので、functions.phpに下記を追記してJetpackのOGPを削除。

// JetPack OGP 削除
add_filter( 'jetpack_enable_open_graph', '__return_false' );

fb:app_idで個人情報だだ漏れ

Facebookのリッチコンテンツ用に設定が必要なfb:app_idですが、そのままではソースコードから丸見えでFacebookの名前や職場などの個人情報がバレてしまい、サイト運営者と紐付けられます。「https://www.facebook.com/0000000000000」のようにFacebookのURLの後ろにfb:app_idをつけると個人のページに飛びます。

これじゃ困るので、Facebookログイン→設定→プライバシーから設定を変更します。