ব্লগারে ওয়েবসাইট এর আর্টিকেলে অটোমেটিক Table of content কোড যুক্ত করুন।

আজকের পোস্টের টাইটেল দেখে নিশ্চয়ই বুঝে গেছেন কোন বিষয় নিয়ে কথা বলবো।  একটি ওয়েবসাইটের এ আর্টিকেল যেমন গুরুত্বপূর্ণ তার মধ্যে আর্টিকেলটি সহজ ভাবে উপস্থাপন করার জন্য টেবিল অফ কন্টেন্টের গুরুত্ব আরো বেশি। শুরুতেই টেবিল নিয়ে একটু জানা যাক। 

Table of Content কি? 

Table of Content (TOC)  হল একটি এমন তালিকা যা আপনার ব্লগ পোস্টের বিভিন্ন শিরোনাম এবং উপশিরোনামগুলো এক জায়গায় দেখায়। এটি মূলত আপনার লেখার বিভিন্ন অংশের লিঙ্কগুলোর একটি তালিকা, যা পাঠককে সরাসরি নির্দিষ্ট অংশে নিয়ে যেতে সাহায্য করে। TOC যোগ করলে পাঠকের জন্য আপনার আর্টিকেল পড়া সহজ হয় এবং গুরুত্বপূর্ণ তথ্য খুঁজে পাওয়াও সুবিধাজনক হয়।

TOC-এর কয়েকটি উপকারিতা।

১. দ্রুত নির্দিষ্ট অংশে যাওয়া সহজ

যদি একটি পোস্ট দীর্ঘ হয়, যেমন “ডিজিটাল মার্কেটিংয়ের উপর সম্পূর্ণ গাইড” - পাঠক সেই পোস্টে TOC থাকলে সরাসরি তাদের প্রয়োজনীয় অংশে যেতে পারবেন। ধরুন, একজন পাঠক কেবল SEO সম্পর্কিত অংশটি জানতে চান। TOC ব্যবহার করে তিনি সরাসরি সেই অংশে যেতে পারবেন, পুরো পোস্ট পড়তে হবে না।

২. সময় সাশ্রয় হয়

TOC পাঠকদের জন্য সময় সাশ্রয় করে, কারণ তারা সহজেই তাদের পছন্দমতো অংশে পৌঁছাতে পারেন। ধরুন, আপনি “কিভাবে ফেসবুকে অ্যাড দিবেন” বিষয়ে একটি পোস্ট লিখেছেন, যেখানে অ্যাড সেটআপ, লক্ষ্য নির্ধারণ, এবং ফলাফল বিশ্লেষণ - এভাবে বিভিন্ন অংশ রয়েছে। TOC-এর মাধ্যমে পাঠক দ্রুত তাদের দরকারি অংশে যেতে পারেন, যা তাদের মূল্যবান সময় বাঁচায়।

৩. পোস্টের সংক্ষিপ্ত ধারণা পাওয়া যায়

TOC দেখে পাঠকরা পোস্টে কী কী তথ্য আছে তা এক নজরে বুঝতে পারেন। উদাহরণস্বরূপ, “ফ্রিল্যান্সিং শুরু করার উপায়” পোস্টে TOC-এ থাকবে, যেমন - কীভাবে শুরু করবেন, প্ল্যাটফর্ম নির্বাচন করবেন, এবং আয় বাড়াবেন। এটি দেখে পাঠক বুঝতে পারবেন পোস্টে কী কী গুরুত্বপূর্ণ বিষয় আলোচনা করা হয়েছে।

৪. SEO উন্নত হয়

Google-এর মতো সার্চ ইঞ্জিন TOC পছন্দ করে, কারণ এটি ওয়েবসাইটের গঠন ভালোভাবে উপস্থাপন করে এবং বিভিন্ন অংশকে লিংক আকারে দেখায়। এতে করে সার্চ ইঞ্জিন সহজে বুঝতে পারে আপনার কন্টেন্ট কী নিয়ে এবং ফলস্বরূপ আপনার ওয়েবসাইটের র‌্যাঙ্কিং বাড়তে পারে।

৫. পড়ার অভিজ্ঞতা উন্নত হয়

TOC পোস্টকে সুগঠিত এবং পরিপাটি দেখায়, যা পাঠকদের জন্য আরামদায়ক। উদাহরণস্বরূপ, “বাড়িতে স্বাস্থ্যকর জীবনযাপন” নিয়ে একটি পোস্টে TOC-এর মাধ্যমে খাদ্যাভ্যাস, ব্যায়াম, এবং ঘুম - এইভাবে প্রতিটি অংশ আলাদাভাবে উপস্থাপন করা যায়, যা পড়ার অভিজ্ঞতাকে উন্নত করে।

TOC যোগ করলে আপনার ব্লগে পাঠকদের জন্য নেভিগেশন এবং তথ্য খোঁজার অভিজ্ঞতা ভালো হয়, যা তাদের বারবার আপনার ব্লগে ফিরিয়ে আনতে সাহায্য করে।

ব্লগার ব্যবহারকারীদের জন্য একটি সুগঠিত এবং সহজ নেভিগেশন সিস্টেম তৈরি করা প্রয়োজনীয়। একটি স্বয়ংক্রিয় Table of Content (TOC) পাঠকদের জন্য পোস্টটি পড়া সহজ করে এবং এটি SEO-তে উল্লেখযোগ্যভাবে সাহায্য করে। এই গাইডে আমরা শিখব কীভাবে ব্লগারে স্বয়ংক্রিয় TOC যুক্ত করা যায়, যা কোডিংয়ে অল্প জ্ঞান সম্পন্ন ব্যবহারকারীদের জন্যও সহজে প্রয়োগযোগ্য।

