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

twitter公式ページのTLにて、画像や著作者のアカウントなどを一緒に表示してくれるTwitterカード。これの画像が最近表示されてないな…と気になっていたのですが、自分のせいでした(;´Д`) 解決に至るまでいろいろ調べたのでメモ的に。

Twitter Cardsとは

• Twitterカード — Twitter Developers

Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。

というもので、公式ページのTLで画像とかいろいろ一緒に表示されて、見栄えが良くなるしクリック率も上がるかも！と、わたしも利用していました。

自分で自分の記事をツイートしたときは、こんな感じで表示されていました。

カード内の画像が表示されない

ここ最近、記事によって画像がこんな風になってしまっているのが気になっていました。

そんな折、facebookのOGP画像がまた意図しない動きを見せていたので、あぁまた推奨サイズが変わってしまったのだなと思って、設定サイズを変更しました。

• Debugger

で、これを検証すべくデバッガーでチェックしたら、

画像出てない！！！

あわあわしながらこの画像のあるべき場所をマウスオーバーしてみたら、ブラウザの隅っこに出てきた参照URLが古いURLになっている…！

こちらのボタンを押してキャッシュをクリアすると、無事新しいほうの画像URLを取得してくれました！

ここで思ってしまったのです。「そうか！Twitterカードで画像が出てなかったのもこのせいだったんだー！」と。そのおかげで回り道をする羽目になるとも知らずに…。

Twitterカードのキャッシュクリアをしようと奮闘

キャッシュが残っていて古いURLを見に行ってるのだと疑わなかったわたしは、あれこれとキャッシュの更新を試みました。

<meta property="og:image" content="画像URL">

元々これでfacebook等も含めてTwitterカードにも対応しているはずなのですが、

<meta name="twitter:image" content="画像URL">

こっちのtwitter用のプロパティもあったらこっちを読んでくれないかな！と、これも入れてみたり。（結局効果無かったので外しましたが。）

（テストです）twitterカードの画像が古いURL見に行っちゃってて直したい。これでどうだ。｜私がIllustratorで絵を描けるようになるのに有効だった練習方法 *Ateitexe http://t.co/nxEW4qvukw

— *you (@ateitexe) 2014, 11月 11

だ　め　じ　ゃ　ん　！　！

— *you (@ateitexe) 2014, 11月 11

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

こちらのキャッシュ更新方法に書いてあったように、bit.lyのURLをツイートしてみたり。

（再テスト）TwitterCardのキャッシュ更新にはbit.lyからつぶやいてみろってトラブルシューティングに書いてあった！｜私がIllustratorで絵を描けるようになるのに有効だった練習方法 *Ateitexe http://t.co/LlniUbDSMg

— *you (@ateitexe) 2014, 11月 11

やっぱだめやないかーい！！！！！_(┐「ε:)_

— *you (@ateitexe) 2014, 11月 11

などとお恥ずかしいツイートをしておりました…。そして気がつく。

わざわざ自分でツイートして確かめなくてもここでテストできるということを今更知りましたすみません…｜https://t.co/PZSkqE3ltR

— *you (@ateitexe) 2014, 11月 11

ちゃんと、こういうテストさせてくれるところが、あるんじゃん…！！お目汚し大変失礼いたしました(;´Д`)

もしかしてキャシュじゃ…ない…？

TLを汚さずにいくらでもテスト出来ると知ったわたしはあれこれ試してはテストし、ようやく真実に辿り着きました。

前述の通り、記事内にOGPに適する大きさの画像が無い場合は、予め用意しておいたロゴ画像が代わりに出力されるようになっていました。この画像のファイル名を変更したら、きちんと表示されたのです。

あれ…？もしや、キャッシュじゃない…？と気が付き、このロゴ画像だけ違うフォルダに入っていることを思い出しました。投稿内の添付画像は /wp-content/uploads 内ですが、ロゴ画像は他の一部汎用画像などと一緒にドメイン直下の別フォルダで管理してて…！

うわぁぁぁ！こないだ robots.txt 書き換えて、/wp-content/uploads 内の画像クロール拒否したんだったぁぁぁぁ！！！

