OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法

ただいまhead部分をコーディング中の@cappeeです。

OGPについては以前も何度か記事を書いてますが、今回は og:type についての注意点です。

前回の記事はこちらからどうぞ。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など
FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?
「Open Graph Pro」を今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

og:typeでwebsiteやblogを設定するときの注意点

OGPのog:typeの設定方法をみると、ウェブサイトには「website」と記述し、ブログには「blog」と記述するように書かてれいます。

ウェブサイトの場合

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

ブログの場合

<meta property="og:type" content="blog"/>

間違いではないのですが、これだけだと不十分なのです。

website や blog の指定は基本的にドメインのルート部分にのみ存在すべきで、トップページ以外は article と指定しましょう。

下層ページの場合

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

PHPでの振り分け方法

PHPを使用出来るサーバーやWordpressを使っている場合は、このようにトップページとそれ以外の下層ページで記述を振り分けます。

ウェブサイトの場合

<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>website<?php } else { ?>article<?php }?>">

ブログの場合

<meta property="og:type" content="<?php if($_SERVER["REQUEST_URI"] == "/"){ ?>blog<?php } else { ?>article<?php }?>">

この振り分けを応用すれば、タイトルの表示方法をトップページと下層ページで変えたりと便利ですよ。

【2016.11.20 追記】
コメントにてご指摘いただきました。
サーバ環境によって必ずしも”/”が帰ってくるとは限らない$_SERVER["REQUEST_URI"]で判断せず、以下のようにした方がよいとのことです。
ご指摘ありがとうございます。

if ( is_front_page() || is_home() ) {
echo '';
} else {
echo '';
}

【2017.07.06 追記】
さらにご指摘いただきました。
コメントをそのまま引用させていただきます。

is_front_pageとかはwordpressの関数ですな。
あと、ifとかで振り分けるのは若干冗長かも。
$_SERVER['REDIRECT_URL'] は確かに返ってくる値が違うので
http://xxxxx.jp/
http://xxxxx.jp/index.php
だと違う結果になります。
上記踏まえて、私は
echo(($_SERVER['REDIRECT_URL']==”/” || $_SERVER['REDIRECT_URL']==”")?”website”:”article”);
こげな感じです。
Pocket
article clipper OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法

[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

こんにちは、@cappeeです。

WordPressで作ったブログにOGPを設定しようとしたところ、つまづいたのでメモしておきます。

「Open Graph Pro」プラグインを入れてみた

FacebookのOGPを設定するプラグインとして「Open Graph Pro」の評価が高かったので導入してみました。

デバッガーで確認したところ、ページによってIDが認識されなかったり、descriptionが表示されなかったりと結構不具合が。。

といっても便利なプラグインなことに間違いないので、もしphpファイルを直接触るのに抵抗があるという方は「Open Graph Pro」よりインストールしてください。

インストール方法はこちらが参考になります。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

Facebookからの流入を増やしたい時、OGPの設定は絶対必要!

上記の記事を書いた方も後々不具合に気づいたようです。
Facebook OGP向けプラグイン「Open Graph Pro」を外した理由

プラグインなしでFacebookのOGPを設定することに

プラグインなしでFacebookのOGPを設定するには、下記が参考にしました。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

個人的に並び方を整理したのと、app_idも追加したのでそのコードも載せておきます。

<!-- ここからOGP -->
<meta property="og:type" content="blog">
<?php
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 '">';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を表示
}
$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="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpgg">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">
<!-- ここまでOGP -->

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

管理者IDとアプリIDの取得に関してはこちらをどうぞ。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

Pocket
article clipper [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

こんにちは、@cappeeです。

サイトやブログを作ったらFacebookのOGPを設定するのはマストになってきましたね。

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

OGPとは

Open Graph protocolの略で、facebook、mixiなどのソーシャルにシェアした場合にOGPを設定しておけば意図した内容を表示させる事ができる、というものです。
詳しくは下記をご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ

fb:admins と fb:app_id の設定は必要?

OGPで指定する fb:admins と fb:app_id ですが、受託なんかの場合は予め管理者にするFacebookユーザーを確認する必要があるため少々面倒だったりもします。

fb:admins と fb:app_id は記述しないと表示されないのかしら?と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。

admins app id FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?
Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.

fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

こういった警告はFacebookは管理者を把握しておきたいという理由も背景にあるようです。

fb:admins と fb:app_id、どちらかを記述するのでも大丈夫ですが、APP ID にはどちらにせよ  Admin ID が必要になりますのですぐに設定したい場合は fb:admins のみをとりあえず設定しておきましょう。

もう片方の fb:app_id がある理由としてはFacebook内にアプリ管理画面が作成されるので、管理者が複数いる場合に設定の管理が楽になります。(Admin ID も複数設定は可能なようです)

Facebookインサイトが使える

もうひとつ設定しておいた方がいい理由としては、Facebookインサイトが使えます!

Facebookインサイトとは、設定したサイトのいいねやシェアなどのアクション数をグラフで確認することができて、Facebookで集客を考えている方には必須のツールです。

OGPで fb:admins を設定済みの場合は、インサイトページを開き、右上の「ウェブサイトのインサイト」から追加できます。
Facebookインサイト

Facebookインサイトに関してや解析の重要性については下記をご覧ください。
フェイスブックのアクセス解析ツール「インサイト(Insights)」の導入と分析方法で分かったこととは?
【保存版】Facebookページ インサイト機能 徹底活用!~画面説明・用語解説編~
【保存版】Facebookページ インサイト 徹底活用!~実践編 押さえておきたい5つの検証ポイント~

Admin ID と APP ID の取得方法

fb:admins の Admin ID は下記のURLの最後に自分のアカウントを入力すれば情報が表示されるので、「id」のところにある数字が Admin ID になります。

http://graph.facebook.com/username

fb:admins と fb:app_id の違いやIDの取得方法に関してはこちらが参考になります。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは

htmlタグのxmlnsは必要?

HTML5の場合、htmlタグのxmlnsは不要のようです。

かわりにheadタグに下記を記述します。(2013.2.27追記)

ウェブサイトの場合

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

ブログトップページの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">

ブログ記事ページの場合

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

詳しくはこちらをご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

 

Pocket
article clipper FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?