FIX: mobile share canonical URL (#22370)

* FIX: mobile share canonical url

* FIX: test

* DEV: address PR comments

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);
+    });
+  },
+};

app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js

@@ -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));
-    });
-  },
-};

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"
     );
   });
 });

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 name="twitter:title" content="Discourse Tests" />
-    <meta property="twitter:url" content="{{rootURL}}" />
+    <meta name="twitter:url" content="{{rootURL}}" />
+
+    <link rel="canonical" href="{{rootURL}}" />
 
     <meta name="color-scheme" content="light dark">