WordPress Facebook OGPの設定

2015年4月12日

ブログのデザインを少し変更しました!それに伴い、プラグインなしでFacebookのOGP設定(条件分岐 トップページ、記事ページ、固定ページ)をしてみました。Twitterカードの設定は後日公開していきます。

公式サイトThe Open Graph protocolより、OGPとは…

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

OGPの設定に必要な記述

公式サイトによると設定に必要なのは下記のみです。

<html prefix="og: http://ogp.me/ns#">
<head>
<title>ページのタイトル</title>
<meta property="og:title" content="表示させたいページのタイトル" />
<meta property="og:type" content="ウェブサイトの種類" />
<meta property="og:url" content="サイトURL />
<meta property="og:image" content="表示させたい画像URL" />
...
</head>
...
</html>

実際にWordPressに組み込んでみる

カスタマイズしやすいように、ブログのトップページ(is_home)、固定ページ(is_page)、記事ページで条件分岐をしてみました。

<?php if(is_home()): ?> <!-- ←でブログのトップページを判定 -->
<meta property="og:type" content="website">
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:url" content="トップページのURL">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="表示させたい画像URL">

<?php elseif(is_page()): ?> <!-- ←で固定ページを判定 -->
<meta property="og:type" content="website">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php echo get_permalink(); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="表示させたい画像URL">

<?php else: ?>  <!-- ←上記の条件にもれたページ(記事ページ) -->
<meta property="og:type" content="article"> 
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php echo get_permalink(); ?>">
<meta property="og:description" content="<?php echo mb_substr(str_replace(array("rn", "r", "n"), '', strip_tags($post-> post_content)), 0, 100).'...'; ?>">
<?php endif; ?>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); ?>
<?php if(is_single() && has_post_thumbnail() ): ?>
<meta property="og:image" content="<?php echo $image_url[0] ?>">
<?php elseif(!is_home() && !is_page() ): ?>
<meta property="og:image" content="サムネイルがない場合に表示させたい画像URL">
<?php endif; ?>

設定した内容をプレビュー

URL Debuggerにアクセス(要Facebookログイン)してURLを入力すれば、どのように表示されるか確認できます。また、「Fetch new scrape information 」ボタンをクリックすれば新規にデータを取得して変更が反映されます。

OGP トップページ

OGP トップページ

OGP 記事ページ

OGP 記事ページ

OGP 固定ページ

OGP 固定ページ

補足

fb:app_idは設定していません。

Facebookの独自タグについて
fb:page_idで簡単に設定できるならと思い、取得する方法を試してみましたがエラーが出て断念。試したのは、画像URLに含まれるID、https://graph.facebook.com/user名で表示されるID、Facebookページに表示されているID。また、Sharing Best Practices for Websites & Mobile Appsには、fb:admins, fb:pageの記載がないので現時点でfb:app_idのみが必須なのかもしれません。

og:typeにblogがあったような気がしていますが、現在はwebsiteかarticleのようですね。
blogと設定するとデバッガーでは認識されずarticleになってしまいます。

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

トップページと固定ページの説明文は、WordPressの管理画面のメニュー -> 設定 -> 一般にある「キャッチフレーズ」が表示されるようにしています。

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

改行が入ってしまうので、改行を削除(str_replace(array(“rn”, “r”, “n”))して説明文を100文字に制限。文末に「…」を追加しています。

<meta property="og:description" content="<?php echo mb_substr(str_replace(array("rn", "r", "n"), '', strip_tags($post-> post_content)), 0, 100).'...'; ?>">

サムネイルの大きさはlargeに設定しています。

<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); ?>

Facebookで更に最適化したい場合

Sharing Best Practices for Websites & Mobile Appsにtagの説明や記載例、画像サイズの設定など説明があります。

一つ前の記事(Previous)
本日の珈琲 パプアニューギニア・キンデン農園


HOME

次の新しい記事(Next)
WordPress Twitterカードを導入