プラグインなしで、Facebook OGPとTwitter Cardsの設定をする

Facebook OGPの設定

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

テーマファイルの「header.php」のheadタグを上記のように変更する

<!-- OGP -->
<?php
if ( is_singular()){
echo '<meta property="og:type" content="article" />';
echo "\n";
}else{
echo '<meta property="og:type" content="website" />';
echo "\n";
}
?>
<meta property="og:url" content="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" />
<?php
if (is_singular()){//投稿ページ、固定ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:title" content="'.the_title("", "", false).'" />';echo "\n";
          echo '<meta property="og:description" content="'.str_replace("\n", "",get_the_post_excerpt(100)).'" />';echo "\n";//抜粋を表示
     endwhile; endif;
} else {//投稿ページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:title" content="'; bloginfo('name'); echo'" />';echo "\n";
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:locale" content="ja_JP" />
<?php
  //記事画像がないときに表示する画像のURL
  $s_img ="images/no-image.png";
  if(is_single()){
  $s_img =get_the_content_image();
  }
  echo '<meta property="og:image" content="'.$s_img.'" />';
  echo "\n";
?>
<!-- /OGP -->

■記事の抜粋:get_the_post_excerpt()
記事の抜粋を指定文字だけ取り出す 【WordPress】
■画像のURL:get_the_content_image()
記事の一番最初の画像を取得してサムネイルにする方法【WordPress】

テーマーのfunction.phpに上記の関数を追記したうえでご利用ください。
抜粋や画像のあたりは、逆に上記の関数内を書き換えると、好みどおりに変更できるかと思います。

■27行目
$s_img ="images/no-image.png";
この部分は、記事画像がない時、トップページなどの時に設定される画像のURLに書き換えてご利用ください

参考:
Facebook Open Graph Protocol: Use & Optimise it in WordPress - Yoast
貼るだけ簡単!アクセスが倍増するWordPress用OGPコード | OXY NOTES
[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | コンチクワブログ

OGPの確認


http://developers.facebook.com/tools/debug

Facebookにログインした状態で、上記のURLで確認ができます。
トップページ、記事ページ、カテゴリーページなどを確認すればOKかなと思います。
現実問題、記事ページさえちゃんと動作していれば、問題ないことが多いとは思いますが・・・。

うまく認識されていれば、画像のような感じになるので確認自体は簡単です。

Twitter Cardsの設定

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TwitterのIDを記入" />

FacebookのOGPを設定している場合は、上記の2行を追加するだけで対応できます。
TwitterのIDは、@付きで記入してください。

参考:
Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順(OGP済みなら10分でOK) | 編集長ブログ―安田英久 | Web担当者Forum

Twitter Cardsの確認と登録

Card Validator | Twitter Developers

Twitterにログインした状態で、上記から動作確認できます。
動作確認すると、ホワイトリスト(表示許可)にはいるようで、特に申請とかも必要なくTwitter Cardsが表示されるようになります。(以前は、申請の必要がありました)

きちんと認識されている場合は、画像の用になるのでそうならない場合は見直してみてくださいね。

どうしても、うまくいかない場合

[WordPress] Twitter Card を Twitter 公式プラグインを利用して導入する方法 | CodeNote.net

2行だけでOKなので、上記のTwitter 公式プラグインを導入しても同じ結果にはなるので、まずはそれで確認するのも一つの方法かと思います。

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。