Twitterカードが表示されない!問題の原因と対処法を解説します。

ノウハウ
burikama
burikama

2021年6月25日から、突然Twitterカードが表示されなくなってしまいました。調べてみると色々な原因が考えられそうでした。

Twitterカードが表示されない!

私はブログの更新の度にTwitterに記事更新を知らせるツイートをしているのですが、ある日突然Twitterカードが表示されなくなってしまいました…。

表示されない現象が確認できたのは6月25日の記事更新時で、色々調べてみましたがはっきりした原因を発見できず…

最終的には使用しているレンタルサーバーの設定に原因があったことが判明し、設定を見直していただいたおかげで6月28日現在問題なく表示されるようになりました!

(カラフルボックスさん、迅速かつ丁寧にご対応いただきありがとうございました。)

今回は原因が発生してから解決に至るまで私が調べ、実施した内容について紹介します。

Twitterカードとは

Twitterカードとは、以下のツイートのようにツイート内にブログの記事URLを貼るとTwitterが自動で画像を拾ってきて表示してくれる機能です。

基本的にはアイキャッチ画像が表示されるはずです。

Twitterカードのあるなしで、リンクへアクセスする人の量がかなり変わってくるのでブロガーとしては表示されないのは結構影響があるかと思います。

ちなみにTwitterカードが表示されないとこんな感じに表示されます。

問題を考える

Twitterは公式でTwitterカードが正常に表示されるか確認できるツールを公開しています。

Card Validator – https://cards-dev.twitter.com/validator(外部リンク)

原因を特定するにあたり、まずはこちらの「Card URL」に自分のブログ記事(TOPではない)のURLを入力して「Preview Card」を押してください。

すると画面右側に「Card Preview」と「Log」が表示されます。

私の場合はここで「ERROR: Failed to fetch page due to: HttpConnectionTimeout」というエラーが表示され、正常にTwitterカードが読み込まれていないことを確認できました。

エラーにも色々種類があり、それによって対応も変わってくるのでまずはここでエラー内容を確認するのをオススメします!

早速エラー内容が判明したので、次は原因特定の為に「ERROR: Failed to fetch page due to: HttpConnectionTimeout」をまるまんまコピペしてGoogle検索しました。

するとどうやら「Twitterのクローラがburikama blogにアクセスできていない」ことに原因がありそうでした。

Twitterカードが表示される仕組み

そもそもTwitterカードが表示される仕組みは、

TwitterのクローラがブログのOGPタグをチェックして、見つかればそれを表示する

という仕組みです。

より簡単に言うと、

TwitterがブログにアクセスしてTwitterカードに指定されている画像があればそれを表示する

という仕組みです。

より詳しく知りたい方は以下の公式ドキュメントを参照してください。

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started(外部リンク)

つまりここで確認すべき内容は

  • OGPタグが正しく設定されていること
  • ブログ側でTwitterのアクセスを拒否していないこと

の2つです。

それぞれについて私が確認した内容を紹介します。

確認すべきこと①OGPタグが正しく設定されていること

まずはそもそもOGPタグが記事内で正しく設定されているかを確認しましょう。

以下確認方法はブラウザのChromeを使用する方法を想定しています。シェア率も高く、ブロガーにほぼ必須なブラウザなので導入していない方は是非これを機会に使ってみてください。

Google Chrome – https://www.google.com/intl/ja_jp/chrome/(外部リンク)

ソースコードを直接確認する方法

Twitterカードが表示されない問題が発生している記事を開いてください。

ここでは以下ブログ記事を使用して説明していきます。

画面上で

右クリック > 検証

を選択します。

すると画像のような画面がでてきますので、左端の「Elements」を選択しましょう。

右クリック > 検証
右クリック > 検証

この画面は、ブログ記事のソースコードを表示しています。

正しくOGPを設定している場合、この中に記述されているはずです。

ここでcommand + F(Macの場合)で検索窓を表示し、「twitter」と入力しましょう。

command + F > 「twitter」
command + F > 「twitter」

これで以下のような記述が見つかれば、OGPは正しく設定されているはずです。

<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:description" content="USキーボードってスッキリしててかっこいいけど、かな入力キーなくて戸惑いますよね。burikamaが設定しているベストな方法を紹介します。">
<meta property="twitter:title" content="MacのUSキーボードで日本語入力に切り替えるベストな方法(Karabinerはやめときましょう)">
<meta property="twitter:url" content="https://burikama.net/how-to-switch-input-source-on-us-keyboard/">
<meta name="twitter:image" content="https://burikama.net/wp-content/uploads/2021/06/eyecatch_20210625.jpg">
...

ちなみにこの中でも、「meta name=”twitter:card”」が必須項目で、Twitterカードを表示するためには「meta name=”twitter:image”」が必要です。

これを見る限りではちゃんと設定されていそうですね。

拡張機能を使って確認する方法

上記方法が難しい場合はChromeの拡張機能で確認することもできます。

META SEO inspector」を導入しましょう。

META SEO inspector – https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef?hl=ja(外部リンク)

拡張機能の導入・使用方法は「Chrome 拡張機能 使い方」などで調べるとすぐに出てくると思います!

導入できたら、問題のページでMETA SEO inspectorを使用してみましょう。

META SEO inspector
META SEO inspector

