WEBLIC LLC

ブログ

TwitterでOGP画像が表示されない時の対処法

Web制作

2023年8月1日

Twitterで記事をシェアしたときに、期待したOGP画像が表示されないことはありませんか?
この記事では、その解決法について解説します。

OGPタグとは

OGPタグは、以下のようにHTMLの<head>部分に記述されます。

	<meta property="og:image" content="【画像URL】">
	<meta name="twitter:card" content="summary_large_image">

これらのタグは、ウェブページがSNS上で共有されたときにどのような表示にするかを制御するものです。しかし、正しく記述していても画像が表示されない場合があります。

Twitterカードの表示例
OGP画像が表示されているツイート

Twitter Card Validator

Twitterでは以前、ページのプレビューを確認できる「Card Validator」ツールを提供していました。しかし、2022年をもってこのツールは廃止され、現在は使用できません。

Twitterのキャッシュ問題

表示されない一因としては、Twitter側のキャッシュが考えられます。キャッシュが原因の場合、OGP画像のURLにパラメータを追加して再度試すと、正しく表示されることがあります。

しかし今回、私が遭遇した問題は異なりました。

Twitterのクローラのサイズ制限

実は、Twitterのクローラには特定のサイズ制限があります。ページ全体が一定のサイズを超えると、「ERROR: Fetching the page failed because the response is too large」というエラーが発生するのです。

この問題に直面したのは、最近私たちが制作したニチリンインターナショナル株式会社様のウェブサイトでした。サイトのデザインには、SVGを用いたアニメーションが特徴的で、そのためのSVGコードが非常に長くなってしまいました。また、PCとモバイルで異なるアニメーションを表示するために、それぞれに対応したSVGコードをページ内に全て含めていたため、一度に読み込まれるデータ量が大きくなってしまっていました。

この結果、ページ全体のサイズが大きくなりすぎ、Twitterのクローラによるページ取得がうまく行かなくなってしまいました。これが「ERROR: Fetching the page failed because the response is too large」のエラーメッセージの原因でした。

解決法

この問題を解決するために、Javascriptを使って必要なときだけSVGを出力するように変更。これにより、ページ全体のサイズを減らし、Twitterのクローラがページを正常に取得できるようになりました。

もしTwitterでOGP画像が表示されない場合、ページ全体のファイルサイズをチェックしてみてください。必要ない部分を削除したり、Javascritを使って表示を制御したりすることで、問題が解決するかもしれません。

関連記事

Web制作

初心者向け解説!内部リンクでサイト構造を強化し、SEO効果UP

先日、GoogleのX(旧Twitter)で内部リンクに関するヒントが投稿されていました。その内容を...

2024年8月8日

Web制作

ファーストビューに動画を!メリットと注意点の解説

ウェブサイトにおいて、訪問者の最初の印象を決定づけるファーストビューは非常に重要です。静的な画像やテ...

2024年3月7日

Web制作

重複コンテンツがSEOに与える影響は?

インターネットの世界では、同じ情報がたくさんあると、どの情報が一番大切かわからなくなることがあります...

2024年2月9日

Web制作

アイコンを軽量化して、Webサイトの表示速度を速くする

Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加すると...

2023年9月7日

Web制作

WordPressでWebPを導入してページスピードを向上させる方法

ページスピードインサイトのスコアがなかなか上がらず、悩んでいる方へ。表示速度が速くなることは、単にス...

2024年7月16日

  • カテゴリー

  • 本日、 7人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社