Facebook向けOGPをWordPress用に正しくカスタマイズ

2015年1月18日

Facebookでいいね！やシェアをする時にURL、タイトル、説明、画像を表示するための設定。WordPress用にカスタマイズしたときに調べると間違ってる記述も多かったので（たぶん）正しい記述を紹介。Facebook Developersのオープングラフリファレンスを参考にしました。

OGPを使うための下準備

OGPの設定をする際はheadに以下のタグを書く。

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

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

もしくは

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

ブログの記事はarticleでその他のページがwebsiteを使うといいっぽい。

検索するとhtmlタグに

<html xmlns:og=”http://ogp.me/ns#”>

1	<html xmlns:og=”http://ogp.me/ns#”>

を書け、と出てくるページがあるけどもこれはXHTMLで組む時のみ。
HTML5で組むときはheadタグに書くので注意。

メタタグについて

設定するメタタグは以下のとおり

<meta property="fb:app_id" content="アプリID"> 
<meta property="og:title" content="シェアしたいページのタイトル"> 
<meta property="og:site_name" content="サイトの名前">
<meta property="og:url" content="シェアしたいURL"> 
<meta property="og:description" content="シェアしたいページの説明">
<meta property="og:image" content="シェアする際に使う画像（絶対リンクで）"> 
<meta property="og:type" content="websiteもしくはarticle"> 
<meta property="og:locale" content="ja_JP">
// og:typeがarticleの場合以下のプロパティを追加できる。
<meta property="article:author" content="facebook個人ページのURL">
<meta property="article:publisher" content="facebookページのURL">

// og:typeがarticleの場合以下のプロパティを追加できる。

実際の記入例、私のサイトの場合

website、article両方に使うメタタグ

<meta property="fb:app_id" content="388246858019761"> 
<meta property="og:site_name" content="松井はり灸院">
<meta property="og:locale" content="ja_JP">

投稿記事に使うメタタグ

<meta property="og:type" content="article"> 
<meta property="og:title" content="記事のタイトル"> 
<meta property="og:url" content="記事のURL"> 
<meta property="og:description" content="記事の説明">
<meta property="article:publisher" content="https://www.facebook.com/matsui89in">
<meta property="og:image" content="シェアする際に使う画像（絶対リンクで）">

その他のページに使うメタタグ

<meta property="og:type" content="website"> 
<meta property="og:title" content="トップページ"> 
<meta property="og:url" content="http://matsui89.ciao.jp/"> 
<meta property="og:description" content="奈良県橿原市のはり、お灸の専門治療院、松井はり灸院のホームページです。">
<meta property="og:image" content="シェアする際に使う画像（絶対リンクで）">

WordPressの記述

<!-- OGP -->
<meta property="fb:app_id" content="388246858019761"> 
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP">
<?php
if(is_single()) : // 投稿記事のとき ?>
<meta property="og:type" content="article">
<meta property="og:url" content="<?php echo get_permalink(); ?>">
<meta property="og:title" content="<?php wp_title('|',true,'right');bloginfo('name'); ?>">
<meta property="og:description" content="<?php echo mb_substr(strip_tags(apply_filters('the_content', $post->post_content)), 0, 100). "..."; ?>">
<?php
	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=[\"|\'](.+?)[\"|\'].*?>/i', $post->post_content, $imgurl )) {//アイキャッチがなくて、画像がある場合
echo '<meta property="og:image" content="'.$imgurl[1].'">';echo "\n";
	} else {//アイキャッチも画像もない場合
echo '<meta property="og:image" content="';echo home_url();echo '/img/og-image.jpg">';echo "\n";
	} ?>
<meta property="article:publisher" content="https://www.facebook.com/matsui89in">
<?php else : //ホーム・カテゴリー・固定ページなど ?>
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo home_url('/'); ?>">
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="<?php echo home_url(); ?>/img/og-image.jpg">
<?php endif; ?>
<!-- /OGP -->

<?php

if(is_single()) : // 投稿記事のとき ?>

<?php

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=[\"|\'](.+?)[\"|\'].*?>/i', $post->post_content, $imgurl )) {//アイキャッチがなくて、画像がある場合

echo '<meta property="og:image" content="'.$imgurl[1].'">';echo "\n";

} else {//アイキャッチも画像もない場合

echo '<meta property="og:image" content="';echo home_url();echo '/img/og-image.jpg">';echo "\n";

} ?>

