# إزاي أعمل جدول محتويات (TOC) يساعد السيو؟

> جدول المحتويات مش عامل ترتيب مباشر، بس بيسهّل على القارئ يوصل للجزء اللي عايزه في المقالات الطويلة، وروابطه (#) بتوضح لجوجل أجزاء الصفحة، وأحيانًا جوجل بيعرض روابط لأجزاء منها في النتيجة. اعمله من عناوين H2 و H3 حقيقية، بروابط HTML عادية، وحطه بعد المقدمة.

- المصدر: https://seoquestionsbank.com/onpage/table-of-contents/
- القسم: السيو الداخلي · المستوى: مبتدئ
- الكاتب: مهندس محمد عيد · آخر تحديث: 2026-10-20

## الأعراض

- المقال طويل والزائر مش لاقي الجزء اللي بيدوّر عليه
- روابط الجدول مش شغالة أو بتنزل في مكان غلط
- الجدول طويل جدًا لأنه بيسحب كل H4 و H5
- الجدول بيتعمل بجافاسكربت ومش موجود في الـ HTML

## السبب

هيكل العناوين في المقال مش منظم، أو الإضافة متظبطة غلط فبتطلع جدول مزعج أو روابط مش شغالة.

## الأدوات

- [Easy Table of Contents](https://wordpress.org/plugins/easy-table-of-contents/) (مجانية): إضافة ووردبريس بتعمل الجدول تلقائي من العناوين وتتحكم في مستوياته ومكانه
- [Rank Math](https://rankmath.com/) (مجانية): فيها بلوك Table of Contents جوه محرر ووردبريس، وبتتعرّف على إضافات الـ TOC
- [HeadingsMap](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) (مجانية): يعرضلك شجرة العناوين في الصفحة عشان تتأكد إن الجدول هيطلع منظم

## خطوات الحل

1. **ظبّط العناوين الأول**: الجدول بيتبني من العناوين، فلو هي مش منظمة الجدول هيطلع مش منظم. H1 واحد، وأقسام رئيسية H2، وتحتها H3. افتح HeadingsMap على المقال وشوف الشجرة.
   - HeadingsMap: Headings
   - H1: دليل تركيب الطاقة الشمسية: واحد بس
   - H2: التكلفة · H2: الخطوات · H2: الأسئلة: أقسام واضحة
   - H4 بعد H2 على طول: مستوى ناقص
2. **ظبّط الإضافة**: في Easy Table of Contents: فعّلها لنوع المقالات (Posts)، اختار إن الجدول يظهر بعد أول فقرة أو قبل أول عنوان، خليه يظهر لما يكون فيه 4 عناوين أو أكتر، وحدد H2 و H3 بس.
   - Easy Table of Contents: Settings ← General
   - Enable Support: Posts: مفعّل
   - Position: Before first heading: بعد المقدمة
   - Show when 4 or more headings: مفعّل
   - Headings: H1–H6: خليها H2 و H3 بس
3. **لو هتكتبه يدوي**: استخدم روابط <a href> عادية بتشاور على id موجود في العنوان. خلي الـ id قصير وثابت، ولو غيّرته بعد كده الروابط اللي الناس شاركتها هتبطّل تنزل في المكان الصح.

```html
<nav aria-label="محتويات المقال">
  <ul>
    <li><a href="#cost">تكلفة التركيب</a></li>
    <li><a href="#steps">خطوات التركيب</a></li>
    <li><a href="#faq">أسئلة شائعة</a></li>
  </ul>
</nav>

<h2 id="cost">تكلفة التركيب</h2>
...
<h2 id="steps">خطوات التركيب</h2>
```
4. **ما تتوقعش صفحات جديدة من الروابط**: الرابط اللي فيه # (زي /post/#cost) جوجل بيعتبره نفس الصفحة، مش صفحة منفصلة بتتفهرس لوحدها. فايدة الجدول في التنقل وفهم أجزاء الصفحة، وأحيانًا جوجل بيعرض روابط لأجزاء منها في النتيجة أو يودّي الزائر للجزء اللي بيجاوب سؤاله.
5. **اختبر على الموبايل**: اتأكد إن الجدول مش واخد الشاشة كلها على الموبايل (خليه مقفول أو قصير)، وإن كل رابط بينزل للعنوان الصح ومش مستخبي تحت هيدر ثابت. ده كمان ينفع يتظبط بـ scroll-margin-top في CSS.

```css
h2[id], h3[id] {
  scroll-margin-top: 80px; /* ارتفاع الهيدر الثابت */
}
```

## لو موقعك WordPress

- [Easy Table of Contents](https://wordpress.org/plugins/easy-table-of-contents/) (مجانية): جدول محتويات تلقائي من العناوين
- [Rank Math SEO](https://wordpress.org/plugins/seo-by-rank-math/) (مجانية): بلوك جدول محتويات خفيف من غير إضافة زيادة

1. **اختار حل واحد**: لو عندك Rank Math استخدم بلوك «Table of Contents by Rank Math» جوه المقال. لو عايز تلقائي في كل المقالات استخدم Easy Table of Contents.
2. **ظبط مكانه وشكله** (الإعدادات ← Table of Contents ← الإعدادات العامة): في Easy Table of Contents اختار يظهر قبل أول عنوان، وفي المقالات بس، ولو المقال فيه 3 عناوين أو أكتر.
3. **خلّي الروابط مقروءة**: الإضافة بتعمل روابط # للعناوين. اتأكد إن العناوين نفسها واضحة لأنها هي اللي بتظهر في الجدول.

## المصادر

- [Google: إنشاء روابط قابلة للزحف](https://developers.google.com/search/docs/crawling-indexing/links-crawlable?hl=ar)
- [Google: دليل تحسين محركات البحث (SEO) للمبتدئين](https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ar)
- [Easy Table of Contents على WordPress.org](https://wordpress.org/plugins/easy-table-of-contents/)