@twitterカードに画像が表示されない。

daichi-50 commented 1 year ago

質問内容・実現したいこと

Twitterカードを作り、シェアできるようにしたいです。 meta_tagsのgemを使用しております。画像はAWSのS3に保存してあります。
現状発生している問題・エラーメッセージ　Card validatorにて以下のようなエラーが出ております。
```
　INFO:  Page fetched successfully
INFO:  12 metatags were found
ERROR: No card found (Card error)
```
どの処理までうまく動いているのか

ブラウザの要素を確認してところheadは期待通りでした。画像のURLを検索すると確認できました。以下がそのURLです。 https://serchself.s3.amazonaws.com/uploads/post/generated_card/2/mini_magick20230628-2-cz04yb.png
該当のソースコード

module ApplicationHelper
    def default_meta_tags(post = nil)
        {
            site: '自分、探してます',
            title: '日常の中で失ったものはありませんか？自分見失ってませんか？',
            reverse: true,
            separator: '|',
            description: '「自分、探してます」は、見失ったものに関する投稿をします。そしてみんなからコメントをもらうサービスです。',
            keywords: '自分、探してます',
            charset: 'UTF-8',
            canonical: request.original_url,
            noindex: !Rails.env.production?,
            og: {
            site_name: '自分、探してます',
            title: :title,
            description: :description,
            image: post&.generated_card&.file&.present? ? post.generated_card.url : image_url("ogp.jpg"),
            type: 'website',
            url: request.original_url,
            local: 'ja-JP'
            },
            twitter: {
            card: 'summary_large_image',
            site: '@Nakano-41期生',
            image: post&.generated_card&.file&.present? ? post.generated_card.url : image_url("ogp.jpg")
            }
        }
    end
end

<!DOCTYPE html>
<html>
  <head>
    <title>Selfserch</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="turbolinks-visit-control" content="reload">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    <%= display_meta_tags(default_meta_tags(@post)) %>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  </head>
  <body>
    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %></p> 
    <main class="page-wrapper">
      <%= render 'shared/header' %>
      <%= yield %>
    </main>
      <%= render 'shared/footer' %>

  </body>
</html>

エラーから考えられる原因

　画像のサイズの問題ではないかと考えております。

試したこと　image: image_url("ogp.jpg") 　にしてみましたが表示されませんでした。

Tsuchiya2 commented 1 year ago

うーん。なんでしょうかね。。 Twitterカードだとキャッシュ辺りが気になりますが。。。

--

ChatGPTに聞いてみた結果の共有をしておきますね。

まず、Twitterカードがうまく作動しない場合は、以下の要素をチェックすると良いでしょう。

必要なメタタグがすべて存在するかメタタグが正しい形式で書かれているか画像のURLが正しく、公開されていてアクセス可能か画像のサイズや形式がTwitterカードの要件を満たしているかあなたの提供したコードを見ると、すべての必要なメタタグが存在しているようです。しかし、'ERROR: No card found (Card error)' というエラーは、Twitterがカードタイプを特定できないことを示しています。これは、'twitter:card' メタタグが不足しているか、または不正な値が指定されている可能性があります。しかし、あなたのコードでは 'summary_large_image' と正しく指定されています。

次に、画像URLに問題がないか確認しましょう。S3に保存されている画像は公開されており、インターネット上からアクセス可能でなければなりません。また、'http' または 'https' で始まる絶対URLである必要があります。ブラウザの要素検証でURLが正しく表示されていることを確認してみてください。

さらに、画像のサイズと形式に問題がないか確認してください。Twitterカード用の画像は、最小600x335ピクセル（最大4096x4096ピクセル）、ファイルサイズは5MB以下である必要があります。

上記を確認しても問題が解決しない場合、次に試すべきことはTwitterカードのキャッシュをクリアすることです。Twitterはページ情報をキャッシュしており、新しく更新したメタタグがすぐに反映されないことがあります。TwitterのCard ValidatorでURLを再度入力して「Preview card」ボタンをクリックすることで、キャッシュをクリアできます。

最後に、他のユーザーが同じ問題を経験しているかどうか確認するために、エラーメッセージをGoogleで検索してみてください。エラーメッセージは一般的なものなので、他の開発者が解決策を共有しているかもしれません。

それでも解決しない場合は、詳細なエラーメッセージや具体的な問題を示すスクリーンショットを共有してください。これにより、具体的な問題解決のためのより具体的なアドバイスが提供できます。

daichi-50 commented 1 year ago

コメントありがとうございます！

画像のサイズは問題ありませんでした。 AWSについても『パブリックアクセスをすべてブロック』はオフになっておりました

また、下記を参考にapplication.html.erbを変更してみましたがダメでした。 https://kakkiii-blog.dev/posts/510/

