Replace useHead with useSeoMeta

app.vue

@@ -14,18 +14,24 @@
 </template>
 
 <script setup>
-useHead({
-  title: "Index",
-  titleTemplate: "%s - Nuxt 3 Woocommerce",
-  meta: [
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
+useSeoMeta({
+  title: "Nuxt 3 Woocommerce",
+  description:
+    "A modern, fast, and SEO-friendly e-commerce site built with Nuxt 3 and WooCommerce.",
+  ogTitle: "Nuxt 3 Woocommerce",
+  ogDescription:
+    "A modern, fast, and SEO-friendly e-commerce site built with Nuxt 3 and WooCommerce.",
+  twitterCard: "summary_large_image",
+  htmlAttrs: {
+    lang: "en",
+  },
+  link: [
     {
-      hid: "description",
-      name: "description",
-      content: "Nuxt 3 Woocommerce",
+      rel: "icon",
+      type: "image/x-icon",
+      href: "/favicon.ico",
     },
   ],
-  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
 });
 </script>
 

components/Products/ProductsSingleProduct.vue

@@ -105,6 +105,24 @@ const props = defineProps({
 const variables = { id: props.id, slug: props.slug };
 const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
 
+watch(
+  () => data.value,
+  (productData) => {
+    if (productData?.product) {
+      const { name, description, image } = productData.product;
+      useSeoMeta({
+        title: name,
+        description: stripHTML(description),
+        ogTitle: name,
+        ogDescription: stripHTML(description),
+        ogImage: image?.sourceUrl,
+        twitterCard: 'summary_large_image',
+      });
+    }
+  },
+  { immediate: true },
+);
+
 watch(
   () => data.value,
   (dataValue) => {

nuxt.config.js

@@ -30,11 +30,6 @@ export default defineNuxtConfig({
     },
   },
   app: {
-    head: {
-      charset: "utf-8",
-      viewport: "width=500, initial-scale=1",
-      meta: [{ name: "description", content: "Nuxt 3 - Woocommerce" }],
-    },
     // global transition
     pageTransition: { name: "page", mode: "out-in" },
     layoutTransition: { name: "layout", mode: "out-in" },

pages/product/[product].vue

@@ -4,18 +4,4 @@
 
 <script setup>
 const route = useRoute();
-
-useHead({
-  title: route.params.product,
-  titleTemplate: "%s - Nuxt 3 Woocommerce",
-  meta: [
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
-    {
-      hid: "description",
-      name: "description",
-      content: "Nuxt 3 Woocommerce",
-    },
-  ],
-  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
-});
 </script>