Improve Open Graph and Twitter meta

smdsgn · smdsgn · commit ead855bef5d3 · 2026-03-17T15:14:44.000+01:00
diff --git a/project/templates/project/layout/base.html b/project/templates/project/layout/base.html
@@ -13,11 +13,21 @@
         <title>{% block pagetitle %}{{ page_title }}{% endblock %}</title>
         {% if meta_description %}<meta name="description" content="{{ meta_description }}">{% endif %}
         {% if canonical_url %}<link rel="canonical" href="{{ canonical_url }}">{% endif %}
+
+        <!-- Open Graph (Facebook, LinkedIn, WhatsApp, etc.) -->
         <meta property="og:type" content="website">
         <meta property="og:locale" content="fr_FR">
+        <meta property="og:site_name" content="Mon Diagnostic Artificialisation">
         {% if og_title %}<meta property="og:title" content="{{ og_title }}">{% endif %}
         {% if og_description %}<meta property="og:description" content="{{ og_description }}">{% endif %}
         {% if og_url %}<meta property="og:url" content="{{ og_url }}">{% endif %}
+        <meta property="og:image" content="{% static 'img/og-image.png' %}">
+
+        <!-- Twitter/X -->
+        <meta name="twitter:card" content="summary_large_image">
+        {% if og_title %}<meta name="twitter:title" content="{{ og_title }}">{% endif %}
+        {% if og_description %}<meta name="twitter:description" content="{{ og_description }}">{% endif %}
+        <meta name="twitter:image" content="{% static 'img/og-image.png' %}">
 
         <link crossorigin="anonymous" rel="icon" href="{% static 'favicon/favicon.svg' %}" integrity="sha256-9XtIvlxcpnXef29DOD0o+agM++e/ZB8xYC5vGqDiTLI=">
         <link crossorigin="anonymous" rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}" integrity="sha256-U4nRN5qiI5h+9kMtFZh/GkuJqlklIU4HLH999+7seYc=">
diff --git a/project/views/diagnostic/DiagnosticBaseView.py b/project/views/diagnostic/DiagnosticBaseView.py
@@ -53,6 +53,14 @@ def get_meta_description(self, land: LandModel) -> str:
             return f"{base} - {self.page_section}."
         return f"{base} : consommation d'espaces, artificialisation, trajectoire ZAN."
 
+    def get_og_title(self, land: LandModel) -> str:
+        """Titre Open Graph pour le partage"""
+        return f"Diagnostic de {land.name} | Mon Diagnostic Artificialisation"
+
+    def get_og_description(self, land: LandModel) -> str:
+        """Description Open Graph pour le partage"""
+        return f"Consultez les données d'artificialisation et de consommation d'espaces du territoire de {land.name}."
+
     def get_context_data(self, **kwargs):
         land = self.object
         page_title = self.get_page_title(land)
@@ -65,8 +73,8 @@ def get_context_data(self, **kwargs):
                 "page_title": page_title,
                 "meta_description": meta_description,
                 "canonical_url": canonical_url,
-                "og_title": page_title,
-                "og_description": meta_description,
+                "og_title": self.get_og_title(land),
+                "og_description": self.get_og_description(land),
                 "og_url": canonical_url,
             }
         )
diff --git a/static/img/og-image.png b/static/img/og-image.png
diff --git a/templates/index.html b/templates/index.html
@@ -8,10 +8,25 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        <meta name="description" content="" />
-        <meta name="author" content="" />
+        <meta name="description" content="Analysez et maitrisez la consommation d'espaces et l'artificialisation des sols de votre territoire." />
+        <meta name="author" content="Mon Diagnostic Artificialisation" />
         <meta name="htmx-config" content='{"inlineScriptNonce":"[NONCE_PLACEHOLDER]"}'>
 
+        <!-- Open Graph (Facebook, LinkedIn, WhatsApp, etc.) -->
+        <meta property="og:type" content="website">
+        <meta property="og:locale" content="fr_FR">
+        <meta property="og:site_name" content="Mon Diagnostic Artificialisation">
+        <meta property="og:title" content="Mon Diagnostic Artificialisation">
+        <meta property="og:description" content="Analysez et maitrisez la consommation d'espaces et l'artificialisation des sols de votre territoire.">
+        <meta property="og:image" content="{% static 'img/og-image.png' %}">
+        <meta property="og:url" content="{{ request.build_absolute_uri }}">
+
+        <!-- Twitter/X -->
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="Mon Diagnostic Artificialisation">
+        <meta name="twitter:description" content="Analysez et maitrisez la consommation d'espaces et l'artificialisation des sols de votre territoire.">
+        <meta name="twitter:image" content="{% static 'img/og-image.png' %}">
+
         <title>{% block pagetitle %}{{ page_title }}{% endblock %}</title>
 
         <link crossorigin="anonymous" rel="icon" href="{% static 'favicon/favicon.svg' %}" integrity="sha256-9XtIvlxcpnXef29DOD0o+agM++e/ZB8xYC5vGqDiTLI=">
