プラグインなしでWordpressのOGP対応をやっつける(facebook & Twitterカード)

やわなべです。

WordPressネタはあまり書かないのですが(情報過多気味でノイズが多めに感じるので)、開設1年後にして、ようやくこのブログをTwitterカードに対応させたので、やったことを書いてみます。

すでにfacebook向けのOGPは対応済みでしたので、それと統合させた形です。プラグインなしでやってます。

スポンサーリンク

おい待て、Twitterカードってなんだ?

「Twitterカード」で検索して来られた方には自明のことでしょうから、どうぞこの項は飛ばして先へお進みください。

ブログメディアなどのサイトの新着記事の通知ツィートが、タイムラインでこんな表示になってることありますよね。

こういうの。

これ、ツィートしたアカウント主がブログ投稿したあと、いちいち画像貼っつけてツィートをしてるわけじゃなくて、ツィート内容としてはブログの記事URL貼ってるだけなんですよ。

が、そのURLのページが、Twitterカードという書式に対応していれば、Twitter側がサムネイル画像などを使って上のような整形された表示をしてくれるわけです。

これの何がいいかというと、特にサムネイル画像があると、タイムライン上で目を引きやすいため、クリック率を高める効果があります。

また、自分のツィートでなくても同じように表示されるので、たとえば誰かが過去記事をツィートしてくれたり、更新通知のツィートをリツイートしてくれたりすると、同じようにカード表記されたツィートが拡散されていくわけです。ね、ブログ主としては押さえときたいでしょ。

それってOGPとちゃうんか?」と思った方、よくご存知で。

OGPってのは「Open Graph Protocol」の略語で、同じようにHTMLにOGP書式のタグを書いておくことで、そのページをFacebookなどのSNSにシェアした際に、サムネイル付きで綺麗に表示してくれるというものです。

機能的にOGPとTwitterカードというのは同じ仕組みです。が、OGPがfacebook以外にGoogle+やLinkedIn、mixiなどでも使われる共通のものなのに対して、TwitterはOGPタグを参照しません。OGPとは別に独自仕様のタグをTwitter向けに書く必要があるわけです。

ちなみにはてなブログやLivedoorブログなどの大手ブログサービスではデフォルトでTwitterカードに対応しているようなので、下のようなしちめんどくさい対応は不要ですよ。

Twitterカード対応ステップ

Twitterカードへの対応は以下の様なステップになります。

1. Twitterカードタグをページに挿入

2. Twitterのカード表示プレビュー画面で確認

3. Twitterに承認されるのを待つ

OGPと違うのは3で「Twitterに承認してもらう必要がある」という点。ただ書式に従って書いていればOK、というものではないんですね。

といっても承認は毎ページ行う必要はなくて、一度、サイト内のどれかのページで承認されれば、その後は、他のページにも自動でカードが適用されます。

以下、手順を追って見ていきますが詳しくはTwitterの公式解説ページを参照くださいませ。

(参考)Twitterカード | Twitter Developers

手順1. Twitterカードタグをページに挿入

Twitterカードには、写真、動画、アプリ、といったいろんな種類のカードがあります。基本的に広告主向けの仕組みなんでしょうね。

このうち、ブログサイトであれば「Summaryカード」、あるいは「Summary with Large Image」というタイプでいいでしょう。はてなブログやLivedoorブログでも「Large Image」を利用しているようです。

以下の説明も「Large Image」を使う場合の手順となります。

(参考)Summaryカード | Twitter Developers

(参考)Summary with Large Imageカード | Twitter Developers

Twitterカードは対象ページのHTMLの中で、metaタグを使って表記します。公式ページにあるサンプルコードはこれ

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

「name=”twitter:xxxx“」という名前のメタタグを並べる形ですが、それぞれの内容はというとこう。

meta名 内容 必須
card カードタイプ 必須
site サイトのTwitterID 必須
creator 投稿者のtwitterID 任意
title ページタイトル 必須
description ページ説明 必須
image サムネイル画像URL 任意
url ページURL 任意

ページ説明の「twitter:description」は2行以降はカットされます。また、「twitter:image」に指定する画像のファイルサイズは1MB未満である必要があるようです。

metaタグはHTMLのヘッダー部(headタグ内)に記述するので、Wordpressの場合だと、使ってるテーマのheader.phpの中に書けば、全ページで適用されるかと思います。(詳細は後述)

手順2. Twitterのカード表示プレビュー画面で確認

ページごとのmetaタグがきちんと表示されていることを確認したら、「Card Validator」というTwitterサイト内のページで、実際に表示されるカードのイメージを確認します。


(参考)Card Validator | Twitter Developers

ここの「Card URL」のところにどれか過去記事のURLを入れて「Preview card」をクリック。

こんな感じで整形してプレビュー表示されればOKです。もし書式が違ってる場合は下の「LOG」のところにその内容が表示されますので、それを見てタグを修正しましょう。

手順3. Twitterに承認されるのを待つ

Card Validatorでエラーがなかった場合、「[ブログのドメイン] is whitelisted for summary_large_image_card」のようなメッセージが表示されます。これが出たらTwitter側での承認は得られたと考えていいでしょう。

ただ、設定後のツィートにカード表示が適用されるには少しタイムラグがあります。

私は上のメッセージが出たあとすぐブログの過去記事をテストツィートしてみたのですが、カード表示が適用されていませんでした。

「おかしいな、まだどこか別のところで承認依頼しないといけないのかな」といろいろ調べているうちに、どうやら反映までにタイムラグがあるとのことを知り、再度ツィートすると今度は適用されてました。

時間にして3分くらいだったでしょうか。これが平均的かどうかはわかりませんが、他に申請が必要ということはありませんのでおとなしく待ちましょう。

あと、macの公式クライアントではカード表示されませんのでご注意を。なんでやねん。

WordPressでもOGP & Twitterカード両対応のコード

それではお待たせしました。TwitterカードとOGP、両対応のコードです。あ、鵜呑みにしてそのまま貼っつけてもダメですよ。特にfunctions.phpは、内容に不備があると、サイト全部が真っ白状態になりますので、テストなりバックアップなり自己責任でお願いしますよ。

functions.php

/wp-content/[利用中のテーマ]/functions.php」に以下のfunctionを追加します。

まず26行目の「$twitter_id」はご自分のTwitterIDで書き換えてください「og:xxxxx」ってのがOGPタグです。

ページの説明を示す「description」についてはSEOにおける「meta description」の重要性から、テーマやプラグインなどですでに生成している方が多いかと思います。

この例では「get_description」というfunctionの中で「description」を作ってますが、すでにあるという方はここを調整してください。

上のコードだと、descriptionをこのような仕様で作ります。

・抜粋があれば、抜粋を表示
・ない場合は、本文からタグを除いた先頭120文字を表示
・投稿ページ、固定ページ以外はサイト設定の説明文を表示

そして、どうせ、ここで説明文作ったんなら、ということで、get_ogpの中で「meta description」も出力しています。不要な方はここを削ってください。

header.php

あとはheader.phpの中で上のget_ogpを呼び出せばOKです。

/wp-content/[利用中のテーマ]/header.php」に以下のfunctionを追加します。

こんな感じ。ヘッダー記述は利用のテーマによって大きく異なるので、コピペでなく、適宜調整の上でご利用くださいませ。

しかしソースコード含むWordpressネタ記事書くのって、めっちゃめんどくさいですね。みんなよくやるわ。