少し下の方にスクロールすると、Twitterという項目があり、ここでも同様に先程の項目が設定されているかを確認することができます。

ここまででOGPが正しく設定されていない場合は、Wordpressの設定を見直しましょう。

「Cocoon」というテーマを使用している場合は、

  • Cocoon設定 > OGP > Twitterカードの有効化

にチェックを入れることでOGPが正しく設定されるようになるかと思います。

ここでOGPが正しく設定されていることを確認できたら、改めてCard Validatorを使用して表示のチェックを行いましょう。

恐らくまだ表示されないかと思います。(すいません)

今回のエラー文「ERROR: Failed to fetch page due to: HttpConnectionTimeout」はブログにアクセスできないことが原因です。

OGPタグが設定されていないことが原因である場合はそもそも異なるエラー文が表示されます。

しかしどちらにせよここがしっかり設定できていないと表示されないので念の為確認しておきました。

これで解決できなかった場合は次にいきましょう。

確認すべきこと②ブログ側でTwitterのアクセスを拒否していないこと

Twitterがブログに設定されているTwitterカードを取得するためには、

Twitterがブログにアクセスできること

が前提になってきます。

なのでTwitterが何らかの設定によってブログにアクセスできない場合、Twitterカードが表示されません。

アクセスを拒否している原因は大きく以下の3つが考えられます

  • robots.txtの設定
  • .htaccessの設定
  • サーバーの設定

少しむずかしい話になっていきますが、頑張ってひとつずつ確認していきましょう…!

robots.txtの設定

robots.txtとは、ブログにアクセスするクローラを制御するためのファイルです。

たとえば

  • この記事は検索で出てこないようにしてほしい

とかいったことを設定する場合に使用するファイルです。

つまりここでTwitterクローラが拒否されているとTwitterカードが正常に表示されません

WordPressブログの場合、基本的に自動で生成されており、

  • 自サイトのURL/robots.txt

にアクセスすることで内容を確認することができます。

(設定によっては404エラーで表示されない場合もありますので、その場合は「Wordpress robots.txt」などで調べてみてください。)

このrobots.txtで

  • Twitterbot
  • Disallow: hoge(/wp-admin/以外の何かしらの文字列)

が記載されている場合はrobots.txtが原因の場合があります。

基本的には導入しているWordpressテーマやプラグインによって追加されている記述だと思うので、

  • WordPressテーマを変更した
  • WordPressテーマのアップデートがあった
  • プラグインを新規追加した
  • プラグインのアップデートがあった

といった場合にはそれらを無効化するなどしてみましょう。

ちなみに私は問題を確認できたときに「テーマのアップデート」と「プラグインの新規追加」がありましたが、robots.txtに問題はありませんでした。

.htaccessの設定

.htaccessとは、サーバの動作を制御するためのファイルです。

例えば

  • 自サイトURL/aaa/にアクセスがあったら自サイトURL/bbb/に強制的に移動させる
  • 自サイトURL/aaa/にアクセスがあったら外部サイトに強制的に移動させる

といったような設定が可能になります。

  • twitter
  • deny

といった文言が確認できた場合は、ここに問題がある可能性があります。

しかし、.htaccessを編集するとブログ自体が見れなくなってしまうなどの可能性があるので、編集する場合は必ずバックアップをとってください。

また、自分で編集した記憶がない場合は大抵、

  • WordPressテーマ
  • プラグイン

によって自動で設定されている内容なので、編集することに不安がある場合はrobots.txtの場合と同様に直近変更があったテーマやプラグインを無効化するなどして動作を確認してみてください。

サーバーの設定(今回の原因)

ここまでを確認して、私の環境では問題が見つかりありませんでした…もう自分で確認できるところは全て確認したので手詰まりだったのですが、念の為使用しているレンタルサーバー(カラフルボックス)に問い合わせしてみることにしました。

(この時点ではまだプラグインを疑っている)

そして実は原因はここにありました。

問い合わせ内容は詳しくは省きますが、どうやらサーバーの設定でTwitterクローラのアクセスが制限されていたようです。

問い合わせをした当初は現状問題がないとの返答を頂いていましたが、その数時間後に調査した結果サーバーの設定に問題があることが判明したようで、設定を見直していただきました。

結果、

Twitterカードが表示された!!!

Card Validator
Card Validator

様々な原因が考えられる中で迅速かつ丁寧にご対応いただいたカラフルボックスさんには大変感謝しています。

みなさんもレンタルサーバーは是非カラフルボックスの使用をご検討ください。(案件じゃないです)

カラフルボックス – https://www.colorfulbox.jp/(外部リンク)

そうして私のTwitterカードが表示されない問題は無事解決したのでした。

まとめ

他のことをしていた時間があるとはいえ、ここまでの調査に2日ほど費やしました…。

今後も起こる可能性や、他に解決できず悩んでいる方もいるかと思い記事にさせていただきました。

大事なことは

エラー内容を把握して、それに関連してそうな箇所を徹底的に調べる

ということです。

そうして色々調べていくと、同時に色々な知識も学べて、必ず後に活きてくる(こうやって記事にしたり)と思うので、これを読んでいるみなさんも諦めずに頑張ってください。

質問や疑問などありましたらコメントや問い合わせで聞いていただければいつでもお答えしますのでお気軽にどうぞ!

コメント

タイトルとURLをコピーしました