Webの記録

Facebook向けに最適なOGP設定の仕方をメモ。

投稿日:2013年1月26日 更新日:

この記事は約 10 分で読めます。

fb_title1

何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要!
・・・と、いうワケで最近はサイトを作ったら「OGP設定」をするようにはしているんですが・・・。

毎回、設定をするときに同じ事を調べている気がします。

すぐに忘れてしまうんですね。。。
そんなワケで、ここにメモを残します。

【2015.8.10追記】Jetpackから自動出力されるOGP設定を削除する方法を追加しました。


設定の仕方

準備
  • Facebook開発者ページより「アプリ」を作成します。あとで、ここで作ったApp IDが必要になります。(メモをしておきます)
  • 縦横とも200px以上のサイズのサムネイル画像をサーバーにアップしておきます。Facebookに載せられた時のサイトのサムネイル画像となります。


※「アプリの作成方法」は、今回省略します。以前と画面が変わっていたようなので・・・。
他の方が詳しく説明されていたので、リンクさせて頂きます。

【アプリ作成参考】Facebookアプリの開発者登録とアプリ作成手順|TechMemoさま


記述方法

WordPressのプラグインなどを使用せず、手入力する場合の方法です。(xhtmlの場合)

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"  xml:lang="ja" lang="ja"  dir="ltr">
<meta property="og:title" content="コンテンツタイトル" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="サイトのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="サイトの説明" />
<meta property="fb:app_id" content="先程作成したアプリのApp ID" />

上記のcontent内の説明は以下です。数字は何行目・・・という意味でみてください。

  1. xhtmlの場合の記述。HTML5の時は他の方が書かれてたのを参考にします。
  2. contentの中は、コンテンツタイトル
  3. contentの中は、「website」もしくは「blog」
  4. contentの中は、サイトのURL
  5. contentの中は、サムネイル画像のURL
  6. contentの中は、サイト名
  7. contentの中は、サイトの説明。通常のサイトのdescriptionをもう1回書く感じでしょうか。。。
  8. contentの中は、準備の段階で用意した、アプリのApp IDを入れます


WordPressでプラグインなしでOGP設定する場合の記述

headの中に以下を記述します。別ファイルを作って記述してもOKです!(以下は上の例の1行目は含んでいません)

<!-- ここから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=(&#91;"\'&#93;)(.+?)\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&#91;0&#93;.'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl&#91;2&#93;.'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="画像のURL">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="画像のURL">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="App ID">
<!-- ここまでOGP -->  

別ファイルで上記を作った場合は、以下の記述をheadの中ですると良いです。

<?php get_template_part('ogpのファイル名');?>


チェック

設定が完了してアップしたら、Facebook開発者ツールのデバッガーを利用してチェックをします

ここでエラーが出たら・・・エラーメッセージを見ながら修正してアップし直します。
エラーがなくなったらOKです♪



私の場合・・・

通常はここまででちゃんと表示されると思います。
今回私は、Facebook開発者ツールチェックデバッガーでチェックすると、URLについてエラーが出てしまいました。。。

ブラウザで実際に表示を確認してみたら・・・私の場合、og:url(13行目にある部分)のURLに最後の「/(スラッシュ)」が入ってませんでした。

ogpイメージ

WordPressの初期設定で入力する「WordPressアドレス(URL)」「サイトアドレス(URL)」が原因っぽいようです。
しかしここで変更ができなかったので、設定でうまく入らないので上記のOGPコードに無理やり「/(スラッシュ)」を追加するようにしました。
13行目を以下のように「/(スラッシュ)」追加で記述し直しました。

echo '<meta property="og:url" content="'; bloginfo('url'); echo '/">';echo "\n";

すると、ちゃんとURLの末尾に「/(スラッシュ)」が表示されるようになりました。

ogp変更後


今まで面倒でプラグインを使ったりしていたのですが、意外にあっさりプラグインなしでできました!
プラグインなしの方が管理も楽だし、ファイルサイズも気にならないので良いかも。

【2015.8.10追記】Jetpackから自動出力されるOGP設定を削除する方法

上記方法でOGPの設定ができますが、WordPressでJetpackを利用していた場合、OGPの記述が二重になる現象がおきます。

またJetpackのOGPは、残念ながらサムネイル画像がない場合の画像がオリジナル画像にならないです。

なので、上記のオリジナルのOGPを活かしてJetpackから自動出力されるOGPの記述を削除する方法をメモします。

function.phpに以下を記述するだけなので、とても簡単です♪

//OGP Jetpackの自動出力を削除
remove_action('wp_head','jetpack_og_tags');
add_filter( 'jetpack_enable_opengraph', '__return_false' );



【参考サイト】
Facebookはよく仕様が変わるので、都度確認が必要そうです。。。
OGPに関して新たな情報を追記しないといけないのですが、まとめられるまで・・・詳しく書かれている方のサイトをリンクさせて頂きます。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …