---
name: abyan-seo-system
description: نظام توجيه محركات البحث وتحسين الظهور (SEO & Metadata System) الخاص ببوابة أبين الثقافية.
---

# نظام وتوجيهات تحسين محركات البحث لمنصة بوابة أبين (Abyan SEO System)

تعتبر بوابة أبين الثقافية منصة معرفية موجهة للقراء والباحثين، ولهذا فإن تحسين محركات البحث (SEO) لا يقل أهمية عن التصميم البصري. هذه المهارة تفرض القواعد الصارمة لبناء مكونات متوافقة مع `Next.js App Router`.

## 🚀 قواعد بناء صفحات الويب

### 1. توليد الميتاداتا الديناميكية (Dynamic Metadata)
يُمنع منعاً باتاً إنشاء صفحة خادم (`Server Component` داخل مجلد `app`) دون تضمين الدالة المخصصة لتوليد البيانات الوصفية (Metadata).
- يجب تصدير دالة `generateMetadata` من الصفحة الرئيسية (Layer 1).
- **العنوان (Title):** يجب أن يتضمن اسم القسم متبوعاً باسم البوابة (مثال: `السياحة والمعالم | بوابة أبين الثقافية`).
- **الوصف (Description):** يجب كتابة وصف تعبيري قصير لا يتجاوز 160 حرفاً يُلخص محتوى الصفحة لجوجل.

### 2. بطاقات المشاركة والتواصل (OpenGraph & Twitter Cards)
يجب أن تبدو المنصة أنيقة عند مشاركة روابطها على وسائل التواصل الاجتماعي (واتساب، فيسبوك، تويتر).
- يجب تمرير كائن `openGraph` داخل الميتاداتا، ويشترط أن يحتوي على `title`, `description`, `url`, `type`, وصورة أساسية `images`.
- يجب تمرير كائن `twitter` بمعمارية `card: 'summary_large_image'`.

مثال إلزامي:
```typescript
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'المعالم الأثرية | بوابة أبين',
  description: 'استكشف المعالم والمواقع الأثرية التراثية في محافظة أبين.',
  openGraph: {
    title: 'المعالم الأثرية | بوابة أبين',
    description: 'استكشف المعالم والمواقع الأثرية التراثية في محافظة أبين.',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'المعالم الأثرية | بوابة أبين',
  },
};
```

### 3. التراتبية الهرمية الصارمة للعناوين (Title Hierarchy Rule)
- **القاعدة الذهبية:** يجب ألا تحتوي الصفحة الواحدة على أكثر من وسم `<h1>` واحد فقط، وهو يمثل العنوان الرئيسي للصفحة.
- باقي العناوين المندرجة يجب أن تتدرج بشكل منطقي (`<h2>` للأقسام الرئيسية، `<h3>` للعناوين الفرعية).
- التغاضي عن هذه القاعدة يؤدي إلى تدمير بنية الـ SEO ويعاقب محرك البحث صفحتنا.

### 4. الروابط الدلالية والنظيفة (Semantic HTML)
- عند بناء أي كرت (Card) أو مكون يحتوي على رابط، يجب استخدام مكون `<Link>` الخاص بـ `next/link`.
- يجب استخدام الوسوم الدلالية (`<article>`, `<section>`, `<main>`, `<aside>`) بدلاً من تكديس الـ `<div>` بدون سبب.

## التزام المطور / الذكاء الاصطناعي
يُمنع تسليم صفحة جديدة (Page Layer) للمستخدم دون التحقق من وجود تصدير لـ `metadata` أو دالة `generateMetadata` معتمدة.