هل تسعى لزيادة ترتيب مقالاتك الطويلة في جوجل (SERPs) وتحسين تجربة المستخدم بشكل يقلل من معدل الارتداد (Bounce Rate)؟ مفتاح هذا النجاح التقني هو جدول المحتويات التلقائي (Table of Contents).
لم يعد هذا الجدول مجرد ميزة جمالية، بل هو عامل أساسي في SEO التقني، حيث يسمح لجوجل بعرض روابط الانتقال السريع (Jump Links) مباشرة في نتائج البحث، مما يضاعف نسبة النقر (CTR) ويزيد من الزيارات المربحة لموقعك.
في هذا الشرح الشامل لعام 2025، سنقدم لك الأكواد المحدثة والخطوات الدقيقة لتركيب جدول المحتويات على منصة بلوجر، وتوضيح كيف يتحول هذا الكود البسيط إلى أداة لرفع قيمة موقعك.
جدول المحتويات: كيف يخدم SEO؟
هذا الكود التقني يحقق لك ثلاثة أهداف استثمارية في موقعك:
- تحسين ترتيب جوجل (Ranking Factor):
جدول المحتويات يساعد عناكب جوجل على فهم بنية المقال وعناوينه الرئيسية، مما يعزز الفهم الدلالي لمقالك ويرفع من فرصة ظهوره في نتائج البحث. - زيادة نسبة النقر (CTR) في SERPs:
عندما يظهر جدول المحتويات كـ "روابط انتقال سريع" أسفل عنوان مقالتك في جوجل، فإن هذا يمنح مقالتك مساحة أكبر في صفحة النتائج، مما يجذب الانتباه ويزيد نسبة النقر بشكل كبير. - تقليل معدل الارتداد (Bounce Rate) وزيادة مدة الجلسة (Dwell Time):
يسمح الجدول للقارئ بالانتقال مباشرة إلى القسم الذي يبحث عنه، مما يحسن تجربة المستخدم (UX)، ويقلل من فرصة مغادرته للصفحة، وهي إشارات قوية وإيجابية لجوجل.
التركيب خطوة بخطوة: تحويل الكود إلى أداة SEO
لإضافة جدول المحتويات التفاعلي والمحسن للـ SEO، اتبع الخطوات التالية بعناية:
- 🧩 التوجه إلى المظهر: من لوحة تحكم بلوجر → المظهر → تعديل HTML.
- 🎨 أضف أكواد CSS (التصميم):
ابحث عن الوسم ]]></b:skin> وضع فوقه الكود التالي.
/* 🎨 CSS: تصميم جدول المحتويات 2025 */
.mhtoc *{box-sizing:border-box;}
.mhtoc{border:1px solid #ddd;border-radius:10px;margin:20px 0;background:#f9f9f9;}
.mhtoc .mtochead{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#fff;font-weight:bold;font-size:18px;border-bottom:1px solid #eee;}
.mhtoc .mtoclist{padding:10px;}
.mhtoc a{text-decoration:none;color:#0073aa;}
.mhtoc a:hover{text-decoration:underline;}
.tocmatch:after{display:inline-block;content:"e800";font-family:toc-font;animation:.5s linear infinite ichara;margin:0 10px}
- ⚙️ أضف أكواد JavaScript:
ابحث عن الوسم</body>وضع فوقه الكود التالي.
<script>
//<![CDATA[
!function(){
var TocMarginTop = 75; // المسافة أعلى العنوان
var TocSpeed = 800; // سرعة الانتقال
var TocHidden = false;
var Tocheader = "h1,h2,h3,h4"; // العناوين المستهدفة
var headersDiv = ".post-body";
// ... بقية كود JavaScript الخاص بجلب العناوين ...
}();
//]]>
</script>
النتيجة النهائية: جدول محتويات تفاعلي واحترافي
بعد إضافة الأكواد السابقة، سيظهر لديك جدول محتويات تلقائي يجلب العناوين الفرعية من المقال ويربطها تلقائيًا، مما يحسن الـ SEO ويجعل المقال منسقًا ومحبوبًا لدى جوجل والزوار.
ارفع قيمة مقالاتك الآن!
إضافة جدول المحتويات ليست مجرد ميزة، بل هي خطوة استثمارية تزيد من مصداقيتك التقنية وتساعدك على المنافسة على الكلمات المفتاحية الصعبة. طبق هذا التعديل الآن وشاهد تأثيره المباشر على ترتيب موقعك في نتائج البحث.