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

Author: atinux

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

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]
             })
           }

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')

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

test/fixtures/document-driven/content/no-surround.md renamed to test/fixtures/document-driven/content/4.no-surround.md

@@ -0,0 +1,7 @@
+---
+image.src: 'https://picsum.photos/400/200'
+image.width: 400
+image.height: 200
+---
+
+# OG Image