fix: useContentHead was not respecting og:image props (#1461)

nuxt · Aug 17, 2022 · bcf241a · bcf241a
1 parent bf35a81
commit bcf241a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 3 deletions.
diff --git a/playground/document-driven/content/0.index.md b/playground/document-driven/content/0.index.md
@@ -2,6 +2,7 @@
 head.titleTemplate: '%s | TEST'
 title: Hello World
 description: Hello, here is a description
+image: 'https://picsum.photos/400/200'
 ---
 
 # Home

diff --git a/src/runtime/composables/head.ts b/src/runtime/composables/head.ts
@@ -44,7 +44,7 @@ export const useContentHead = (
         head.meta.push({
           property: 'og:image',
           // @ts-ignore - We expect `head.image` from Nuxt configurations...
-          content: head.image
+          content: image
         })
       }
 
@@ -70,7 +70,7 @@ export const useContentHead = (
             })
           } else if (image[key]) {
             head.meta.push({
-              property: `og:${key}`,
+              property: `og:image:${key}`,
               content: image[key]
             })
           }

diff --git a/test/document-driven.test.ts b/test/document-driven.test.ts
@@ -47,6 +47,20 @@ describe('fixtures:document-driven', async () => {
     expect(html).contains('with next link /no-surround')
   })
 
+  test('useContentHead(): og:image with string', async () => {
+    const html = await $fetch('/fm-data')
+
+    expect(html).contains('<meta property="og:image" content="https://picsum.photos/400/200">')
+  })
+
+  test('useContentHead(): og:image with object', async () => {
+    const html = await $fetch('/og-image')
+
+    expect(html).contains('<meta property="og:image" content="https://picsum.photos/400/200">')
+    expect(html).contains('<meta property="og:image:width" content="400">')
+    expect(html).contains('<meta property="og:image:height" content="200">')
+  })
+
   test('404 page', async () => {
     try {
       await $fetch('/page-not-found')

diff --git a/test/fixtures/document-driven/content/3.fm-data.md b/test/fixtures/document-driven/content/3.fm-data.md
@@ -1,5 +1,6 @@
 ---
 score: 23.5
+image: 'https://picsum.photos/400/200'
 ---
 
-# FM Data
+# FM Data
diff --git a/...es/document-driven/content/no-surround.md → .../document-driven/content/4.no-surround.md b/...es/document-driven/content/no-surround.md → .../document-driven/content/4.no-surround.md
diff --git a/test/fixtures/document-driven/content/5.og-image.md b/test/fixtures/document-driven/content/5.og-image.md
@@ -0,0 +1,7 @@
+---
+image.src: 'https://picsum.photos/400/200'
+image.width: 400
+image.height: 200
+---
+
+# OG Image