75573


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

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

[code]

      <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">
    
[/code]

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

[code]

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

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

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

Ruby 2.6.3  
Rails 6.0.3.4

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


CC BY-SA 4.0
2021-04-27T03:58:44.257
75527
2021-04-29T07:39:05.437
2021-04-27T15:20:55.430
32986
45015
question
ruby-on-rails html twitter
webサイトにtwitter cardが設定されない


# 原因

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

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

[code]

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

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

[code]

    accept: */*
    
[/code]

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

# 解決策

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

  * `Accept` ヘッダによってレスポンスを変えるのをやめて、URL にパラメータが付与されていない場合は HTML を返す
  * Ajax レスポンスとURLを分けて、`/spot` からは常にHTMLを返す
  * `User-agent` が `Twitterbot/1.0` のときは、HTMLを返す


CC BY-SA 4.0
2021-04-29T06:57:08.040
75573
2021-04-29T07:39:05.437
2021-04-29T07:39:05.437
14334
14334
75527
answer