<?php else : //ホーム・カテゴリー・固定ページなど ?>

<?php endif; ?>

フェイスブックのアプリID

<meta property="fb:app_id" content="388246858019761">

1	<meta property="fb:app_id" content="388246858019761">

詳しい説明はぐぐってください。

サイトの名前

<meta property="og:site_name" content="<?php bloginfo('name'); ?>">

1	<meta property="og:site_name" content="<?php bloginfo('name'); ?>">

テンプレートタグで引っ張ってくる。

地域

<meta property="og:locale" content="ja_JP">

1	<meta property="og:locale" content="ja_JP">

もちろん日本。

投稿記事ページとそれ以外のページの条件分岐

<?php
if(is_single()) : // 投稿記事のとき ?>
<?php else : //ホーム・カテゴリー・固定ページなど ?>
<?php endif; ?>

<?php

if(is_single()) : // 投稿記事のとき ?>

<?php else : //ホーム・カテゴリー・固定ページなど ?>

<?php endif; ?>

投稿記事はtype:articleで、その他のページはtype:websiteで表示するための構文です。

タイプ：投稿記事のとき

<meta property="og:type" content="article">

1	<meta property="og:type" content="article">

ブログの記事やニュース記事のときはこのタイプが好ましいらしいです。
type:blogはすでに廃止になったのかどこにもないです。

URL：投稿記事のとき

<meta property="og:url" content="<?php echo get_permalink(); ?>">

1	<meta property="og:url" content="<?php echo get_permalink(); ?>">

URLの取得。the_permalink()はループ内で使うタグなのでget_permalink()でリンクを取得してechoで書き出してます。

タイトル：投稿記事のとき

<meta property="og:title" content="<?php wp_title('|',true,'right');bloginfo('name'); ?>">

1	<meta property="og:title" content="<?php wp_title('\|',true,'right');bloginfo('name'); ?>">

ほんとはサイトの名前は適切ではないんだけど、シェアしたときに分かりやすくなるのであえてつけちゃってます。
the_title()はループ内で使うタグなのでwp_title()でページのタイトルを取得してます。

説明：投稿記事のとき

<meta property="og:description" content="<?php echo mb_substr(strip_tags(apply_filters('the_content', $post->post_content)), 0, 100). "..."; ?>">

1	<meta property="og:description" content="<?php echo mb_substr(strip_tags(apply_filters('the_content', $post->post_content)), 0, 100). "..."; ?>">

サイトの説明の取得。ここがすごい手間取りました。
このサイトを参考にしました。

$post->post_content;は整形前の生のデータを抜き出してしまう

the_content()やthe_excerpt()はループ内で使うタグなので、$post->post_contentで記事内容を取得してます。
そのままでは色々と問題があるので
apply_filtersで、$post->post_contentにthe_contentのフィルターをかけて、
strip_tagsで余計なタグを取り除いて、
mb_substrで0文字目から100文字を取得して続きは…を表示して省略するようにしてます。

画像：投稿記事のとき

<?php
	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=[\"|\'](.+?)[\"|\'].*?>/i', $post->post_content, $imgurl )) {//アイキャッチがなくて、画像がある場合
echo '<meta property="og:image" content="'.$imgurl[1].'">';echo "\n";
	} else {//アイキャッチも画像もない場合
echo '<meta property="og:image" content="';echo home_url();echo '/img/og-image.jpg">';echo "\n";
	} ?>

<?php

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=[\"|\'](.+?)[\"|\'].*?>/i', $post->post_content, $imgurl )) {//アイキャッチがなくて、画像がある場合

echo '<meta property="og:image" content="'.$imgurl[1].'">';echo "\n";

} else {//アイキャッチも画像もない場合

echo '<meta property="og:image" content="';echo home_url();echo '/img/og-image.jpg">';echo "\n";

} ?>

イメージ画像の取得。これもややこしいですね。
このサイトを参考にしました。

[WordPress]これは簡単！プラグインを使わずにOGPを設定する方法！

3つのパターンでそれぞれ画像を変えます。
1.アイキャッチがある場合
2.アイキャッチがなくて、画像がある場合
3.アイキャッチも画像もない場合

まずhas_post_thumbnail()でアイキャッチがあるかを判断します。
$image_idという変数にget_post_thumbnail_id()で取得したIDを代入します。
$imageという変数にwp_get_attachment_image_src（ID,画像の大きさ）を代入します。
アイキャッチがあれば$image[0]で画像のURLを表示されます。[0]はURL、[1]は幅、[2]は高さが表示されます。

