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 @@
-
-
+
+
+
+