WordPressで運用している個人サイトをTwitter Cards対応にした

先日、自分が運営してる個人サイトをTwitter Cardsに対応させました。

一度ずいぶん前にTwitter Cardsに対応させようとして調べたらFacebookがどうのこうのとあって面倒そうだったのでやめちゃいました。Facebookのアカウントをとる気がないし。

で、最近ふとやっぱりなんとかならないかなと思ってもう一度調べたら別にFacebookとは関係なく対応できることがわかりました。Facebookの仕組みも使うことができるってだけであったのでした。しかもHTMLのMETAタグを数行追加するだけだし。

とはいえちゃんとやろうとするとやはりそれなりに手間がかかりますね。その記録を書きます。WordPressでの対応のさせ方となります。あと比較的簡単なことであればプラグインなしで対応せたいのでプラグインは使っていません。

Twitter Cardsには数種類あるけど今回は一番シンプルなSummaryにしました。
twitte.com → 開発者 → Learn about discovering and embedding Tweets → Twitter Cards → Learn More about Twitter Cards → Summary Card
によると以下の5行を追加するだけ。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ツイッターユーザー名" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="概要" />
<meta name="twitter:image" content="表示する画像のURL" />

twitter:card

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

summaryはTwitter Cardsの種類なのでそのまま書くだけ。

twitter:site

<meta name="twitter:site" content="@ツイッターユーザー名" />

ツイッターユーザー名も自分のtwitterのユーザー名を書くだけ。

twitter:title

<meta name="twitter:title" content="タイトル" />

タイトルは記事のタイトルなのでWordpressならget_the_title()を使えばいいんだけどトップページのときはサイトのタイトルにするためにbloginfo('name')にします。

と書いてから気づいだんだけどひょっとしてbloginfo()を使わなくてもget_the_title()でもいいのかな？

if(is_home()) {
 $title = get_bloginfo('name');
} elseif(is_single()) {
 $title = get_the_title($post->ID);
} elseif(ispage()) {
 $title = get_the_title($post->ID);
} else {
 $title = get_bloginf('name');
}
<meta name="twitter:title" content="<?php echo $title; >" />

twitter:description

<meta name="twitter:description" content="概要" />

概要は個人サイト構築時にget_meta_description()というのを作成していたのでそれを利用。Wordpressの本だったか検索して見つけたかどっちだったか忘れましたがそれを自分のサイトに合わせて変更したものを使ってます。

これはdescriptionを記事、固定ページ、カテゴリページ、などにあわせた内容を返す関数をfunction.phpに記述してあります。

そのまま使うだけのつもりだったんですが一言書いた後にYouTubeへのリンクを書いた記事があってそれだとそのURLが表示されてしました。それではまずいだろうとURLを削除する行を一行追加しました。

このURLを削除するってPHPやWordpressの関数にありそうでないんですね。検索しても見つけられませんでした。HTMLのタグを消す関数はあるみたいですが。

で、PHPの置換関数で削除したのですがURLの正規表現を検索するとなかなか複雑。ちゃんと意味を理解してから使いたかったのですが解読するのが面倒だったので自分なりの簡易的な正規表現を使うことにしました。厳密な表現をする必要はないので。

とりあえず

$str = preg_replace('^https?://[\w./?=&%-]+^', '', $str);

こんな感じで。もちろんこの前にstrip_tags()などの処理を行ってます。

if(is_home()) {
 $description = get_bloginfo('description');
} elseif(is_single()) {
 $description = get_meta_description(); /* 自作関数 */
} elseif(is_page()) {
 $description = get_meta_description(); /*自作関数 */
} else {
 $description = get_bloginfo('description');
}
<meta name="twitter:description" content="" />

twitter:image

<meta name="twitter:image" content="表示する画像のURL" />

これも内容にあわせて何を指定するか調整しなければいけません。

個別記事以外はサイトをイメージした画像、例えばロゴとかFaviconとかを表示させます。

個別記事のときがちょっと面倒でアイキャッチ画像があればそれを、なければ記事に貼り付けた最初の画像を、なければサイトのイメージ画像にします。

サイト構築時に「記事の最初の画像」を表示するコードを作ってあったのでそれを使います。これは検索してweb上で見つけたものを使ってます。

get_children()とwp_get_attachment_image_src()を使ってURLを得ています。

if(is_home()) {
 $image = get_template_directory_uri() . '/images/XXXXXXXX.jpg';
} elseif(is_single()) {
 if(has_post_thumbnail()) {
  $image = wp_get_attachment_image_url(get_post_thumnail_id(), 'medium');
 } else {
  $attachments = get_children(
    "post_parent=$post->ID&post_type=attachment&post_mime_type=image");
  $att_images = array_reverse($attachments);
  $att_image  = array_shift($images);
  if($att_image) {
   $image = wp_get_attachment_image_url($att_image->ID, 'medium');
  } else {
   $image = get_templage_directory_uri() . '/images/XXXXXXXX.jpg';
  }
 }
} elseif(is_page()) {
 $image = get_template_directory_uri() . '/images/XXXXXXXX.jpg';
} else {
 $image = get_template_directory_uri() . '/images/XXXXXXXX.jpg';
}
<meta name="twitter:image" content="" />

コードのまとめ

上記のコードで無駄があるように見えると思いますがmetaタグごとに記述したからでこうなったのであって実際にはif文をひとつにまとめて記述しています。

if(is_home()) {
  $title = get_bloginfo('name');
  $description = get_bloginfo('description');
  $image = get_template_directory_url() . '/images/XXXXXXXX.jpg';
} elseif(is_single()) {
 $title = get_the_title($post->ID);
 $description = get_meta_description();
 ...

のように。

このコードをtwittercard.phpとして保存し、header.phpのの間に

<?php get_template_part('twittercard'); ?>

を追加することでTwitter Cardsに対応できました。

Twitterに申請

で、ただ上記のmetaタグを入れただけではだめでTwitterに申請しないといけないらしいので早速実行した。

うまく表示されるか確認することができるページがあるのでそこで確認。
twitte.com → 開発者 → Learn about discovering and embedding Tweets → Twitter Cards → Learn More about Twitter Cards → validator tool （日本語のページなら：検証ツール）

以前はエラーがなければ申請する必要があったらしいけど、現在はこの検証ツールで正常に表示されるだけでOKになる。たぶん申請の数がものすごく多くて承認作業が大変になったからじゃないだろうか。

Twitterに投稿して実際の表示も確認できたのですべての作業はこれで終わりました。