実現したいこと
OGPがちゃんと設定されるようにする
発生している問題・分からないこと
現在、Djangoで作っているウェブサイトでOGPが表示されるページとされないページがあります。
ツイッターではなくて、普通にリンクをslackなどで送ったときのOGPの部分で問題が起きています。
下のソースコードの「OGPが表示される」ファイルではOGPの画像や説明がちゃんと表示されるのに、「OGPが表示されない」ファイルではOGPの画像も説明も表示されません。
OGP設定のコードは同じものを使っているのにどうしてこうなるのでしょうか？
該当のソースコード
{% load static %} {% load django_bootstrap5 %} {% block extra_head %} <meta property="og:title" content="{{ consulting.title }}" /> <meta property="og:type" content="product" /> <meta property="og:url" content="https://ai-know.ai/{{ consulting.pk }}" /> <meta property="og:image" content="https://ai-know.ai/templates/toppage/public/16typefree.png" /> <meta property="og:site_name" content="AI KNOW" /> <meta property="og:description" content="{{ consulting.ogp_description_for_lp }}" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="AI KNOW" /> <meta name="twitter:title" content="{{ consulting_report.consulting.title }}" /> <meta name="twitter:description" content="{{ consulting_report.consulting.ogp_description_for_result }}" /> <meta name="twitter:image" content="{{ consulting_report.consulting.thumbnail_path }}" /> {% endblock %}{{ consulting_report.output_html | safe }}
{% extends "account/base.html" %} {% load i18n %} {% load django_bootstrap5 %} {% load humanize %} {% block extra_head %} <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, width=device-width" /> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, width=device-width" /> <meta property="og:title" content="{{ consulting.title }}" /> <meta property="og:type" content="product" /> <meta property="og:url" content="https://ai-know.ai/{{ consulting.pk }}" /> <meta property="og:image" content="https://ai-know.ai/templates/toppage/public/16typefree.png" /> <!-- ↑ 更新必要！ 動的に抽出する変数をDBに作成予定。 ↑ --> <meta property="og:site_name" content="AI KNOW" /> <meta property="og:description" content="{{ consulting.ogp_description_for_lp }}" /> <!-- LP用の説明文を動的に指定 --> <!-- ↑ 更新必要！ 動的に抽出する変数をDBに作成予定。 ↑ --> <!-- 以下、Twitterカード --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="AI KNOW" /> <meta name="twitter:title" content="{{ consulting.title }}" /> <meta name="twitter:description" content="{{ consulting.ogp_description_for_lp }}" /> <!-- ↑ 更新必要！ 動的に抽出する変数をDBに作成予定。 ↑ --> <meta name="twitter:image" content="https://ai-know.ai/templates/toppage/public/16typefree.png" /> <!-- ↑ 更新必要！ 動的に抽出する変数をDBに作成予定。 ↑ --> <link rel="stylesheet" href="/static/landingpage/global.css" /> <link rel="stylesheet" href="/static/landingpage/index.css" /> <link href="https://css.gg/css?=|math-minus|math-plus" rel="stylesheet" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto Sans JP:wght@500;700;900&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hiragino Kaku Gothic StdN:wght@400&display=swap" /> {% endblock %} {% block content %} <!DOCTYPE html> <html> 省略 </html> {% endblock %}
試したこと・調べたこと
上記の詳細・結果
teratailやGoogleで検索したり、ソースコードの画像のリンクなどをいろいろ変更したりしましたが変わりませんでした。
補足
特になし
0 コメント