feat(nuxt): allow inferences on description and image

Author: harlan-zw

packages/nuxt/src/runtime/plugin.ts

@@ -1,4 +1,5 @@
 import { createSchemaOrg } from '@vueuse/schema-org'
+import type { ResolvedMeta } from 'schema-org-graph-js'
 import { defineNuxtPlugin } from '#app'
 import { unref, watch } from '#imports'
 import config from '#build/nuxt-schema-org-config.mjs'
@@ -17,11 +18,16 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     async meta() {
       const head = nuxtApp.vueApp._context.provides.usehead
 
-      const inferredMeta: Record<string, any> = {}
+      const inferredMeta = {} as ResolvedMeta
       const headTag = head.headTags.reverse().filter(t => t.tag === 'title' && !!t.props.children)
       if (headTag.length)
         inferredMeta.title = headTag[0].props.children
-
+      const descTag = head.headTags.reverse().filter(t => t.tag === 'meta' && t.props.name === 'description' && !!t.props.content)
+      if (descTag.length)
+        inferredMeta.description = descTag[0].props.content
+      const imageTag = head.headTags.reverse().filter(t => t.tag === 'meta' && t.props.property === 'og:image' && !!t.props.content)
+      if (imageTag.length)
+        inferredMeta.image = imageTag[0].props.content
       const schemaOrgMeta = {
         path: nuxtApp._route.path,
         ...inferredMeta,

test/fixtures/nuxt/pages/meta-overrides.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+useHead({
+  title: 'Title Override',
+  meta: [
+    {
+      name: 'description',
+      content: 'Description override',
+    },
+    {
+      property: 'og:image',
+      content: 'https://example-image-override.com/img.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div>
+    <h1>Meta Overrides</h1>
+  </div>
+</template>

test/fixtures/nuxt/pages/title-override.vue

@@ -61,7 +61,7 @@ describe('pages', () => {
   })
 
   it('render title override', async () => {
-    const schema = await $fetchSchemaOrg('/title-override')
+    const schema = await $fetchSchemaOrg('/meta-overrides')
 
     // Snapshot
     expect(schema).toMatchInlineSnapshot(`
@@ -85,7 +85,7 @@ describe('pages', () => {
             "url": "https://example.com",
           },
           {
-            "@id": "https://example.com/title-override/#webpage",
+            "@id": "https://example.com/meta-overrides/#webpage",
             "@type": "WebPage",
             "about": {
               "@id": "https://example.com/#identity",
@@ -98,21 +98,22 @@ describe('pages', () => {
               {
                 "@type": "ReadAction",
                 "target": [
-                  "https://example.com/title-override",
+                  "https://example.com/meta-overrides",
                 ],
               },
             ],
-            "url": "https://example.com/title-override",
+            "url": "https://example.com/meta-overrides",
           },
         ],
       }
     `)
 
     const webpageNode = schema['@graph'].filter(n => n['@type'] === 'WebPage')[0]
-    expect(webpageNode.url).toEqual('https://example.com/title-override')
+    expect(webpageNode.url).toEqual('https://example.com/meta-overrides')
     expect(webpageNode.name).toEqual('Title Override')
+    expect(webpageNode.description).toEqual('Description override')
 
-    await expectNoClientErrors('/title-override')
+    await expectNoClientErrors('/meta-overrides')
   })
 
   it('render plugin override', async () => {