投稿日 2020-10-03 / 最終更新日 2023-07-04
この記事は2020年10月1日に現象を確認し、2020年10月3日05:19に書いている記事です(2020年10月3日23:40追記)
旅行コラム系サイトをぼちぼちと運営している私ですが、2020年9月久しぶりに記事を更新してTwitterにシェアしようとしたところ、Twitterカードどころか記事シェア自体も出ない状態となりました。
Twitterに記事をシェアするとき“Twitterカード”と呼ばれる画像が表示されているとクリック率が上がります。
記事の内容が想像できる画像が出るか出ないかはとっても大切なもの。
そのため、書いた記事にカードが出るよう確認をする「Twitter Cards Validator」というサイトを利用するのですが…
問題なく設定されていると、上記のような画像付きのシェアリンクが登場します。
Contents
Twitterカード画像どころかシェアもNG？
これが最近書いた2本の記事では出てこず、それどころかシェアリンクすら発生しない状態。
ERROR: Fetching the page failed because the response is too large.
というエラーメッセージがでてしまいました。
最初に確認したのは9月5日の東京ステーションホテルの記事なのですが「画像が多いから怒られてるのね☆」くらいに思ってた私…。
2本目でさすがにおかしいと気づき、対応を探します。
出なかった記事は下記の２本。
いずれも文量と写真たっぷりの記事。楽しかったので筆もノリノリで「たくさんの方に読んで欲しいな～」と気合を入れて書いたのですが
「画像どころかシェアリンクもダメとは…？」
ということで長い戦いが始まりました…。
チェックポイント
- 8月にWordpress5.5へ更新
- ソーシャル用のプラグインはAll in One SEO Packを利用、設定
- 記事の書き方は今までと特に変わらず
- SEO、プラグイン等の設定も特にいじらず
WordPressがアップデートされた以外、大きな変更はありません。
原因と対処法を検索してみると、Twitterカードが表示されない時の対処法記事が色々と出てきます。
片っ端から試してみたのですが、まず記事へのリンクすら発生しない。
試してみたこと
All in One SEO PackからYoast SEOに変更
以前仕事でこのプラグインとテーマの相性が悪く、Chromeのクローラーが呼んで欲しい部分を読まず「強調スニペットが画像ファイルを読み込む」ということが発生したため、まず疑ったのはここでした。
SEOプラグイン自体を他へ変更するというものです。
現在100記事程度あるのでそれをすべて設定しなおすとなると手間ですが、直るのなら…と思いひとまず問題の2記事のみ設定。ダメでした。
一度All in One SEO Packを無効化すると記事のSEOは大丈夫なのですが、基本設定がクリアされてしまうのでオススメしません。
Twitterのプライバシー設定を変更
アカウントの「プライバシーとセキュリティ」→「セキュリティ」で赤枠にチェックが入っているとシェアしてくれないということが起こるようです。
ひとまずこちらもチェックを外し。特に変更はありませんでした。
他のOGP画像チェッカーで試してみる
『OGP確認ツール』を利用。綺麗に出ています。
その他確認したこと
- ソースコードを確認→読み込むための情報には問題なし
- シェア用・アイキャッチ画像の重さ、大きさの確認
何をやっても、無理！
原因が特定できずうなっていたところ、Twitterで「Twitterカード 表示されない」「Twitterカード でない」などを検索してみたところ、8月頃から結構な数のツイートが散見されました。
正常にカードが表示されていた頃の記事で確認してみたところ、以前表示されていた記事も読み込まれていないことに気づき「もしかしてTwitter側の問題なのでは…？」と考えました。
ただしこれは一時的にTwitterに障害が起きた日（2020年10月1日木曜日）のことでしたので、金曜日の夜改めてカードが出た記事をシェアしようとするとシェアリンクが現れました。
どうやらTwitterのせいではなかったようです（すみません…）。
WordPress5.5の機能に問題が…？
WordPressは8月に5.5にアップデートされ、細かくも大きく機能が加わりました。
その中の一つにギャラリーのアニメーション機能が加わり、ブロックの「ギャラリー設定」を「１」にすると自動的にアニメーションしてくれます（それまでは1枚1段ずつ順に並ぶだけでした）。
WordPress側で自動的にアニメーションをつけてくれ、記事の長さも短縮しスクロール長くなりすぎないので、これはいい機能だ！と喜んでいたのですが…。
一記事ずつあたってみる
シェアできる記事とできない記事、何が問題か？
金曜日の夜ということもあり翌日に追われることもないので、SEOの見直しも含め主に写真が大量にある記事を中心にあたってみました。
写真が大量にあっても読み込んでくれるのは「ギャラリー」設定していないページ。
１枚ずつでない場合はいい感じでタイル式に並べてくれるのですが、そういうページもダメでした。
これらの写真を１枚１枚「画像」に設定すると、シェアリンクが機能するように！
一気にアップロードや表示ができるので便利機能だったのですが、とりあえず他に方法がないのならものは試し。「ギャラリー」から個別の「画像」にしていきます。
すると「Twitter Cards Validator」でも表示されるようになりました！
WordPressサイトで5.5にアップデートされている方でシェアできない！という方は、ひとまずこの方法を試してみてください。
でもこれ、Wordpress 5.5のバグなんですよね多分…。
「ギャラリー」はとてもいい機能で、1枚表示にすると自動でアニメーション表示にしてくれたりタイルで並べてくれるのはありがたいので、ぜひシェアで読み込めるようにしていただきたいものです。
なので、Wordpress 6あたりでは解消されている可能性も高いので、全記事を直すことはしなくていいと思います！
ひとまず現時点（2020年10月時点）でシェアしたい・シェアできない記事がある場合、Wordpress5.5のギャラリー機能を疑ってみてくださいね！
また、データのネットへの浸透やキャッシュ等でどうしてもタイムラグが発生する場合もありますので、Cookieの削除を試してみるのも良いかもしれません。
ちなみに…やはりページの容量は関係します
さあ原因と対処がわかったところで直すぞ！と記事を直していたのですが…「ギャラリー」から「画像」にしてもやはり反応が遅いとなってしまった東京ステーションホテルの記事。
帝国ホテルの記事が直ったので、これはもうページ単体の問題だと思い１センテンスごとに「記述・更新してはvalidatorでチェック」をしていくことにしました（Chromeの開発者モードで重さを見ても、どれくらいから読み込んでくれないかわからないので）。
やり方としてはコードエディターに変更して全文を別のところにコピーし、記事がまっさらな状態から<!–wp 〇〇–>で囲まれている部分を1つずつコピペ、更新、validatorでチェック…を繰り返します。
途中までは以下のようにきちんと読み込み・表示されていました。
まとめられる画像は1枚の画像にまとめ、上記を繰り返して「これ以上はエラーが出る」というところまで進めます。はやり画像が多すぎたよう…。
さらに１つにできる画像はまとめ、削れる文章は削除。
ようやく表示されるようになりました！記事と画像は多すぎてもダメですね～。
以上、忘備録でした！
そんなわけで色々書いております旅行コラム系サイト『Tripnote-Riyoko Kisaki-』、どうぞよろしくお願いいたします。
