تحسين SEO: useHead + useSeoMeta

يحتوي MegaShop الخاص بـ Charlie على مليون صفحة منتج، لكن Google فهرس 2000 فقط منها. عندما تبحث Alice عن اسم منتج، لا يمكنها العثور على أي صفحات من MegaShop. تحقق Bob ووجد أن صفحات المنتجات تفتقر إلى العناوين والأوصاف التعريفية وعلامات Open Graph والبيانات المنظمة. سلسلة أدوات SEO في Nuxt 3 يمكنها حل جميع هذه المشاكل.

1. ما ستتعلمه

useHead(): إدارة ديناميكية لعلامات title و meta و link و script و style
useSeoMeta(): بيانات SEO الوصفية المنظمة (OG/Twitter/description)
الإعدادات الافتراضية لـ SEO المدمجة في Nuxt 3 وآليات التجاوز
Sitemap و robots.txt: وحدة @nuxtjs/sitemap
SEO الديناميكي لصفحة تفاصيل منتج MegaShop + JSON-LD + إنشاء Sitemap تلقائي

2. قصة حقيقية لمهندس معمارية

(1) نقطة الألم: من مليون صفحة، فهرست Google 2000 فقط

تحقق Charlie من MegaShop باستخدام Google Search Console ووجد أنه من مليون صفحة منتج، تم فهرسة 2000 فقط. كشف تحليل Bob أن جميع صفحات المنتجات تحمل العنوان "MegaShop"، مع أوصاف تعريفية فارغة وعلامات Open Graph مفقودة—مما يعني أنه عند المشاركة على وسائل التواصل الاجتماعي، يظهر اسم الموقع فقط بدون معلومات المنتج.

(2) حل سلسلة أدوات SEO في Nuxt

تتيح useHead و useSeoMeta في Nuxt 3 لكل صفحة منتج امتلاك بيانات SEO الوصفية الخاصة بها:

TYPESCRIPT

// pages/products/[id].vue
useSeoMeta({
  title: product.value?.name,
  ogTitle: product.value?.name,
  description: `Buy ${product.value?.name} for $${product.value?.price} USD`,
  ogImage: product.value?.image
})

(3) النتائج: ارتفع معدل فهرسة Google 40 ضعفاً

بعد ثلاثة أشهر، ارتفع فهرس Google من 2000 إلى 800000، وزادت حركة البحث العضوية بنسبة 340%.

3. بنية سلسلة أدوات SEO

(1) نظرة عامة على سلسلة أدوات SEO في Nuxt 3

graph TB
    A[أدوات Nuxt SEO] --> B[useHead]
    A --> C[useSeoMeta]
    A --> D[JSON-LD]
    A --> E[@nuxtjs/sitemap]
    A --> F[robots.txt]
    B --> B1[title / meta / link]
    C --> C1[OG / Twitter Card]
    D --> D1[Product / Breadcrumb]
    E --> E1[إنشاء URL ديناميكي]
    F --> F1[التحكم في وصول الزاحف]

4. الإدارة الديناميكية لـ useHead

(1) ماذا يمكن أن يدير useHead؟

نوع العلامة	السمة	تأثير SEO
title	عنوان الصفحة	🔴 عالي (إشارة الترتيب)
meta name="description"	وصف الصفحة	🔴 عالي (معدل النقر)
meta property="og:*"	Open Graph	🟡 متوسط (المشاركة الاجتماعية)
meta name="twitter:*"	Twitter Card	🟡 متوسط (المشاركة الاجتماعية)
link rel="canonical"	URL الأساسي	🔴 عالي (إزالة التكرار)
link rel="alternate"	URL متعدد اللغات	🟡 متوسط (i18n SEO)
script type="application/ld+json"	JSON-LD	🟡 دعم (مقتطفات غنية)

(1) ▶ مثال: الاستخدام الأساسي لـ useHead

TYPESCRIPT

// في أي مكوّن أو صفحة
useHead({
  title: 'Premium Headphones - MegaShop',
  meta: [
    { name: 'description', content: 'Buy Premium Headphones for $299.99 USD. Free shipping.' },
    { name: 'keywords', content: 'headphones, wireless, premium, audio' }
  ],
  link: [
    { rel: 'canonical', href: 'https://megashop.com/products/123' }
  ]
})

الناتج:

TEXT

// تم التنفيذ بنجاح

