WordPressブログにTwitter Cardsを設定してみたその1

WordPress

2012.09.29

今後の動向をしばらく見ていく必要がありますが、Twitter CardsをWordPressのブログに設定する為のプラグインTwitter Cardsを導入してみました。

Twitter Cardsを設定しておくと、Twitter内にブログのタイトルや概要、投稿画像などを表示させることができるようになります。

設定は、FacebookのOGP対応と同じようにmetaタグに仕込みを入れていく感じになりますので、今回は<head>内にTwitter のタグを設定する方法について紹介させていただきます。

Twitter Cards プラグインの導入
Twitter Cards を手動で設定する

Twitter Cards プラグインの導入

WordPressの管理画面よりTwitter Cardsプラグインを検索して新規インストールします。

プラグインを有効化すると、<head>内に

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="各ページのURL（パーマリンク）">
<meta name="twitter:title" content="各ページのタイトル">
<meta name="twitter:description" content="各ページのdescription。200文字制限">
<meta name="twitter:image" content="各ページの画像">
<meta name="twitter:image:width" content="各ページの画像の幅（px）">
<meta name="twitter:image:height" content="各ページの画像の高さ（px）">

のmetaタグが吐き出されますので、WordPressブログへの設定に関してはこれが一番簡単な方法かもしれません。

ちなみにmetaタグの1行目ですが、Twitter Cardsには
・summary
・photo
・player
などの種類がありますが、基本はsummaryになると思います。

参考ページ
http://adiary.blog.abk.nu/0288

Twitter Cards を手動で設定する

Twitter Cardsプラグインを利用しても、何故かブログトップページにはタグが吐き出されなかったので、FacebookのOGP対応の時と同様、手動で振分処理をしました。

以下は簡単な振分処理の例です。

single.phpの時だけ、個々の記事のタイトルやパーマリンクなどを取得します。

<meta name="twitter:card" content="summary">

<?php
global $post;
setup_postdata($post);
//single.php
if ( is_single()) { ?>
    <meta name="description" content="<?php the_excerpt_rss(); ?>">
    <meta property="twitter:title" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>">
    <meta property="twitter:url" content="<?php the_permalink() ?>">
    <meta property="twitter:description" content="<?php the_excerpt_rss(); ?>">
<?php }
//single.php以外
else{ ?>
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <meta property="twitter:title" content="<?php bloginfo('name'); ?>">
    <meta property="twitter:url" content="<?php bloginfo('url'); ?>/">
    <meta property="twitter:description" content="<?php bloginfo('description'); ?>">
<?php } ?>
<meta name="twitter:image" content="画像URL">
<meta name="twitter:image:width" content="画像の幅（px）">
<meta name="twitter:image:height" content="画像の高さ（px）">

<?php

global $post;

setup_postdata($post);

//single.php

if ( is_single()) { ?>

<?php }

//single.php以外

else{ ?>

<?php } ?>

※twitter:imageに関しては、当ブログではトップページ、アーカイブ、カテゴリ、記事詳細と共通の画像を利用していることと、投稿画像の1枚目を取得する処理を仕込むなど別途カスタマイズが必要になりますので、この場では省略しています。

Twitterにサイト申請中（でまた許可が下りていない…）のため、動きが有り次第、申請方法とその効果などを含めた第2弾記事を書きたいと思います。