WordPressでのOGP設定方法の備忘録

SEO対策としても重要な役割を果たすOGP設定ですが、Wordpressの場合の設定方法を調べ上げたので備忘録として残します。

ちなみにOGPは、FacebookやTwitterなどのSNS上に、意図した通り正確に表示させるための設定です。
詳細説明は「SNSに最適なOGP設定方法まとめ」に記載していますので、興味のある方はご覧ください。

設定の前提条件

こちらで紹介する設定方法は下記の前提でやっていますので、参考にする前にご確認ください。

プラグインは使用しない

OGP設定をしてくれるプラグインとしては、All in One SEO PackやYoast SEOなど、様々なものがありますが、今回紹介する方法はプラグインを使わない方法になります。

※最初は、All in One SEO Packを使ってOGP設定しようと思ったのですが、下記のような使い勝手の悪さもあり、自作することにしました。

  • headタグのprefix属性がTopページでもarticleになってしまう
  • 投稿記事のog:typeがactivityとなってしまう(シェアデバッカーでエラー表示発生)
  • 設定を説明しているサイトは数多くあるが、Verが変わり項目が変わりすぎていて参考になるものが少ない(今後も変化していくことを考えると、かなり煩わしい)

その他にも、プラグインは入れることで、サイトが重くなったり、セキュリティホールが生まれたりと様々なデメリットがあるため、可能なものは自分でコーディングした方が良いでしょう。

OGP設定の入っていないテーマを利用

WordPressテーマには予めOGP設定の入っているものがあります。
こういったテーマを使用している場合は、設定してしまうと重複してしまうため、設定不要です。

必要最低限の最小コードで記載

OGP設定自体は様々なものがあり、多くの設定項目があります。(地域情報など)
ですが、目的を考えるとSNS上で正しく表示されれば良いだけのため、不要なものはバッサリと除外しました。

投稿、固定ページ、Topページのみの設定

アーカイブページがSNSでシェアされる機会は少ないと思うので、投稿、固定ページ、Topページのみに限定して設定しました。
その他のページの場合、Topページと同じ内容が出力されるようになっています。
※カテゴリーページくらいは設定しても良いかもしれないので、いずれ設定するかもしれませんが。。。

実際のコード

前置きが長くなりましたが実際のコードを下記します。
header.phpファイルのheadタグの中に記載すればOKです。
※1~7行目は元々あるheadタグ(開始タグ)を置き換えてください。

<?php if ( is_single() || is_page() ) : ?>
<!-- 個別記事の場合 -->
<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 endif; ?>
<!-- OGP設定 -->
<meta property="fb:app_id" content="【App ID】" />
<meta name="twitter:card" value="【Twitterカード】"/>
<meta name="twitter:site" value="【Twitterユーザー名】" />
<?php $ogp_img = get_template_directory_uri().'/images/ogp_img.jpg'; ?>
<?php if ( is_single() || is_page() ) : ?>
<!-- 個別記事の場合 -->
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php the_title(''); ?>" />
<meta property="og:description" content="<?php the_excerpt(); ?>" />
<?php if( has_post_thumbnail() ) : ?>
<!-- アイキャッチがある場合 -->
<?php
$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 : ?>
<!-- アイキャッチがない場合 -->
<meta property="og:image" content="<?php echo $ogp_img; ?>" />
<?php endif; ?>
<?php else : ?>
<!-- 個別記事以外の場合 -->
<meta property="og:url" content="<?php bloginfo( 'url' ); ?>"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
<meta property="og:description" content="<?php echo get_bloginfo( 'description' ); ?>" />
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>" />
<meta property="og:image" content="<?php echo $ogp_img; ?>" />
<?php endif; ?>
<!-- /OGP設定 -->
</head>

その他のやること

デフォルト画像の設定

テーマフォルダのimagesフォルダ内にogp_img.jpgファイルを入れる。
画像がなかったときに、こちらの画像が使用されます。

SNS情報の登録

9~11行目の【App ID】、【Twitterカード】、【Twitterユーザー名】部分を書き換え。
【App ID】 : FacebookのApp ID(アプリID)
【Twitterユーザー名】 : @から始まる、Twitterのアカウント名
【Twitterカード】 : 「summary」や「photo」などから選択しますが、おすすめは「summary_large_image」です

Topページ用の情報登録(titleやdescription)

WordPress管理者画面 → 設定 → 一般設定の中の「サイトタイトル」、「キャッチフレーズ」を記載。
Topページ表示の場合、下記のように設定されます。
og:title、og:site_name : サイトタイトル
og:description : キャッチフレーズ

個別ページ用の情報登録(titleやdescription)

投稿時に「タイトル」、「抜粋」を記載。
投稿、固定ページ表示の場合、下記のように設定されます。
og:title : タイトル
og:description : 抜粋