(2) ▶ مثال: عنوان ديناميكي (computed، تفاعلي)

VUE

<script setup lang="ts">
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)

// عنوان ديناميكي يتحدث عند تحميل المنتج
useHead({
  title: computed(() => product.value
    ? `${product.value.name} - MegaShop`
    : 'Loading... - MegaShop'
  )
})
</script>

الناتج:

TEXT

// تم التنفيذ بنجاح

(3) ▶ مثال: تكوين افتراضي عام

TYPESCRIPT

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'MegaShop - Premium E-Commerce',
      titleTemplate: '%s | MegaShop',
      meta: [
        { name: 'description', content: 'Over 1 million products shipped worldwide' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { charset: 'utf-8' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

الناتج:

TEXT

// تم التنفيذ بنجاح

4. useSeoMeta لـ SEO المنظم

(1) مقارنة بين useSeoMeta و useHead

البُعد	useHead	useSeoMeta
الاستهداف	إدارة Head عامة	اختصارات مخصصة لـ SEO
أسلوب API	كائن مصفوفة	أزواج مفتاح-قيمة
OG/Twitter	يتطلب إدخال علامات meta يدوياً	يتم في سطر واحد
أمان النوع	⚠️ تحقق من الوثائق	✅ تلميحات نوع كاملة
إزالة التكرار	⚠️ إدارة يدوية	✅ إزالة تكرار تلقائية

(1) ▶ مثال: SEO لصفحة تفاصيل المنتج

VUE

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)

// بيانات SEO الوصفية المنظمة - آمنة النوع
useSeoMeta({
  title: () => `${product.value?.name} - Buy Online`,
  ogTitle: () => `${product.value?.name} - MegaShop`,
  description: () => `Buy ${product.value?.name} for $${product.value?.price} USD. ${product.value?.reviewCount} reviews, ${product.value?.rating} stars. Free shipping worldwide.`,
  ogDescription: () => `Premium ${product.value?.name} - $${product.value?.price} USD`,
  ogImage: () => product.value?.image || '/images/og-default.jpg',
  ogUrl: () => `https://megashop.com/products/${route.params.id}`,
  ogType: 'product',
  twitterCard: 'summary_large_image',
  twitterTitle: () => `${product.value?.name} - MegaShop`,
  twitterImage: () => product.value?.image || '/images/og-default.jpg'
})
</script>

الناتج:

TEXT

// تم التنفيذ بنجاح

(2) ▶ مثال: SEO للصفحة الرئيسية

TYPESCRIPT

// pages/index.vue
useSeoMeta({
  title: 'MegaShop - Over 1 Million Products',
  ogTitle: 'MegaShop - Premium E-Commerce Platform',
  description: 'Shop over 1 million products with free worldwide shipping. Electronics, fashion, home & garden at the best prices.',
  ogDescription: 'Discover 1 million+ products on MegaShop. Free shipping on orders over $50 USD.',
  ogImage: '/images/og-homepage.jpg',
  ogUrl: 'https://megashop.com',
  ogType: 'website'
})

الناتج:

TEXT

// تم التنفيذ بنجاح

5. البيانات المنظمة JSON-LD

(1) تأثير البيانات المنظمة على نتائج البحث

نوع البيانات	نتائج مقتطفات Google الغنية	متوافق مع MegaShop
Product	السعر/التقييم/المخزون	✅ صفحة تفاصيل المنتج
BreadcrumbList	تنقل مسار التنقل	✅ جميع الصفحات
Organization	معلومات الشركة	✅ الصفحة الرئيسية
Website	مربع بحث الموقع	✅ الصفحة الرئيسية
Review	ملخص المراجعات	✅ صفحة المنتج

(1) ▶ مثال: JSON-LD للمنتج

VUE

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)

// بيانات JSON-LD المنظمة لنتائج Google الغنية
useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: computed(() => JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: product.value?.name,
        image: product.value?.image,
        description: product.value?.description,
        sku: `MEGA-${product.value?.id}`,
        offers: {
          '@type': 'Offer',
          url: `https://megashop.com/products/${route.params.id}`,
          priceCurrency: 'USD',
          price: product.value?.price,
          availability: product.value?.inStock
            ? 'https://schema.org/InStock'
            : 'https://schema.org/OutOfStock'
        },
        aggregateRating: {
          '@type': 'AggregateRating',
          ratingValue: product.value?.rating,
          reviewCount: product.value?.reviewCount
        }
      }))
    }
  ]
})
</script>

