［解決済み］　Twitter Cards で画像が表示されない時に考えるべきポイント

ブログやサイトを SNS を使って宣伝したいと考えたときに、Facebook や Twitter 上での表示のされかたに気をつけるのが、テクニックとして一般的になっている昨今です。

こういうテクニックは「ちょっとしたこと」で「しなくてもそれほど困らない」んですけど、放っておくとそれなりに「やっている人」と「出来ない人」の差は開いていくもので。

個人的には潰しておくべき設定の部類に入ると考えます。で、放っておいたのは私です。

今回は Twitter Cards の設定で詰まりに詰まっていた部分が解決したので、個人的な総括としてまとめます。

Facebook の OGP や Twitter Cards とは？　みたいな部分には触れませんので、以下の記事等を参考にしてみてください。

Twitter Cardsの画像を大きくしたい! → 再度申請が必要です | mbdb (モバデビ)

プラグイン使うのやめてプラグインレスなOGPを実装することにしました | mbdb (モバデビ)

Google先生に聞けば他にも丸っとコードを載せてくれているサイトがあります。

拡散を狙え！All in One SEO PackのOGPとTwitter Cardの設定方法

Jetpack の自動出力するTwitter Cards のOGP タグを変更する方法 | かっぱのWordPress入門ブログ

プラグインで導入することも難しくないです。

Twitter Cardsの設定や登録でつまずきやすいポイント

ブログやサイトへの変更を全てログに納めている人はなかなかいないと思いますので、自分が確認した部分を以下に。

1. 設定後（metaタグやプラグイン導入後）、Twitterにブログの登録をしなければ表示されない。Cardの種類を変更した際、再申請が必要
2. そもそも設定を適切に
3. Twitter Cardsに関係のない設定（施策）を疑ってみる

上のリストの 1 と 2 に関しては、Twitter Cards を設定し、テストする際に使うTwitter公式のツール「Card Validator」を通せば適切かどうかがわかります。

Card Validator | Twitter Developers

いろんなブログでTwitter Cardsについての言及や設定が詳しく書いていると思いますが、まずは以下の

トラブルシューティングガイド | Twitter Developers

を読んでから設定にトライした方が安全かも知れません。プラグイン等でスルッと設定しようと考えている方も、全然別方面でのカスタマイズの際に詰まる可能性があるからです。自分の場合はそうでした。

Twitter Cardsに関係のない設定（施策）を疑う

トラブルシューティングをよく読まずに、Card Validatorばかりを気にかけていて全然気がつけなかったんですが、実はトラブルシューティングの一番上（多分ここでよく詰まるから）に

CMSサイトがウェブクローラをブロックするように設定されている。
Wordpress、Bloggerなどのホスト型CMSプロバイダーを使用している場合、Twitterサーバーからのクローラのアクセスをブロックするように意図せず設定している可能性があります。「CMS統合ガイド」を参照し、お使いのCMSサイトへのウェブクローラのアクセスを有効にしてください。

ウェブサイト内のrobots.txtによって、カードのメタデータへのアクセスがブロックされている。
これを診断する方法については、こちらをクリックしてください。

Apacheの.htaccessファイルによってリクエストが拒否されている。
.htaccessファイルを開き、以下のような記述がないかを探すことで確認できます。

上記のような記述があります。

こちらのエントリーにて自分は気がつきました。対応策もエントリ内にあります。

自分の場合は端的に言えば、ドメイン外からの直リンを防ぐためにとったrobots.txtの書き込みが原因で、Twitterのクローラーが画像にたどり着けていませんでした。

また、別方面としてSEOの対策としてrobots.txtを適切に！みたいな流れで/wp-content/へのクロールを止めるパターンも考えられます。

robots.txtファイルを使用して、Twitterのアクセスを許可するようにウェブサーバーを構成。

自分のようにいろんなカスタムをちょこちょこと時間をおいてやっていると、Twitter Cardsの設定時に施したわけではない箇所で詰まる可能性があります。

大事なコトなのでもう一回。

Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった *Ateitexe

実践的なrobots.txtは上のエントリを参考に。

まとめ

問題解決までの堅実なやり方としては、

1. 一回落ち着く。
2. 反映待ちを考える。
3. Card Validatorを通す
4. トラブルシューティングを通読・精読
5. いろんな別のカスタマイズを思い出す。

地味かつ当たり前の着地でまことに申し訳ないですが、そうなんだからそうなんだもん。

人それぞれ詰まるポイントは違うでしょうけど、クローラーが一番怪しい。今まで他のカスタマイズに詰まったことがない人ほど陥りやすい罠ポイントだと感じてエントリにしました。

痛感していることは、変更を加えたことを記録しておくこと、がなによりもトラブル解決の早道ですね。大まかにでもEvernoteに記録しておくと、頭の中で憶えておかなくてもよくなるし精神衛生上よろしいみたいです。

SEOやらOGPやらの一つ一つの細かいティップスの知識は自分の中にそこそこ蓄積していると思っていたんですが、そもそもGoogleとSEOとは？とか、サイトに画像が表示される仕組みやら、SNSが画像を拾って反映される条件、みたいなベーシックな部分を甘く見ていて、的確に知識と知識が結びついて実践的に使えるのが勉強だよなぁといろいろ反省する次第です。

自分のように「もうCardの画像は諦めたわ、マジで」って人の参考になりますように。

文：シンタロヲフレッシュ

はてブ

pocket

twitter