logo image

OGPにイメージを設定したけどTwitterカードが表示されない(robots.txt)

Icon representing a data.
2022-01-31
Icon show updated_at
2022-01-31
2
Twitter icon.
Next.js
TypeScript
Twitter
Vercel

前提条件

  • apiフォルダに、SSGで動的にOGP画像が設定されるように開発している。
  • robots.txtを使用している。
  • この現象はSSGでなくても、静的なイメージデータでも同様の現象が起こる。

現象

Twitter validator で調べると以下のようなエラーが発生。

image

エラーログ・エラーメッセージ

NFO:  15 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully
WARN:  The image URL https://*****.dev/api/***** specified by the 'og:image' metatag may be restricted by the site's robots.txt file, which will prevent Twitter from fetching it.

原因

robots.txtにて、TwitterBotに許可していなかったのが原因だった。

User-agent: *
Disallow: /api/*

対応

robots.txtにて、TwitterBotに許可することで無事に表示されるようになった。

User-agent: Twitterbot
Allow: /api/*
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

Next.js
TypeScript
Twitter
Vercel
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。