アイキャッチがなければelseif以降でアイキャッチ以外の画像があるかをさがします。
preg_match(検索パターン,探す場所,変数)で <img src=”～”> を探します。
検索パターンは正規表現っていうやつなんですがややこしいのでぐぐってください。
今回の場合でざくっと説明すると <img 文字 src= [”or’] (文字） [”or’] 文字 > という記述があるかどうかを探します。
今回の場合最初に出てくる <img src=”（画像のパス）” alt=”説明”> という記述を探してきて変数$imgurlに代入します。
見つかれば$imgurl[1]で最初の()の部分、今回は画像のパスを表示します。

アイキャッチも画像もない場合はelse以降で用意した画像を表示させます。
サイトの直下に画像がある場合はhome_url()タグを使います。bloginfo(‘url’)は今は推奨されてません。
テーマフォルダにある場合はget_template_directory_uri()タグを使います。

ちなみに画像サイズについてですが、少なくとも600x315px以上、推奨は1200x630pxかそれ以上となってます。比率は1.905：1です。

Facebookとの紐付け

<meta property="article:publisher" content="https://www.facebook.com/matsui89in">

1	<meta property="article:publisher" content="https://www.facebook.com/matsui89in">

フェイスブックページのURLを記載します。
さらに個人ページも記載する場合は

<meta property="article:author" content="facebook個人ページのURL">

1	<meta property="article:author" content="facebook個人ページのURL">

を書きます。私は個人のページは紐付けしてないのでこれは省略しました。

ここまでが投稿記事ページのOGP設定になります。

その他のページの設定

<?php else : //ホーム・カテゴリー・固定ページなど ?>
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo home_url('/'); ?>">
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="<?php echo home_url(); ?>/img/og-image.jpg">
<?php endif; ?>
<!-- /OGP -->

<?php else : //ホーム・カテゴリー・固定ページなど ?>

<?php endif; ?>

投稿記事以外のページはそれぞれ固定の設定になっています。
typeはwebsite
urlはホームURL
titleはサイトの名前
descriptionはサイトのキャッチフレーズ
imageは用意した画像をそれぞれ設定しています。

type:business.businessについて

Facebook Developersのオープングラフリファレンスを見るとog:typeには他にもカフェ用とかレストラン用とかビジネス用とか色々あるのですが、設定してもイマイチ違いが分からないので今回はスルーします。今後反映されるようになったときの参考のために記述だけ載せておきます。

<meta property="fb:app_id" content="388246858019761"> 
<meta property="og:type" content="business.business"> 
<meta property="og:locale" content="ja_JP">
<meta property="og:url" content="http://matsui89.ciao.jp/test/">
<meta property="og:title" content="松井はり灸院">
<meta property="og:site_name" content="松井はり灸院">
<meta property="og:image" content="http://matsui89.ciao.jp/img/og-image.jpg">
<meta property="business:contact_data:street_address" content="葛本町218-4ガーデンハイツ明日香1F東号室"> 
<meta property="business:contact_data:locality" content="橿原市"> 
<meta property="business:contact_data:region" content="奈良県">
<meta property="business:contact_data:postal_code" content="634-0007"> 
<meta property="business:contact_data:country_name" content="日本"> 
<meta property="business:contact_data:phone_number" content="0744-55-2472">
<meta property="place:location:latitude" content="34.526885"> 
<meta property="place:location:longitude" content="135.796184"> 
<meta property="og:description" content="このページはほにゃららら">

最後の確認

ちゃんと設定されているかFacebookデバッガーで確認します。
エラーが出てなかったらOKです。

正直PHPはさっぱり分からないので間違っていたらどんどん突っ込んでください。

ご予約、無料相談など お気軽にお問い合わせください。: 090-3973-6373; Webフォーム

コメントをどうぞコメントをキャンセル

この記事より前はありません

超簡単！「Instant WordPress」インストールと複数のWordPressのインストール

ご予約、無料相談など お気軽にお問い合わせください。: 090-3973-6373; Webフォーム

受付時間
	月	火	水	木	金	土
19:00～21:00	●	☆	●	●	●	●

☆9:00～18:00　休診日　日曜・祝日

当院は予約優先制です

時間外でも診療できることもあるのでご連絡ください

アクセスマップ