「Twitter Card」一覧

WordPressの記事をTwitterに投稿してもTwitter Cardが表示されないサイトがある問題。原因はテーマによるOGP対応・非対応の違いでした。

ウェブログ

何やってんだかよくわからないと言うお声を時々いただいております。オケタニです。毎日、朝の連続テレビ小説で広瀬すずと中川大志の恋の行方にドキドキしたり、吉本興業のゴタゴタをワイドショーで楽しく眺める日々を送っております。楽しいな!! 楽しいな!!（←という「仕事下さい!!」という悲痛な心の叫び。）

そんな毎日ですが、このブログをはじめ、いくつかのサイトを WordPress で作っては消し、作っては消し、という賽の河原で石ころを積み上げては鬼にブッ壊されるようなことをしたりもしています。色々と試してみたい病が持病にあるものですから、テーマやプラグインを色々と試してみては「これは違う…」「あれはうまくいかない…」とモン★モン Days を送っているのですが、その中で困っていたのが、

「WordPress で記事を公開した後にTwitterに記事のURLを投稿すると、そのツイートにTwitter Cardがちゃんと投稿されるサイトとされないサイトがある」

という事でした。

Twitter Card sample

以前仕事で WordPress をいじっていた時は特に何も考えずともTwitter Cardが表示されていたので、そのノリで続けていたんですけども、どうやらこれはちゃんと確認しないとこのモヤッとした状態が解消されないよねぇ…という事でちょいちょいっと調べてみたらあっさり解決しました。

原因その1：テーマがOGPに非対応

WordPressテーマとプラグインの相性　OGPの重複出力にはご注意 | うれしデザイン

WordPressで書いた記事をTwitterやFacebookでシェアした時、意図した通りのアイキャッチ画像が出ないことがありませんか？

SNSでシェアしたときにアイキャッチ画像を付けるには、OGP(Open Graph Protocol)の設定が必要です。

正に今回問題になっているポイントがここ。SNS でシェアする時に OGP が適切に設定されていないとならないというのは一応知識とは知ってましたが、具体的に何をどうするの？はほとんど今まで意識してなかったわけです。

で、ここで知ったのが…

最近の高機能な有料テーマではOGPの設定がテーマの機能として組み込まれていることが多く、プラグインを使う必要はほとんどなくなっています。

つまり裏を返せばテーマ側に機能がなければ、プラグインで追加してやらなければならないというわけです。

今回問題になっていたサイトのテーマは有料のテーマだったので、「まさか対応してないって事はないだろう…」と思いつつ記事のソースを見てみると…

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

手順3：「ページのソースを表示」をクリック

ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。

手順4：「og:」で検索

すると、そのページを構成しているHTMLタグがずらっと表示されます。

<(；´・ω・)> 「対応されてねェーッ!!!」

という事が判明。Twitterカードなんぞ出てこなくて当然、だったわけです。有料のテーマなのに…　有料なんですけど…（※ちなみにテーマの公式 Q&A を確認したら「手動かプラグインで対応してね★エヘッ」って書いてありました。ぎゃふん）

原因2：JetPack プラグインでSNS連携を切っていた

OGP 機能を追加するプラグインはいくつかあります。

WordPressテーマとプラグインの相性　OGPの重複出力にはご注意 | うれしデザイン

OGPの出力機能があるプラグイン

1. All in One SEO Pack
2. Yoast SEO
3. Jetpack
4. Open Graph Pro

OGPタグの設定とWordPress（ワードプレス）用プラグイン。　これからのホームページにOGPタグは必須の設定項目です。 | 小さな会社の経営者の最強ホームページ戦略

WP-OGP
Open Graph Proとほぼ同じシンプルなプラグインです。

オケタニはほとんどのサイトに JetPack を導入しているので、既に OGP を出力する環境にはなっているはず。

(；´・ω・) 「でも現実には出力されていない… 何故だ。」

Jetpack OGPとTwitterカードタグのカスタマイズ – セルティスラボ

JetPackプラグインでパブリサイズ共有や共有を有効にすれば自動的に出力されます

通常、WordPress の記事を Twitter に投稿する際は色々と手を加えたりすることが多いので JetPack のパブリサイズ共有は OFF にしているのですが、これがダメだった模様。

そこで JetPack の [設定] → [共有] → [パブリサイズの接続] → [投稿をソーシャルネットワークに自動共有] を ON にして、Twitter を該当のアカウントに接続するように設定します。

これで記事のソースを再度確認すると無事に OGP 設定が反映され、OGP の準備は整いました。

原因3：サイトが Twitter の Card Validator で認証されていなかった

Twitter カードに関する解説ページを色々見ておりますと、

Jetpack OGPとTwitterカードタグのカスタマイズ – セルティスラボ

Twitter で画像イメージ等を表示するには Twitter カードの申請が必要です

Twitterカードに関しては下記参照
https://dev.twitter.com/ja/cards/overview

申請しないと Twitter カード情報のメタタグが出力されていても使われません
申請は、使用するカードタイプ毎に必要なので注意です

という記載があちこちで見られるんですが、今はこの申請作業は不要との事。「下記参照」のページも既に削除されています。

Twitter Cardの登録申請は簡易化されてほぼ無いので古い情報には注意してね！ – LIFE-IDEA

検索結果に出て来る古い記事を参考にしているとここでつまづく人が多いかと思われます。
古い記事はここで面倒な手入力があったそうですが、今はそんなものはございません。

古いページで紹介されている申請ページのURLはいかの通り。
https://cards-dev.twitter.com/validator

じゃあ何もしなくても OGP が出力されていれば自動的に Twitter Card も表示されるようになるのか？と言うと決してそんな事はなく、申請作業はちゃんとしなければなりません。オケタニ、これに気付かず

(；´ーω-) 「何故出ない… 何故出ない…」

と小一時間悩みに悩みました。

具体的にどうすればいいのかと言いますと…

いまどきの申請ページは以下の通りです。
https://cards-dev.twitter.com/validator

承認が完了すると以下の画像の通りになります。

自分のサイトのどこかのページを上記の申請ページ「Card Validator」にて入力、[Preview card] をクリックしてページの右側に Twitter Card が適切に表示され、Log 欄にエラーが出てなければサイトの申請は無事に完了となります（らしい）。これ1回やれば、後は同じドメインのサイト（サブドメインも含む）のページは全て Twitter Card 対応となります。

以上で WordPress の記事を Twitter Card に対応させる作業は完了でございます。また新しいサイトを立ち上げる時はこれを忘れないようにしなければなりません、っつーわけですね。