From ce0ddfba8cdb1eeb36e872bd0797a1dc5c57a297 Mon Sep 17 00:00:00 2001
From: Renato Atilio <renato@discourse.org>
Date: Tue, 4 Jul 2023 15:02:52 -0300
Subject: [PATCH] FIX: mobile share canonical URL (#22370)

* FIX: mobile share canonical url

* FIX: test

* DEV: address PR comments
---
 .../instance-initializers/meta-tag-updater.js | 27 +++++++++++++++++++
 .../opengraph-tag-updater.js                  | 26 ------------------
 ...dater-test.js => meta-tag-updater-test.js} | 17 ++++++++----
 .../javascripts/discourse/tests/index.html    |  6 +++--
 4 files changed, 43 insertions(+), 33 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/instance-initializers/meta-tag-updater.js
 delete mode 100644 app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js
 rename app/assets/javascripts/discourse/tests/acceptance/{opengraph-tag-updater-test.js => meta-tag-updater-test.js} (72%)

diff --git a/app/assets/javascripts/discourse/app/instance-initializers/meta-tag-updater.js b/app/assets/javascripts/discourse/app/instance-initializers/meta-tag-updater.js
new file mode 100644
index 00000000000..3b1fed8d9b4
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/instance-initializers/meta-tag-updater.js
@@ -0,0 +1,27 @@
+import { getAbsoluteURL } from "discourse-common/lib/get-url";
+
+export default {
+  initialize(owner) {
+    // workaround for Safari on iOS 14.3
+    // seems it has started using opengraph tags when sharing
+    const ogTitle = document.querySelector("meta[property='og:title']");
+    const ogUrl = document.querySelector("meta[property='og:url']");
+    const twitterTitle = document.querySelector("meta[name='twitter:title']");
+    const twitterUrl = document.querySelector("meta[name='twitter:url']");
+
+    // workaround for mobile Chrome, which uses the canonical url when sharing
+    const canonicalUrl = document.querySelector("link[rel='canonical']");
+
+    const appEvents = owner.lookup("service:app-events");
+    appEvents.on("page:changed", ({ title, url }) => {
+      const absoluteUrl = getAbsoluteURL(url);
+
+      ogTitle?.setAttribute("content", title);
+      ogUrl?.setAttribute("content", absoluteUrl);
+      twitterTitle?.setAttribute("content", title);
+      twitterUrl?.setAttribute("content", absoluteUrl);
+
+      canonicalUrl?.setAttribute("href", absoluteUrl);
+    });
+  },
+};
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js b/app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js
deleted file mode 100644
index 801f39d4a6d..00000000000
--- a/app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getAbsoluteURL } from "discourse-common/lib/get-url";
-
-export default {
-  initialize(owner) {
-    // workaround for Safari on iOS 14.3
-    // seems it has started using opengraph tags when sharing
-    const ogTitle = document.querySelector("meta[property='og:title']");
-    const ogUrl = document.querySelector("meta[property='og:url']");
-    const twitterTitle = document.querySelector(
-      "meta[property='twitter:title']"
-    );
-    const twitterUrl = document.querySelector("meta[property='twitter:url']");
-
-    if (!ogTitle || !ogUrl || !twitterTitle || !twitterUrl) {
-      return;
-    }
-
-    const appEvents = owner.lookup("service:app-events");
-    appEvents.on("page:changed", ({ title, url }) => {
-      ogTitle.setAttribute("content", title);
-      ogUrl.setAttribute("content", getAbsoluteURL(url));
-      twitterTitle.setAttribute("content", title);
-      twitterUrl.setAttribute("content", getAbsoluteURL(url));
-    });
-  },
-};
diff --git a/app/assets/javascripts/discourse/tests/acceptance/opengraph-tag-updater-test.js b/app/assets/javascripts/discourse/tests/acceptance/meta-tag-updater-test.js
similarity index 72%
rename from app/assets/javascripts/discourse/tests/acceptance/opengraph-tag-updater-test.js
rename to app/assets/javascripts/discourse/tests/acceptance/meta-tag-updater-test.js
index fffde83a167..485f3e2dccb 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/opengraph-tag-updater-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/meta-tag-updater-test.js
@@ -2,7 +2,7 @@ import { click, visit } from "@ember/test-helpers";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 
-acceptance("Opengraph Tag Updater", function (needs) {
+acceptance("Meta Tag Updater", function (needs) {
   needs.pretender((server, helper) => {
     server.get("/about", () => {
       return helper.response({});
@@ -33,17 +33,24 @@ acceptance("Opengraph Tag Updater", function (needs) {
     );
     assert.strictEqual(
       document
-        .querySelector("meta[property='twitter:title']")
+        .querySelector("meta[name='twitter:title']")
         .getAttribute("content"),
       document.title,
-      "it should update OG title"
+      "it should update Twitter title"
     );
     assert.ok(
       document
-        .querySelector("meta[property='twitter:url']")
+        .querySelector("meta[name='twitter:url']")
         .getAttribute("content")
         .endsWith("/about"),
-      "it should update OG URL"
+      "it should update Twitter URL"
+    );
+    assert.ok(
+      document
+        .querySelector("link[rel='canonical']")
+        .getAttribute("href")
+        .endsWith("/about"),
+      "it should update the canonical URL"
     );
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/index.html b/app/assets/javascripts/discourse/tests/index.html
index 8e4f481986d..4732c5df3a3 100644
--- a/app/assets/javascripts/discourse/tests/index.html
+++ b/app/assets/javascripts/discourse/tests/index.html
@@ -7,8 +7,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:title" content="Discourse Tests" />
     <meta property="og:url" content="{{rootURL}}" />
-    <meta property="twitter:title" content="Discourse Tests" />
-    <meta property="twitter:url" content="{{rootURL}}" />
+    <meta name="twitter:title" content="Discourse Tests" />
+    <meta name="twitter:url" content="{{rootURL}}" />
+
+    <link rel="canonical" href="{{rootURL}}" />
 
     <meta name="color-scheme" content="light dark">