Twitterカードを設定してみた

Twitterカードがいいらしいので設定してみた。

Twitterカードという単語は初めて聞いたが、ツイートにURLを入れた時に画像付きで表示されるあれらしい。
Twitterカード | Twitter Developers.
色々と種類があるらしい。よく見るタイプの小さい画像にページの説明が入っているやつはSummaryカード。画像が大きいやつ。画像のみ、画像4枚、アプリ、など。

とりあえず、今回はブログの1記事なのでSummaryカード。
Summary Card | Twitter Developers.
HTMLのmetaタグで書けばいいのね。twitter:cardはカードの種類なので必須、「summary」を設定。twitter:siteはTwitterのユーザで、カードのアクセス解析に必須らしい。twitter:titleは文字通りタイトル。twitter:descriptionはページの説明で、タイトルの流用はNGらしいです。

といわけで、WordPressのテーマでheader.phpにこんなコードを入れてしまいました。

<?php if (is_single() && isset($post->ID)) { ?>
       <meta name="twitter:card" content="summary">
       <meta name="twitter:site" content="@tezuuuuuka">
       <meta name="twitter:title" content="<?php echo $post->post_title; ?>">
       <meta name="twitter:description" content="<?php echo mb_strimwidth(mb_ereg_replace("^[\r\n]+", '', strip_tags($post->post_content), 'm'), 0, 300, '…'); ?>">
<?php } ?>

単一記事の表示の時のみ表示させます。ページの説明は悩みましたが、タグを除去して、空行を除去して、先頭300文字を設定しました。

使い回しを考えたらプラグインでやるべきなんだろうね。たぶんwp_headフックに引っ掛ければいいんだと思う。そして、そういうプラグインは既に存在しているようなので、お急ぎの方はそちらを探してみてくださいね。