كيفية إنشاء خريطة موقع HTML في Blogger (دليل شامل بالخطوات)

تُعتبر خريطة الموقع (Sitemap) من العناصر المهمة في أي موقع إلكتروني. فبينما تُستخدم خرائط XML لمساعدة محركات البحث على فهرسة محتوى موقعك، فإن خريطة الموقع HTML مخصصة للزوار، حيث تُعرض فيها جميع المقالات والصفحات في مكان واحد بشكل منظم، مما يُسهل عملية التصفح ويُحسّن تجربة المستخدم.

في هذا الدليل ستتعلم كيفية إنشاء نوعين من خرائط المواقع HTML داخل Blogger:

✅ خريطة موقع بسيطة: تعرض جميع المقالات في قائمة واحدة.
✅ خريطة موقع حسب التصنيفات: تُجمع المقالات وفق الفئات/التسميات.

لماذا تحتاج خريطة موقع HTML في Blogger؟

وجود خريطة موقع HTML ليس مجرد إضافة شكلية، بل له فوائد مهمة، مثل:

تحسين تجربة المستخدم عبر توفير وصول سريع إلى جميع المقالات.
مساعدة القراء على اكتشاف المحتوى القديم بسهولة.
زيادة معدل الصفحات المشاهدة وتقليل معدل الارتداد.
تحسين تنظيم وبنية الموقع ليبدو أكثر احترافية.
تعزيز السيو الداخلي (On-Page SEO) من خلال ربط الصفحات داخليًا.

الخطوة 1: إنشاء صفحة جديدة لخريطة الموقع

سجّل الدخول إلى لوحة تحكم Blogger.
انتقل إلى الصفحات → صفحة جديدة.
سمِّ الصفحة باسم "خريطة الموقع" أو "HTML Sitemap".
حوّل المحرر إلى وضع HTML.

الخطوة 2: إضافة كود خريطة الموقع البسيطة

لإظهار جميع منشوراتك في قائمة واحدة، انسخ الكود التالي والصقه داخل الصفحة:


<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=pikisitemap" type="text/javascript"></script>

👉 بعد الحفظ، ستظهر قائمة بجميع مقالات المدونة مع العنوان وتاريخ النشر.

الخطوة 3: إضافة خريطة موقع HTML حسب التصنيفات

إذا كنت تفضل تنظيم المقالات تحت التصنيفات (Labels) مثل "تقنية" أو "دروس"، استخدم الكود التالي، مع استبدال عبارة My Label باسم التصنيف المطلوب:


<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-label.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/>
<div class="stiemap-posts">  
  <h4>اسم التصنيف هنا</h4>  
</div>
<div class="stiemap-wrap">
  <script src="/feeds/posts/default/-/My Label?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</div>