الناتج:

TEXT

// تم التنفيذ بنجاح

(2) ▶ مثال: JSON-LD لمسار التنقل

TYPESCRIPT

// composables/useBreadcrumbLd.ts
export function useBreadcrumbLd(items: { name: string; url: string }[]) {
  useHead({
    script: [{
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'BreadcrumbList',
        itemListElement: items.map((item, index) => ({
          '@type': 'ListItem',
          position: index + 1,
          name: item.name,
          item: item.url
        }))
      })
    }]
  })
}

// الاستخدام في الصفحة
useBreadcrumbLd([
  { name: 'Home', url: 'https://megashop.com' },
  { name: 'Products', url: 'https://megashop.com/products' },
  { name: 'Premium Headphones', url: 'https://megashop.com/products/123' }
])

الناتج:

TEXT

// تم التنفيذ بنجاح

6. Sitemap و robots.txt

(1) ▶ مثال: تثبيت @nuxtjs/sitemap

BASH

npm install @nuxtjs/sitemap

الناتج:

TEXT

# تم تنفيذ الأمر بنجاح

TYPESCRIPT

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],

  sitemap: {
    hostname: 'https://megashop.com',
    gzip: true,
    routes: async () => {
      // مسارات ديناميكية لمليون منتج
      const products = await $fetch('/api/products/all-ids')
      return products.map((id: number) => ({
        loc: `/products/${id}`,
        lastmod: new Date().toISOString(),
        changefreq: 'daily',
        priority: 0.8
      }))
    },
    defaults: {
      changefreq: 'weekly',
      priority: 0.5
    }
  }
})

(2) ▶ مثال: robots.txt

TEXT

// public/robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /profile/

Sitemap: https://megashop.com/sitemap.xml

الناتج:

TEXT

تم التنفيذ بنجاح

(1) مقارنة استراتيجيات Sitemap

الاستراتيجية	المزايا	العيوب	قابلية التطبيق
ملف sitemap.xml واحد	بسيط	≤ 50000 URL	موقع صغير
فهرس Sitemap	يدعم ملايين URL	يتطلب التقسيم	MegaShop
إنشاء مسارات ديناميكياً	استبدال تلقائي للصفحات الجديدة	استعلامات وقت البناء	صفحات المنتجات
إنشاء تلقائي عبر الوحدة	بدون تكوين	محدود	مواقع صغيرة إلى متوسطة

7. مثال شامل: دليل SEO الكامل لصفحات منتجات MegaShop

VUE

<!-- pages/products/[id].vue -->
<template>
  <div v-if="product" class="product-page">
    <h1>{{ product.name }}</h1>
    <p class="price">${{ product.price }} USD</p>
    <p>{{ product.reviewCount }} reviews · {{ product.rating }} stars</p>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()
const { data: product } = await useFetch(`/api/products/${route.params.id}`)
const productUrl = `${config.public.siteUrl}/products/${route.params.id}`

// SEO Meta
useSeoMeta({
  title: () => `${product.value?.name} - MegaShop`,
  ogTitle: () => product.value?.name,
  description: () => `Buy ${product.value?.name} for $${product.value?.price} USD. Free shipping. ${product.value?.reviewCount} reviews.`,
  ogDescription: () => `${product.value?.name} - $${product.value?.price} USD on MegaShop`,
  ogImage: () => product.value?.image,
  ogUrl: () => productUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image'
})

// Canonical URL
useHead({
  link: [{ rel: 'canonical', href: productUrl }]
})

// JSON-LD
useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: computed(() => JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: product.value?.name,
      image: product.value?.image,
      offers: {
        '@type': 'Offer',
        priceCurrency: 'USD',
        price: product.value?.price,
        availability: product.value?.inStock ? 'InStock' : 'OutOfStock'
      },
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: product.value?.rating,
        reviewCount: product.value?.reviewCount
      }
    }))
  }]
})
</script>

❓ أسئلة شائعة

س هل يمكن استخدام useSeoMeta و useHead معاً؟

ج نعم، يعملان على نفس نسخة Head. useSeoMeta يدير علامات SEO، بينما useHead يدير العلامات الأخرى (canonical/JSON-LD/style).

س كيف أتعامل مع sitemap لصفحة منتج بعدد مليون عنصر؟

