2015年11月23日Wordpressやわなべです。WordPressネタはあまり書かないのですが(情報過多気味でノイズが多めに感じるので)、開設1年後にして、ようやくこのブログをTwitterカードに対応させたので、やったことを書いてみます。facebook向けのOGPは対応済みでしたので、それと統合させた形です。プラグインなしでやってます。スポンサーリンクおい待て、Twitterカードってなんだ?「Twitterカード」で検索して来られた方には自明のことでしょうから、どうぞこの項は飛ばして先へお進みください。ブログメディアなどのサイトの新着記事の通知ツィートが、タイムラインでこんな表示になってることありますよね。これ、ツィートしたアカウント主がブログ投稿したあと、いちいち画像貼っつけてツィートをしてるわけじゃなくて、ツィート内容としてはブログの記事URL貼ってるだけなんですよ。そのURLのページが、Twitterカードという書式に対応していれば、Twitter側がサムネイル画像などを使って上のような整形された表示をしてくれるわけです。これの何がいいかというと、特にサムネイル画像があると、タイムライン上で目を引きやすいため、クリック率を高める効果があります。自分のツィートでなくても同じように表示されるので、たとえば誰かが過去記事をツィートしてくれたり、更新通知のツィートをリツイートしてくれたりすると、同じようにカード表記されたツィートが拡散されていくわけです。ブログ主としては押さえときたいでしょ。「それってOGPとちゃうんか?」と思った方、よくご存知で。Protocol」の略語で、同じようにHTMLにOGP書式のタグを書いておくことで、そのページをFacebookなどのSNSにシェアした際に、サムネイル付きで綺麗に表示してくれるというものです。機能的にOGPとTwitterカードというのは同じ仕組みです。OGPがfacebook以外にGoogle+やLinkedIn、mixiなどでも使われる共通のものなのに対して、TwitterはOGPタグを参照しません。OGPとは別に独自仕様のタグをTwitter向けに書く必要があるわけです。ちなみにはてなブログやLivedoorブログなどの大手ブログサービスではデフォルトでTwitterカードに対応しているようなので、下のようなしちめんどくさい対応は不要ですよ。Twitterカード対応ステップTwitterカードへの対応は以下の様なステップになります。Twitterに承認されるのを待つOGPと違うのは3で「Twitterに承認してもらう必要がある」という点。書式に従って書いていればOK、というものではないんですね。いっても承認は毎ページ行う必要はなくて、一度、サイト内のどれかのページで承認されれば、その後は、他のページにも自動でカードが適用されます。以下、手順を追って見ていきますが詳しくはTwitterの公式解説ページを参照くださいませ。Twitterカードタグをページに挿入Twitterカードには、写真、動画、アプリ、といったいろんな種類のカードがあります。基本的に広告主向けの仕組みなんでしょうね。Image」というタイプでいいでしょう。Image」を利用しているようです。Image」を使う場合の手順となります。DevelopersTwitterカードは対象ページのHTMLの中で、metaタグを使って表記します。content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">「name=”twitter:xxxx“」という名前のメタタグを並べる形ですが、それぞれの内容はというとこう。任意ページ説明の「twitter:description」は2行以降はカットされます。「twitter:image」に指定する画像のファイルサイズは1MB未満である必要があるようです。metaタグはHTMLのヘッダー部(headタグ内)に記述するので、Wordpressの場合だと、使ってるテーマのheader.phpの中に書けば、全ページで適用されるかと思います。Validator」というTwitterサイト内のページで、実際に表示されるカードのイメージを確認します。card」をクリック。こんな感じで整形してプレビュー表示されればOKです。書式が違ってる場合は下の「LOG」のところにその内容が表示されますので、それを見てタグを修正しましょう。summary_large_image_card」のようなメッセージが表示されます。これが出たらTwitter側での承認は得られたと考えていいでしょう。設定後のツィートにカード表示が適用されるには少しタイムラグがあります。私は上のメッセージが出たあとすぐブログの過去記事をテストツィートしてみたのですが、カード表示が適用されていませんでした。「おかしいな、まだどこか別のところで承認依頼しないといけないのかな」といろいろ調べているうちに、どうやら反映までにタイムラグがあるとのことを知り、再度ツィートすると今度は適用されてました。時間にして3分くらいだったでしょうか。これが平均的かどうかはわかりませんが、他に申請が必要ということはありませんのでおとなしく待ちましょう。あと、macの公式クライアントではカード表示されませんのでご注意を。Twitterカード両対応のコードそれではお待たせしました。TwitterカードとOGP、両対応のコードです。あ、鵜呑みにしてそのまま貼っつけてもダメですよ。functions.phpは、内容に不備があると、サイト全部が真っ白状態になりますので、テストなりバックアップなり自己責任でお願いしますよ。functions.php「/wp-content/[利用中のテーマ]/functions.php」に以下のfunctionを追加します。26行目の「$twitter_id」はご自分のTwitterIDで書き換えてください「og:xxxxx」ってのがOGPタグです。description」の重要性から、テーマやプラグインなどですでに生成している方が多いかと思います。この例では「get_description」というfunctionの中で「description」を作ってますが、すでにあるという方はここを調整してください。上のコードだと、descriptionをこのような仕様で作ります。description」も出力しています。不要な方はここを削ってください。header.phpあとはheader.phpの中で上のget_ogpを呼び出せばOKです。「/wp-content/[利用中のテーマ]/header.php」に以下のfunctionを追加します。ヘッダー記述は利用のテーマによって大きく異なるので、コピペでなく、適宜調整の上でご利用くださいませ。ソースコード含むWordpressネタ記事書くのって、めっちゃめんどくさいですね。