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を設定している場合は、上記の２行を追加するだけで対応できます。
TwitterのIDは、＠付きで記入してください。
参考：
・Twitter Cardsを設定して自社サイト情報をツイートに出す2つの手順（OGP済みなら10分でOK） | 編集長ブログ―安田英久 | Web担当者Forum
Twitter Cardsの確認と登録
Twitterにログインした状態で、上記から動作確認できます。
動作確認すると、ホワイトリスト（表示許可）にはいるようで、特に申請とかも必要なくTwitter Cardsが表示されるようになります。（以前は、申請の必要がありました）
きちんと認識されている場合は、画像の用になるのでそうならない場合は見直してみてくださいね。
どうしても、うまくいかない場合
・[WordPress] Twitter Card を Twitter 公式プラグインを利用して導入する方法 | CodeNote.net2行だけでOKなので、上記のTwitter 公式プラグインを導入しても同じ結果にはなるので、まずはそれで確認するのも一つの方法かと思います。
スポンサーリンク
コメントを残す