refactor: have twitter use ogp metadata

remove duplicated `og:image` and use OGP tags as described in https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
comses · Jan 26, 2024 · a42107a · a42107a
1 parent 41034db
commit a42107a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/django/core/jinja2/base.jinja b/django/core/jinja2/base.jinja
@@ -1,4 +1,4 @@
-{% from "common.jinja" import render_ogp_tags%}
+{% from "common.jinja" import render_ogp_tags %}
 
 {% if not user %}
     {% set user = request.user %}
@@ -275,7 +275,7 @@
 {% endmacro %}
 
 <!DOCTYPE html>
-<html lang="en" class="no-js">
+<html lang="en" class="no-js" prefix="og: http://ogp.me/ns#">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -291,7 +291,7 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     {% block ogp_tags %}
-    {{ render_ogp_tags() }}
+        {{ render_ogp_tags() }}
     {% endblock ogp_tags %}
     <title>
         {% block title %}CoMSES Net{% endblock %}

diff --git a/django/core/jinja2/common.jinja b/django/core/jinja2/common.jinja
@@ -302,18 +302,15 @@ Currently in <em><mark>{{ constants.DEPLOY_ENVIRONMENT }}</mark></em> mode.
 {% endmacro %}
 
 {% macro render_ogp_tags(url=None, title=None, description=None, image=None) %}
-    <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="{{ url or 'https://www.comses.net/'}}">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="{{ title or 'The Network for Computational Modeling in the Social and Ecological Sciences (CoMSES Net)'}}">
-    <meta property="og:description" content="{{ description or 'CoMSES Net is an international open research community dedicated to fostering good practices for computational / agent based modeling.'}}">
-    <meta property="og:image" content="{{ image or static('images/logo-comses.png') }}">
+    <!-- Open Graph Protocol Tags -->
 
     <!-- Twitter Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="comses.net">
-    <meta property="twitter:url" content="{{ url or 'https://www.comses.net/'}}">
-    <meta name="twitter:title" content="{{ title or 'The Network for Computational Modeling in the Social and Ecological Sciences (CoMSES Net)'}}">
-    <meta name="twitter:description" content="{{ description or 'CoMSES Net is an international open research community dedicated to fostering good practices for computational / agent based modeling.'}}">
-    <meta property="og:image" content="{{ image or static('images/logo-comses.png') }}">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@comses" />
+    <meta property="twitter:domain" content="comses.net" />
+    <meta property="og:url" content="{{ url or 'https://www.comses.net/'}}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ title or 'The Network for Computational Modeling in the Social and Ecological Sciences (CoMSES Net)'}}" />
+    <meta property="og:description" content="{{ description or 'CoMSES Net is an international open research community dedicated to fostering good practices for computational / agent based modeling.'}}" />
+    <meta property="og:image" content="{{ image or static('images/logo-comses.png') }}" />
 {% endmacro %}