0

webサイト(https://scuba-monsters.com/spot)を運用しているのですが、twitter cardを設定することができません。

以下のようにhtmlに必要な項目を設定しているのですが、

  <link rel="canonical" href="https://scuba-monsters.com/spot">
  <meta property="og:site_name" content="ScubaMonsters(スクーバモンスターズ)日本全国ダイビングスポット情報">
  <meta property="og:title" content="ScubaMonsters(スクーバモンスターズ)日本全国ダイビングスポット情報">
  <meta property="og:description" content="日本全国のダイビングスポットが簡単に探せる「スポット探し」トップページです。日本国内の有名スポットから穴場スポットまで、完全網羅!スポット名のキーワード検索のほか、地図上のエリアから調べることも可能です。人気スポット、注目スポット、新着投稿も要チェック!最新の海の様子が分かるツイッター投稿も掲載。">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://scuba-monsters.com/spot">
  <meta property="og:image" content="https://scuba-monsters.com/assets/spot/top_area_ogp-2fe43796e3c47aae07a21ddb591f867d78a853197138e8d02f0ab701282f0748.png">
  <meta property="og:locale" content="ja_JP">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@scuba_monsters">
  <meta name="twitter:creator" content="@scuba_monsters">
  <meta name="twitter:title" content="ScubaMonsters(スクーバモンスターズ)日本全国ダイビングスポット情報">
  <meta name="twitter:description" content="日本全国のダイビングスポットが簡単に探せる「スポット探し」トップページです。日本国内の有名スポットから穴場スポットまで、完全網羅!スポット名のキーワード検索のほか、地図上のエリアから調べることも可能です。人気スポット、注目スポット、新着投稿も要チェック!最新の海の様子が分かるツイッター投稿も掲載。">
  <meta name="twitter:image" content="https://scuba-monsters.com/assets/spot/top_area_ogp-2fe43796e3c47aae07a21ddb591f867d78a853197138e8d02f0ab701282f0748.png">
  <meta name="twitter:domain" content="scuba-monsters.com">

twitter card validator(https://cards-dev.twitter.com/validator)でサイト(https://scuba-monsters.com/spot )を確認すると以下のようなログが表示され設定されていません。

INFO:  Page fetched successfully
INFO:  2 metatags were found
ERROR: No card found (Card error)

html上では<meta name="twitter:card" content="summary">を設定しているのですが、設定の仕方に誤り、設定の項目が不足などあるのでしょうか?

サイトはrailsで運用しておりバージョンは以下の通りです。

Ruby 2.6.3
Rails 6.0.3.4

どうしたらtwitter cardを設定できるでしょうか?ご教示お願いいたします!
また、さらに必要な情報などもあれば教えていただけると幸いです。

1 件の回答 1

0

原因

サーバ側の実装で、Accept ヘッダによって返すリクエストが変わっているようです。

通常、ブラウザは以下の Accept ヘッダを付けてリクエストします。
この場合、該当のページからは HTML が返ってきます。

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

一方で、Twitter Card の情報を取得する Twitterbot は以下の Accept ヘッダを付けてリクエストします。
この場合、該当のページからは JavaScript が返ってきます。

accept: */*

これは「ツイートの続きを見る」ボタンを押したとき用の https://scuba-monsters.com/spot?js_type=more_tweet&page=1 の Ajax レスポンスではないでしょうか。
これにより、Twitter Card のメタ情報が取得できず、エラーとなっているようです。

解決策

以下のいずれかの方法が考えられます。

  • Accept ヘッダによってレスポンスを変えるのをやめて、URL にパラメータが付与されていない場合は HTML を返す
  • Ajax レスポンスとURLを分けて、/spot からは常にHTMLを返す
  • User-agentTwitterbot/1.0 のときは、HTMLを返す
2
  • コメントを返したつもりが出来ていませんでした! ``` respond_to do |format| format.html format.js end ``` controllerで指定されたレスポンスを返すようにしたら解決しました。 ありがとうございました!! 2022年1月31日 7:03
  • @takumatakahashi 解決したようで、何よりです。他の方の参考になるように、 ✔️を入れていただければと思います。 ja.stackoverflow.com/help/someone-answers 2022年2月1日 3:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。