Use property attribute for OpenGraph title and image (#3213)

Co-authored-by: Olga Bulat <[email protected]>
WordPress · Oct 24, 2023 · 0987949 · 0987949
1 parent 75f85ed
commit 0987949
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/frontend/src/constants/meta.ts b/frontend/src/constants/meta.ts
@@ -24,10 +24,10 @@ export const meta = [
     name: "description",
     content: DESCRIPTION,
   },
-  { hid: "og:title", name: "og:title", content: "Openverse" },
+  { hid: "og:title", property: "og:title", content: "Openverse" },
   {
     hid: "og:image",
-    name: "og:image",
+    property: "og:image",
     content: "/openverse-default.jpg",
   },
   {

diff --git a/frontend/src/utils/og.ts b/frontend/src/utils/og.ts
@@ -1,5 +1,8 @@
 import type { MetaInfo } from "vue-meta"
-import type { MetaPropertyName } from "vue-meta/types/vue-meta"
+import type {
+  MetaPropertyName,
+  MetaPropertyProperty,
+} from "vue-meta/types/vue-meta"
 
 export const createDetailPageMeta = ({
   title,
@@ -18,18 +21,18 @@ export const createDetailPageMeta = ({
       name: "robots",
       content: "noindex",
     },
-  ] as MetaPropertyName[]
+  ] as (MetaPropertyName | MetaPropertyProperty)[]
   if (title) {
     meta.push({
       hid: "og:title",
-      name: "og:title",
+      property: "og:title",
       content: title,
     })
   }
   if (thumbnail && !isSensitive) {
     meta.push({
       hid: "og:image",
-      name: "og:image",
+      property: "og:image",
       content: thumbnail,
     })
   }

diff --git a/frontend/test/playwright/e2e/seo.spec.ts b/frontend/test/playwright/e2e/seo.spec.ts
@@ -70,13 +70,13 @@ test.describe("Page metadata", () => {
       const metaRobots = page.locator('meta[name="robots"]')
       await expect(metaRobots).toHaveAttribute("content", openversePage.robots)
 
-      const metaOgImage = page.locator('meta[name="og:image"]')
+      const metaOgImage = page.locator('meta[property="og:image"]')
       await expect(metaOgImage).toHaveAttribute(
         "content",
         openversePage.ogImage
       )
 
-      const metaOgTitle = page.locator('meta[name="og:title"]')
+      const metaOgTitle = page.locator('meta[property="og:title"]')
       await expect(metaOgTitle).toHaveAttribute(
         "content",
         openversePage.ogTitle