كيفية إضافة جدول المحتويات داخل مقالات بلوجر

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

هذه الميزة يمكن وضعها بسهولة على مدونات ووردبريس بمجرد تثبيت إضافة LuckyWP Table of Contents أو غيرها من الإضافات، ويمكن لمن يمتلك مدونة بلوجر إضافته بسهولة باتباع إرشادات هذه المقالة.

محتوى المقالة

ما هو جدول المحتويات "Table of Content"؟

جدول المحتويات والذي يرمز له غالبا بـ(ToC) هو جدول يلخص العناوين الأساسية والفرعية في المنشور أو المقالة، وتساعد القارئ على التنقل مباشرة إلى القسم الذي يرغب في قراءته.

ما فائدة جدول المحتويات؟

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

أيا كان الحال، يعمل جدول المحتويات "Table of Content" على توفير وقت الزائرين من خلال توفير خريطة للصفحة.

وبدلا من المرور عبر كل أقسام المقالة وبالخصوص المقالات الطويلة، يمكن لزائر موقعك الانتقال مباشرة إلى القسم الذي يهمه أكثر.

على الرغم من أنه من المفيد أن يقرأ القارء المقالة كاملة ويمضي وقتا أكثر في موقعك، فقد يغادر بعض الزوار مدونتك ممن ليسوا صبورين للغاية ولا يملكون الوقت الكافي لقراءة المقال، وبمجرد أن يعتقدوا أنك تحيد عن الموضوع أوأن يضجروا من مقدمة الموضوغ المطروح، فقد يقومون بمغادرة موقعك على الفور.

ملاحظة:

بعض الزوار لا يمانعون في تضييع وقت آخر في البحث والعثور على نفس المعلومات على موقع آخر بدلا من قراءة مقالتك الطويلة.

في دراسة أجراها شخص يدعى جاكوب نيلسن لموقع useit.com، فقد تبين أنه على الرغم من أن الزوار يقضون وقتا أطول في الصفحات التي تحتوي على المقالات الطويلة، إلا أنهم يقضون أقل من 5 ثوان فقط لكل 100 كلمة إضافية. وأيضا، في المتوسط، يقرأ زوار المواقع نصف محتوى الصفحة التي تحتوي على 111 كلمة أو أقل،

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

هل يمكن لجدول المحتويات تحسين SEO للمدونة؟

نعم، هذا مؤكد، وإليك سببا واحدا على الأقل:

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

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

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

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

في حين أن هذا يزيد من نسبة النقر إلى الظهور "CTR" لمدونتك، وهذا سيساعدك في تحقيق تصنيفات أعلى لدى محركات البحث.

هل ترى الحاجة إلى جدول المحتويات على مدونتك؟

إذا كانت إجابتك نعم، ولتنسيق مقالات مدونتك باستخدام جدول المحتويات، اتبع الخطوات أدناه.

طريقة إضافة جدول المحتويات لمدونة بلوجر

  1. على لوحة تحكم بلوجر، اختر المظهر
  2. بجانب كلمة تخصيص انقرعلى السهم بعدها اختر "أخد نسخة احتياطية"، وقم بتنزيلها على جهازك احتياطا.
  3. بعد ذلك وبنفس الطريقة انقرعلى السهم واختر "تعديل HTML"
  4. باستخدام أداة البحث CTRL + F، ابحث عن العلامة </head>
  5. قم بنسخ السكريبت أدناه والصقه فوق </head>
...

<script type='text/javascript'>
//<![CDATA[ 
//*************TOC Plugin V2.0 by MyBloggerTricks.com 
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="إخفاء"):(a.style.display="none",b.innerHTML="إظهار")}//]]></script>

بعد ذلك ابحث عن هذا الكود ]]></b:skin> وفوقه ألصق كود التنسيق التالي:

...
/*----TOC Plugin V2.0 by MyBloggerTricks----*/.mbtTOC2{border:3px solid #4b4c52;background-color:#ececec;color:#121213;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:transparent;font-family:oswald, arial;font-size:22px;position:relative;outline:none;border:none;color:#121213;padding:0 0 0 15px}.mbtTOC2 button a{color:#2284e6; padding:0px 2px;cursor:pointer}.mbtTOC2 button a:hover{text-decoration:underline}.mbtTOC2 button span {font-size:15px; margin:0px 10px}.mbtTOC2 li{margin:10px 0}.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}.mbtTOC2 li li a{ color:#289728; font-size:15px;}.mbtTOC2 ol{counter-reset:section1;list-style:none}.mbtTOC2 ol ol{counter-reset:section2}.mbtTOC2 ol ol ol{counter-reset:section3}.mbtTOC2 ol ol ol ol{counter-reset:section4}.mbtTOC2 ol ol ol ol ol{counter-reset:section5}.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}.mbtTOC2 li li li:before{content:counter(section1) "." counter(section2) "." counter(section3);counter-increment:section3}.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2)  "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}/*.point2 {list-style-type:lower-alpha}.point3 {list-style-type:lower-roman}.point4 {list-style-type:disc}*/

ستحتاج الى البحث عن <data:post.body/> واستبداله بـ:

...
<div id="post-toc"><data:post.body/></div>

وبالتأكيد يلزمك تغييره في كل مرة تجده فيها حسب القالب الذي تستخدمه، وبعد انتهائك من هذه العملية قم بحفظ المظهر.

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

...
<div class="mbtTOC2"><button>محتوى المقالة<span>[<a id="Tog" onclick="mbtToggle2()">إخفاء</a>]</span></button><div id="mbtTOC2"></div></div>

بعد اختيارك لمكان الجدول ولصق الكود، يلزمك إضافة هذا السكريبت في آخر المقال وفي نفس الصفحة.

...

<script>mbtTOC2();</script>

أنا محمد، مالك مدونة صور نت للمعلوميات والرقمنة، أمتلك خبرة واسعة في تحسين محركات البحث (السيو)، ومهتم بشكل خاص بمجالات التسويق الرقمي والتكنولوجيا المالية الرقمية.