diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
index 81780c0d7..d14a1190f 100644
--- a/packages/devtools/client/components/OpenGraphMissingTabs.vue
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from 'defu'
 import type { ReactiveHead } from '@unhead/vue'
+import type { MetaFlatInput } from '@uhead/schema'
 import type { NormalizedHeadTag } from '../../src/types'
 import { ogTags } from '../data/open-graph'
 
@@ -13,27 +14,36 @@ const missingTags = computed(() => {
   return ogTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
 })
 
-const missingRequiredTags = computed(() => {
-  return missingTags.value.filter(i => i.suggestion === 'required')
-})
-const missingRecommendedTags = computed(() => {
-  return missingTags.value.filter(i => i.suggestion === 'recommended')
-})
-
-const mergedMissingTags = computed(() => {
-  let data: Partial<ReactiveHead> = {}
+const codeSnippet = computed(() => {
+  let mergedHeadOptions: Partial<ReactiveHead> = {}
+  const mergedSeoMetaOptions: Partial<MetaFlatInput> = {}
   missingTags.value
     .forEach((tag) => {
-      data = defu(data, tag.default)
+      if (tag.seoMeta)
+        Object.assign(mergedSeoMetaOptions, tag.seoMeta)
+      else
+        mergedHeadOptions = defu(mergedHeadOptions, tag.head)
     })
-  return data
-})
 
-const codeSnippet = computed(() => {
-  const body = JSON.stringify(mergedMissingTags.value, null, 2)
-    .replace(/"([^"]+)":/g, '$1:')
-    .replace(/"/g, '\'')
-  return `useHead(${body})`
+  const lines = []
+
+  if (Object.keys(mergedSeoMetaOptions).length) {
+    const body = JSON.stringify(mergedSeoMetaOptions, null, 2)
+      .replace(/"([^"]+)":/g, '$1:')
+      .replace(/"/g, '\'')
+
+    lines.push(`useSeoMeta(${body})`)
+  }
+
+  if (Object.keys(mergedHeadOptions).length) {
+    const body = JSON.stringify(mergedHeadOptions, null, 2)
+      .replace(/"([^"]+)":/g, '$1:')
+      .replace(/"/g, '\'')
+
+    lines.push(`useHead(${body})`)
+  }
+
+  return lines.join('\n\n')
 })
 
 const copy = useCopy()
@@ -50,7 +60,7 @@ const selectedTab = ref(tabs[0])
   <template v-if="missingTags.length">
     <NSectionBlock
       text="Missing Tags"
-      :description="`${missingTags.length} missing tags (${missingRequiredTags.length} required, ${missingRecommendedTags.length} recommended)`"
+      :description="`${missingTags.length} missing tags`"
       icon="carbon:warning-other"
       header-class="text-orange op100! [[open]_&]:text-inherit"
       :padding="false"
diff --git a/packages/devtools/client/data/open-graph.ts b/packages/devtools/client/data/open-graph.ts
index e914c5124..4f257f973 100644
--- a/packages/devtools/client/data/open-graph.ts
+++ b/packages/devtools/client/data/open-graph.ts
@@ -1,9 +1,11 @@
 import type { ReactiveHead } from '@unhead/vue'
+import type { MetaFlatInput } from '@unhead/schema'
 
 export interface OpenGraphTagDefine {
   name: string
   suggestion: 'required' | 'recommended' | 'optional'
-  default: Partial<ReactiveHead>
+  head: Partial<ReactiveHead>
+  seoMeta?: Partial<MetaFlatInput> & { title?: string }
   docs?: string
   description?: string
 }
@@ -12,7 +14,10 @@ export const ogTags: OpenGraphTagDefine[] = [
   {
     name: 'title',
     suggestion: 'required',
-    default: {
+    head: {
+      title: '[title]',
+    },
+    seoMeta: {
       title: '[title]',
     },
     docs: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title',
@@ -21,7 +26,7 @@ export const ogTags: OpenGraphTagDefine[] = [
   {
     name: 'description',
     suggestion: 'required',
-    default: {
+    head: {
       meta: [
         {
           name: 'description',
@@ -29,12 +34,15 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      description: '[description]',
+    },
     description: 'A one to two sentence summary for search engines that includes relevant keywords to improve visibility in search results.',
   },
   {
     name: 'icon',
     suggestion: 'recommended',
-    default: {
+    head: {
       link: [
         {
           rel: 'icon',
@@ -48,7 +56,7 @@ export const ogTags: OpenGraphTagDefine[] = [
   {
     name: 'lang',
     suggestion: 'recommended',
-    default: {
+    head: {
       htmlAttrs: {
         lang: 'en',
       },
@@ -58,7 +66,7 @@ export const ogTags: OpenGraphTagDefine[] = [
   {
     name: 'og:title',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           property: 'og:title',
@@ -66,13 +74,16 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      ogTitle: '[og:title]',
+    },
     docs: 'https://ogp.me/#metadata',
     description: 'A title for the link preview used by social media platforms.',
   },
   {
     name: 'og:description',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           property: 'og:description',
@@ -80,13 +91,16 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      ogDescription: '[og:description]',
+    },
     docs: 'https://ogp.me/#metadata',
     description: 'A description for the link preview used by social media platforms.',
   },
   {
     name: 'og:image',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           property: 'og:image',
@@ -94,13 +108,16 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      ogImage: '[og:image]',
+    },
     docs: 'https://ogp.me/#metadata',
     description: 'An image for the link preview used by social media platforms.',
   },
   {
     name: 'og:url',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           property: 'og:url',
@@ -108,13 +125,16 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      ogUrl: '[og:url]',
+    },
     docs: 'https://ogp.me/#metadata',
     description: 'A canonical URL for the link preview used to specify the preferred URL to display in search engine results and social media previews when multiple URLs may point to the same page.',
   },
   {
     name: 'twitter:title',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           name: 'twitter:title',
@@ -122,26 +142,32 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      twitterTitle: '[twitter:title]',
+    },
     docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
     description: 'A title for the Twitter card used to provide a preview of the content shared on the page.',
   },
   {
     name: 'twitter:description',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [{
         name: 'twitter:description',
         content: '[twitter:description]',
       },
       ],
     },
+    seoMeta: {
+      twitterDescription: '[twitter:description]',
+    },
     docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
     description: 'A description for the Twitter card used to provide a preview of the content shared on the page.',
   },
   {
     name: 'twitter:image',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           name: 'twitter:image',
@@ -149,13 +175,16 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      twitterImage: '[twitter:image]',
+    },
     docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
     description: 'An image for the Twitter card used to provide a preview of the content shared on the page.',
   },
   {
     name: 'twitter:card',
     suggestion: 'recommended',
-    default: {
+    head: {
       meta: [
         {
           name: 'twitter:card',
@@ -163,6 +192,9 @@ export const ogTags: OpenGraphTagDefine[] = [
         },
       ],
     },
+    seoMeta: {
+      twitterCard: 'summary',
+    },
     docs: 'https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards',
     description: 'The type of Twitter card to use, which determines the type of card to display in link previews on Twitter.',
   },