画像の無断転載により、クロール拒否

先日、「ブログの画像が無関係のウェブサイトで盗用されていましたよ」という旨のメールをいただきまして。見に行ってみたら、確かに以前公開した記事の画像そのままでした。（直リンクではなく、自サーバにアップロードされていました。）

いつかこんなこともあるのかなーと思っていたのですが、その画像は掲載されていた記事内容にあまりにも相応しくなく、私が容易に特定できる内容も含まれておりました（公開している情報なので困りはしないのですが）。ていうかそもそも無断転載は許可しておりませんので、削除要請をすることに。

結果として、お詫びのメールと共に画像は削除していただけたので良かったのですが、返信の遅さ（1ヶ月以上経ってから返事が来ました。）と、サイトのつくりからして、管理者とブログ執筆者は違うんだろうな、管理者は外部の人なのかな、ブログ更新してる人はネットリテラシーとかとても疎い人なんだろうな、という印象を受けました。

このへんはまぁ…なんというか、私の会社でも、外に使う用途のものにも「ちょっと画像検索から拾ってきてよ」って軽く言っちゃう人はね、いるものですから…(;´Д`)

まぁそのへんはアレとして、例のメールをくださった方から、「画像のクロールを拒否するだけでも画像盗用を減らす効果がありますよ。」というアドバイスも頂きました。そっか、確かに今まで /wp-content/uploads 内は許可していたなーと。画像検索経由でブログを訪れて頂く方もいるのでしょうが、ううむ、たしかにちょっと気持ち悪いしな…。

と、いろいろ考え、/wp-content/uploads も含め、/wp-content/ をクロール拒否することにしたのでした。

User-agent: Mediapartners-Google*
Disallow:

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /*?*
Disallow: /*?
Disallow: /*.php$
Disallow: /*.js$

Sitemap: https://ateitexe.com/sitemap.xml

というわけで、このような robots.txt に…。そりゃあtwitterのクロールも弾くよね…。

1, 2行目の記述は、GoogleAdsenseのクロールはすべて許可する、というものです。最初これが無い状態で置いておいたら、Adsenseの管理画面でこのようなエラーが出まして。

Google のクローラがサイトのページにアクセスしてコンテンツを認識することができなかったため、関連性の高い広告が掲載されていません。クローラがコンテンツにアクセスできない場合、通常は広告が掲載されず、収益とカバレッジが低下します。

「全部クロール出来ないと適切な広告が出せないよ！」という感じでしょうか。そのため 1, 2行目を追記しました。

追記

robots.txt は、「User-agent: ○○」→ ○○というユーザーエージェントに対して、「Disallow: △△」→ △△を拒否するよ、という書き方になるので、Google Adsenseのユーザーエージェントには「Disallow:」、つまり、拒否するものは無し、という意味になります。

「User-agent: *」は、全てのユーザーエージェントという意味になるのですが、指定した（先ほどのGoogle Adsenseなど）以外の全ユーザーエージェントに適用、ということになります。

上記の robots.txt では、wp-admin、wp-content、wp-includes 内のコンテンツ全てを拒否する記述になっていますので、/wp-content/uploads 内の投稿画像を許可したい方は、この書き方は適切ではありません。

また、8～9行目で「?」のつくURLも拒否しています。わたしのブログでは「?」がつくのは検索結果やプレビューだけなのでこう書きましたが、デフォルトのパーマリンクで運営している方は逆効果になってしまいますのでご注意を。

Twitterbotのクロールを許可する

Adsenseに加え、Twitterのクロールも許可する旨を robots.txt に追記しました。

User-agent: Mediapartners-Google*
Disallow:

User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /*?*
Disallow: /*?
Disallow: /*.php$
Disallow: /*.js$

Sitemap: https://ateitexe.com/sitemap.xml

で、ちょっと待ってみてから検証してみたら。

こうだったのが、

出たーーーー！！！｡･ﾟ･(ﾉД`)･ﾟ･｡

という、とても遠回りをした挙句、自分のせいだったという結末でした。長々とすみません…、この恥ずかしい紆余曲折を残すことでどなたかのお役に立てたら嬉しいですー！