ج استخدم Sitemap Index لتقسيمه إلى عدة خرائط فرعية (كل منها ≤ 50000 URL). وحدة @nuxtjs/sitemap تدعم التقسيم التلقائي.

س هل يشكل innerHTML لـ JSON-LD خطر XSS؟

ج يطبق Nuxt 3 تدابير أمنية على innerHTML لعلامات script. لكن من الأفضل استخدام JSON.stringify وتحويل البيانات الديناميكية لمنع الحقن.

س هل تعمل بيانات SEO الوصفية في وضع CSR؟

ج زاحفات محركات البحث لا تدعم علامات meta المُصيَّرة عبر CSR. الصفحات التي تحتاج SEO يجب أن تستخدم SSR أو ISR أو SSG. علامات meta على صفحات CSR تظهر فقط بعد إرواء العميل.

س كيف أستخدم titleTemplate؟

ج عيِّن titleTemplate: '%s | MegaShop' في nuxt.config.ts. في useHead للصفحة، عيِّن محتوى العنوان فقط، وسيُنشئ القالب تلقائياً.

س هل هناك متطلبات حجم لصور ogImage؟

ج توصي Facebook بـ 1200x630 بكسل، وتوصي Twitter بـ 1200x600 بكسل (summary_large_image). الصور الصغيرة جداً قد لا تظهر.

📖 ملخص

useHead مدير عام لعلامات Head، بينما useSeoMeta يركز على بيانات SEO الوصفية ويوفر أمان نوع أكبر
SEO ديناميكي: عناوين وأوصاف computed تفاعلية؛ بيانات وصفية فريدة لكل صفحة منتج
بيانات JSON-LD المنظمة تتيح لـ Google عرض مقتطفات غنية (السعر، التقييم، التوفر)
@nuxtjs/sitemap ينشئ خريطة الموقع تلقائياً ويدعم فهرس خريطة موقع يحتوي على ملايين URL
robots.txt يتحكم في نطاق وصول الزاحف ويحظر مسارات admin/api/profile

📝 تمارين

تمرين أساسي (الصعوبة: ⭐): استخدم useHead لتعيين العنوان ووصف meta للصفحة الرئيسية، ثم اعرض المصدر للتحقق.
تمرين متقدم (الصعوبة: ⭐⭐): استخدم useSeoMeta لتكوين بيانات OG و Twitter Card الوصفية الكاملة لصفحة تفاصيل المنتج، وتحقق منها باستخدام Facebook Sharing Debugger.
تحدٍ (الصعوبة: ⭐⭐⭐): نفِّذ الإنشاء التلقائي لـ JSON-LD لصفحات المنتجات و JSON-LD لمسار التنقل وخرائط المواقع، وتحقق من البيانات المنظمة باستخدام Google Rich Results Test.

---|

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن

404 Not Found

تحسين SEO: useHead + useSeoMeta

1. ما ستتعلمه

2. قصة حقيقية لمهندس معمارية

(1) نقطة الألم: من مليون صفحة، فهرست Google 2000 فقط

(2) حل سلسلة أدوات SEO في Nuxt

(3) النتائج: ارتفع معدل فهرسة Google 40 ضعفاً

3. بنية سلسلة أدوات SEO

(1) نظرة عامة على سلسلة أدوات SEO في Nuxt 3

4. الإدارة الديناميكية لـ useHead

(1) ماذا يمكن أن يدير useHead؟

(1) ▶ مثال: الاستخدام الأساسي لـ useHead

(2) ▶ مثال: عنوان ديناميكي (computed، تفاعلي)

(3) ▶ مثال: تكوين افتراضي عام

4. useSeoMeta لـ SEO المنظم

(1) مقارنة بين useSeoMeta و useHead

(1) ▶ مثال: SEO لصفحة تفاصيل المنتج

(2) ▶ مثال: SEO للصفحة الرئيسية

5. البيانات المنظمة JSON-LD

(1) تأثير البيانات المنظمة على نتائج البحث

(1) ▶ مثال: JSON-LD للمنتج

(2) ▶ مثال: JSON-LD لمسار التنقل

6. Sitemap و robots.txt

(1) ▶ مثال: تثبيت @nuxtjs/sitemap

(2) ▶ مثال: robots.txt

(1) مقارنة استراتيجيات Sitemap

7. مثال شامل: دليل SEO الكامل لصفحات منتجات MegaShop

❓ أسئلة شائعة

📖 ملخص

📝 تمارين