ブラウザの要素は以下のようになっております。

<head><style type="text/css">.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: #0076ff;
  z-index: 2147483647;
  transition:
    width 300ms ease-out,
    opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}
</style>
    <title>Selfserch</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="turbolinks-visit-control" content="reload">
    <meta name="csrf-param" content="authenticity_token">

    <meta charset="UTF-8">
<title>日常の中で失ったものはありませんか？自分見失ってませんか？ | 自分、探してます</title>
<meta name="description" content="「自分、探してます」は、見失ったものに関する投稿をします。そしてみんなからコメントをもらうサービスです。">
<meta name="keywords" content="自分、探してます">

<meta property="og:site_name" content="自分、探してます">
<meta property="og:title" content="日常の中で失ったものはありませんか？自分見失ってませんか？">
<meta property="og:description" content="「自分、探してます」は、見失ったものに関する投稿をします。そしてみんなからコメントをもらうサービスです。">

<meta property="og:type" content="website">

<meta property="og:local" content="ja-JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Nakano-41期生">

    <link rel="stylesheet" href="/assets/application-1cb59a07b66a17a3619f3682ab803c3dda76e6b58dff97441cad928c40a7abb2.css" data-turbo-track="reload">
    <script src="/assets/application-d13bafd5ceb035fa8383593512d7f6e3e8fcae170df0372da99b9837341d5d46.js" data-turbo-track="reload" defer="defer"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <meta name="csrf-token" content="r0hr75hrs7AW2bJ7l7dD3Jr2KC8ZX2FFV51G5kvTrP36fb2PJFATIHsRVSLzKy9GKwUu2gMjWsv8V6gwRg3ePg"><link rel="canonical" href="https://selfserch.herokuapp.com/posts/3"><meta property="og:image" content="https://serchself.s3.amazonaws.com/uploads/post/generated_card/3/mini_magick20230630-2-i0y17u.png"><meta property="og:url" content="https://selfserch.herokuapp.com/posts/3"><meta name="twitter:image" content="https://serchself.s3.amazonaws.com/uploads/post/generated_card/3/mini_magick20230630-2-i0y17u.png"></head>

以下に実際にシェアしてみた時のスクショを送ります。

Tsuchiya2 commented 1 year ago

共有された↓に書かれているとおりに、必要なmetaタグが上部に表示されるようにしてみるとどうでしょうか。 https://kakkiii-blog.dev/posts/510/

daichi-50 commented 1 year ago

変化ありませんでした！

Tsuchiya2 commented 1 year ago

キャッシュの問題だと、記載を変えたりしても状況は変わらないので、時間を置いてみる（１〜2日？？）必要があるかもです。

念のため、追加でChatGPTにも聞いてみましたので、引き続き試行錯誤をお願いします。

ご提供いただいた情報を見ると、一部のTwitterカード用のメタタグが欠けています。具体的には、 twitter:title や twitter:description がありません。これらのメタタグも追加してみてください。

以下は default_meta_tags メソッドの修正例です。

def default_meta_tags(post = nil)
    {
        site: '自分、探してます',
        title: '日常の中で失ったものはありませんか？自分見失ってませんか？',
        reverse: true,
        separator: '|',
        description: '「自分、探してます」は、見失ったものに関する投稿をします。そしてみんなからコメントをもらうサービスです。',
        keywords: '自分、探してます',
        charset: 'UTF-8',
        canonical: request.original_url,
        noindex: !Rails.env.production?,
        og: {
        site_name: '自分、探してます',
        title: :title,
        description: :description,
        image: post&.generated_card&.file&.present? ? post.generated_card.url : image_url("ogp.jpg"),
        type: 'website',
        url: request.original_url,
        local: 'ja-JP'
        },
        twitter: {
        card: 'summary_large_image',
        site: '@Nakano-41期生',
        title: :title, # 追加
        description: :description, # 追加
        image: post&.generated_card&.file&.present? ? post.generated_card.url : image_url("ogp.jpg")
        }
    }
end

以上の変更により、Twitterカードのタイトルと説明文が設定され、期待する動作が得られることを期待します。

daichi-50 commented 1 year ago

コメントありがとうございます！承知いたしました。しばらく時間を置いてみます。

kenchasonakai commented 1 year ago

ログアウトした状態でTwitterで共有する想定のURLにアクセスして、検証ツールで確認したときのheadタグを共有していただいても良いでしょうか？

daichi-50 commented 1 year ago

お疲れ様です。ご返信ありがとうございます。 AWSに保存してある作成した画像のURLのことで合ってますでしょうか？以下になります。


<head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>mini_magick20230628-2-cz04yb.png (480×700)</title></head>

daichi-50 / selfserch

@twitterカードに画像が表示されない。 #33