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

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

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


Twitter Cardsとは

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

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

141112-1

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

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

141112-2

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

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

そのときの記事です。アイキャッチが220×150pxとOGP画像としては小さすぎるので、投稿内の画像で200×200px以上の画像があればそれを、無ければ他に用意した画像をOGP画像として出力するPHPを書いてあり、この設定サイズを200px→250pxにしました。

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

141112-3

画像出てない!!!

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

ちょっと前に各投稿への添付画像を wp-content/uploads/ から wp-content/uploads/年/月/ フォルダへ移したのです。こんなところに弊害が…ッ!!(´;ω;`)ブワッ

141112-4

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

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

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

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

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

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

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

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

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

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

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

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

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

/wp-content/uploads だけは許可したいとか、他の書き方についてはこちらがとっても参考になります!

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

2016/6/3追記

Google先生がモバイルフレンドリーに注力され出したので、あんまり良くない書き方になってしまいました。対応した書き方を別記事で紹介しているので、こちらもご参照ください。

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

141112-5

こうだったのが、

141112-6

出たーーーー!!!。・゚・(ノД`)・゚・。

せっかくなので画像が大きく表示される「summary_large_image」っていうほうにしてみました。

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

公開日:2014/11/12
更新日:2016/06/03

3件のピンバック

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

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

  3. […] Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール… […]

2件のコメント

  1. Lognote より:

    こんにちは。以前こちらの記事をトラックバックさせていただいたLognoteと申します。

    最近モバイルフレンドリーテストをしたところ、9~12行目でCSSが読み込まれないのでブログによってはモバイルフレンドリーではないという評価になる可能性があります。

    画像転載の可能性がまた出るかと思われますが……

    *youさんならもちろんご存知かとも思いましたがコメントしてみました:;(∩´﹏`∩);:

    • *you より:

      Lognoteさん、コメントありがとうございます!

      モバイルフレンドリー、今熱いですね…! あー、直さなきゃいけないかもなーとかぼんやり思っていたので、コメントいただけたことで良いきっかけになりましたw いくつか試してみて、良さそうな方法が見つかったらご報告します!

      追記:対応をこちらの記事に書きました!


Twitter Cardで画像が表示されないトラブルでイライラしましたが、時間が解決してくれました*prasm へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。