ব্লগারে অটো TOC যুক্ত করার ধাপগুলো।

প্রথমেই বলে রাখি টেবিল অফ কন্টেন্ট যোগ করা যায় দুইভাবে।

এক শর্ট কোড এর মাধ্যমে যা প্রতিটি পোস্টে শর্ট কোড ব্যবহার করতে হয়। 

কোড ব্যবহার না করলে টেবিল সো করবেনা। 

দুই অটো টেবিল যেটি জাভা স্ক্রিপ্টের মাধ্যমে করা হয় এর জন্য শর্ট কোড ব্যবহার করা লাগেনা,  যখন আপনার কোন আর্টিকেলে ৩ টি হেডিং পাওয়া যাবে তখন অটোমেটিক টেবিল শো করবে। 

TOC যুক্ত করার জন্য নিচের সহজ ধাপগুলো অনুসরণ করুন। এখানে আমরা JavaScript এবং CSS ব্যবহার করব যা আপনাকে প্রয়োজনীয় Table of Content যোগ করতে সহায়তা করবে।

ধাপ ১: JavaScript কোড যুক্ত করা.

প্রথম ধাপ হিসেবে, ব্লগারের HTML কোডে JavaScript কোড যোগ করতে হবে। এই কোডটি স্বয়ংক্রিয়ভাবে ব্লগ পোস্টের শিরোনামগুলো সংগ্রহ করবে এবং TOC হিসেবে প্রদর্শন করবে।

★ কোড যোগ করার ধাপ:

1. ব্লগার ড্যাশবোর্ডে যান।
2. থিম অপশনে ক্লিক করুন।
3. HTML সম্পাদনা (Edit HTML) নির্বাচন করুন।
4. HTML কোডের একদম নিচে </body> ট্যাগ খুঁজে বের করুন এবং এর উপরে নিচের JavaScript কোডটি পেস্ট করুন।

<script>document.addEventListener("DOMContentLoaded",function(){var tocContainer=document.createElement("div");tocContainer.id="table-of-contents";tocContainer.innerHTML="<h2>Table of Content</h2>";var postContent=document.querySelector(".post-body");var headings=postContent.querySelectorAll("h1, h2, h3, h4, h5, h6");if(headings.length>3){var tocList=document.createElement("ul");headings.forEach(function(heading,index){var anchor=document.createElement("a");anchor.name="toc-"+index;heading.before(anchor);var tocItem=document.createElement("li");tocItem.innerHTML=`<a href="#toc-${index}">${heading.innerText}</a>`;tocList.appendChild(tocItem);});tocContainer.appendChild(tocList);postContent.prepend(tocContainer);}});</script> code-box

এটি যুক্ত করার পরে, আপনার ব্লগ পোস্টের বিভিন্ন শিরোনামগুলো স্বয়ংক্রিয়ভাবে TOC-এ প্রদর্শিত হবে এবং প্রতিটি শিরোনামে ক্লিক করলেই ব্যবহারকারী সরাসরি সেই অংশে যেতে পারবেন।

ধাপ ২: CSS কোড যুক্ত করা

TOC-এর আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব স্টাইলিং করতে CSS কোড যোগ করতে হবে। এটি TOC-এর নকশা এবং রঙ নির্ধারণ করবে।

★CSS যুক্ত করার ধাপ:
1. আবার Edit HTML অপশনে যান।
2. ]]></b:skin> ট্যাগ খুঁজে বের করুন।
3. এই ট্যাগের ঠিক উপরে নিচের CSS কোডটি পেস্ট করুন:

#table-of-contents{background-color:#f9f9f9;border:1px solid #ddd;padding:15px;margin-bottom:20px;}#table-of-contents h2{margin-top:0;font-size:18px;font-weight:bold;}#table-of-contents ul{list-style-type:none;padding-left:0;}#table-of-contents li{margin:5px 0;}#table-of-contents a{text-decoration:none;color:#337ab7;}#table-of-contents a:hover{text-decoration:underline;} code-box

এটি সংরক্ষণ করার পর, TOC ব্লগের পোস্টে স্টাইলিশ ও সহজবোধ্যভাবে প্রদর্শিত হবে।

TOC কাস্টমাইজেশন

আপনার ব্লগের থিমের সাথে সামঞ্জস্য রাখতে TOC-এর রঙ, ফন্ট, এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন। এছাড়াও, JavaScript এবং CSS-এর মাধ্যমে শিরোনামের সংখ্যা এবং লিঙ্কের ধরন পরিবর্তন করা যায়। উদাহরণস্বরূপ, TOC কাজ করার জন্য পোস্টে ন্যূনতম ৩টি শিরোনাম থাকা প্রয়োজন; চাইলে JavaScript কোডে এই সংখ্যা পরিবর্তন করে বেশি বা কম করতে পারেন।

কিছু গুরুত্বপূর্ণ পরামর্শ

• শিরোনামের সংখ্যা: TOC কাজ করতে কমপক্ষে ৩টি শিরোনাম থাকা প্রয়োজন। 
• যদি পোস্টে শিরোনামের সংখ্যা কম হয়, তবে TOC প্রদর্শিত হবে না।
• শিরোনামের ধরন: TOC কোডটি <h1> থেকে <h4> পর্যন্ত কাজ করবে। 

আরো সহজে বুঝার জন্য নিচের ভিডিওটি দেখুন। 

ব্লগার ওয়েবসাইটের সহায়তার জন্য আমাদের টেলিগ্রাম চ্যানেলে যোগাযোগ করুন। আমরা যথাসম্ভব আপনাকে সাহায্য করার চেষ্টা করবেন  ইনশাআল্লাহ!