最強のfacebook向けOGPコード?普通のWordPressブログならほとんど対応できるであろうシンプルなコードを紹介

Written by Joe
A view of Facebook's logo May 10, 2012 i

結局徹夜になりました。

OGP

ここに来たということはもうご存知でしょう、OpenGraphProtocol。

FacebookなどのSNSでリンクをシェアした際、表示するタイトルや画像を指定できるものです。

それを設定できるコードを書きました、これからブログで設定するという人の参考になれば嬉しいです。

最強といったけれども

タイトルにはちょっと釣り要素が含まれます^^;。というのも、まずアイキャッチ画像があることが前提、記事の抜粋は適当です。

では、以下。

 <meta property="fb:admins" content="xxxxxxxxxxxxxxx" /> //FacebookページやユーザーIDを入力
 <meta property="og:locale" content="ja_JP"> //言語が日本語であると伝える
 <meta property="og:site_name" content="<?php bloginfo('name');?>"> //このURLがあるサイトの名前を伝える

<?php if(is_single() || is_page()) : ?> // 単一記事もしくは固定ページの場合
   <meta property="og:type" content="article"> // コンテンツがブログなどの記事であることを伝える
   <meta property="og:title" content="<?php the_title(); ?> « <?php bloginfo('name');?>"> // そのままのタイトル « ブログタイトル
   <meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>"> // アイキャッチ画像のURLをOGPイメージに設定
   <meta property="og:url" content="<?php the_permalink(); ?>"> // 記事のURLを伝える

<?php elseif(is_home() && !is_paged()) : ?> // トップページの1ページ目の場合
   <meta property="og:type" content="website"> // ページがサイトトップであることを知らせる
   <meta property="og:title" content="<?php bloginfo('name');?>"> // ブログの名前
   <meta property="og:image" content="<?php bloginfo(template_url);?>/images/ringo.png"> // この時表示されるOGPを設定。とりあえず、AppleTouchIconに。
   <meta property="og:url" content="<?php bloginfo('url') ?>"> // ブログのトップのURL
   <meta property="og:description" content="<?php bloginfo('description');?>"> // ブログの紹介(設定→一般で変えられる

<?php else : ?> // 以上のどれにも当てはまらない、記事一覧の2ページ目以降やアーカイブページ。
   <meta property="og:type" content="article"> // ページがトップでない下層にあることを伝える
   <meta property="og:image" content="<?php bloginfo(template_url);?>/images/ringo.png"> // この場合のイメージもAppleTouchcIconに。
   <?php if( is_category() ) { ?>                                         //以下、アーカイブの名前をアーカイブの種類ごとに用意。
      <meta property="og:title" content="<?php single_cat_title(); ?>">
   <?php } elseif( is_tag() ) { ?>
      <meta property="og:title" content="<?php single_tag_title(); ?>">
   <?php } elseif( is_tax() ) { ?>
      <meta property="og:title" content="<?php single_term_title(); ?>">
   <?php } elseif (is_day()) { ?>
      <meta property="og:title" content="日別アーカイブ:<?php echo get_the_time('Y年m月d日'); ?>">
   <?php } elseif (is_month()) { ?>
      <meta property="og:title" content="月別アーカイブ:<?php echo get_the_time('Y年m月'); ?>">
   <?php } elseif (is_year()) { ?>
     <meta property="og:title" content="年別アーカイブ:<?php echo get_the_time('Y年'); ?>">
   <?php } elseif (is_author()) { ?>
      <meta property="og:title" content="投稿者アーカイブ:<?php echo esc_html(get_queried_object()->display_name); ?>">
   <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
      <meta property="og:title" content="ブログアーカイブ">
   <?php } ?>
   <meta property="og:url" content="<?php echo $_SERVER["REQUEST_URI"]; ?>"> // 現在表示しているURLをOGPURLとして設定(本当は全部コレでいいんだけれどね
   <meta property="og:description" content="<?php the_title(); ?> « <?php bloginfo('description');?>"> // 先ほどと同じ紹介文
<?php endif ; ?>

あまり、こういうのに慣れているわけではないので、ひょっとしたらどこかに全角スペースや全角記号が紛れ込んでいるかも知れません。

とりあえず、毎回記事にサムネを設定をする真面目なブログならコレでカバーできるでしょう。

サムネの有る無しを判断してない場合画像を当てはめる、なんてのも調べればできるはず?

ヘッダーへの以下の記述も忘れずに。

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

まとめ

  1. PHPとか全くわからない素人だけどなんかうまく行ったはず。
  2. 徹夜になってしまって今死にそう。でも頑張った甲斐はあった!

 

そもそも、何故こんなことをしたかといいますと、今まではヨッセンスさんで紹介されていたコードをそのまま使っていたのですね。

ですが、数ヶ月立ってOGP見直そうと思って見てみると、どうなってるのか自分ではわかりませんでした。

やっぱ自分で書いたほうがわかりやすいのかな?と思い始めた結果、終わらなくなってしまい。。。

個人的に満足しているのでいいですね!

分からない事がある?質問しよう!