গুগল ব্লগার: ব্লগস্পটে কীভাবে পোস্টের বিষয়বস্তুর সারণী বা টেবিল কনটেন্ট যোগ করবেন?

আপনি যদি একজন ব্লগস্পট ব্লগার হয়ে থাকেন তাহলে আজকের বিষয়টি প্রয়াজনীয়তা কার্যকর হতে পারে। কেননা বর্তমানে খুবই গুরুত্বপূর্ণ বিষয় হচ্ছে সাইট সার্চ ইঞ্জিনে র‌্যাঙ্ক করা। আর এটির উপর প্রভাব ফেলতে পারে আজকের এই বিষয়টি (টেবিল কনটেন্ট)। তাই, গুগল ব্লগার/ব্লগস্পটে কীভাবে পোস্টের "বিষয়বস্তুর সারণী বা টেবিল কনটেন্ট" যোগ করবেন? তা আলোচনা করা হলো।

আপনি কি আপনার ব্লগকে গুগল এবং অন্যান্য সার্চ ইঞ্জিনে র‌্যাঙ্ক করতে চান? অথবা Google এর বৈশিষ্ট্যযুক্ত স্নিপেট অনুসন্ধানে আপনার ওয়েবসাইট দেখাতে চান। উত্তর যদি হ্যাঁ!!! তাহলে এই পোস্ট শুধু আপনার জন্য? এখানে, আমরা আপনাকে দেখাব কিভাবে আপনি এই ফলাফল অর্জন করতে পারেন? এবং কিভাবে আপনি ব্লগার ব্লগস্পটে বিষয়বস্তুর সারণী পোস্টের টেবিল কনটেন্ট যোগ করতে পারেন?

অনেকে হয়তো বলবেন যে, সাইটের বিষয়বস্তু হচ্ছে সাইটের মূল বা সাইট র‌্যাঙ্ক করার রাজা।  হ্যাঁ, আমি সম্মত যে বিষয়বস্তু রাজা! কিন্তু আপনি কি জানেন যে এসইও হচ্ছে সেই রাজার রানী? তাই সাইট র‌্যাঙ্ক করার মূল বিষয় হল বিষয়বস্তু এবং এসইও উভয়ই প্রাথমিক উপায়, যা আপনার ব্লগের র‌্যাঙ্কিংয়ে সাহায্য করতে পারে।

বিষয়বস্তুর টেবিলও কন্টেন্ট রাইটিং এবং এসইও-এর একটি গুরুত্বপূর্ণ অংশ। আপনি যখনই একটি বই কিনবেন, আপনি বইটির বিষয়বস্তুর সারণী বা সূচী পরীক্ষা করবেন। ঠিক আপনার মতই... Google এবং ব্লগ পাঠক সর্বদা প্রতিটি ব্লগে বিষয়বস্তুর সারণী বা সূচী পরীক্ষা করে। তারপর সিদ্ধান্ত নেয় যে, ব্লগটি পড়বে কিনা।

বিষয়বস্তুর টেবিল (Table of Content) কি?

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

সাধারণত অনেক বড় পোস্টগুলোর জন্য টেবিল কনটেন্ট অনেক গুরুত্ব বহন করে। একজন পাঠক সহজেই যে কোন টপিকে যেতে পারে।

কেন বিষয়বস্তুর সারণী গুরুত্বপূর্ণ এবং Google এর বৈশিষ্ট্যযুক্ত স্নিপেট পোস্ট কী?

বিষয়বস্তুর সারণী হল ব্লগে সমস্ত কভার করা বিষয়গুলি দেখানোর একটি দুর্দান্ত উপায়, এটি Google-কে আপনার ব্লগ বুঝতে এবং Google-এর বৈশিষ্ট্যযুক্ত স্নিপেট ফলাফলগুলিতে আপনার ফলাফল দেখাতে সহায়তা করে৷

একজন পাঠক যেমন সহজেই পোস্টের টেবিল দেখে সহজেই পোস্টটি সম্পর্কে ধারণা পেতে পারে ঠিক একই ভাবে গুগল ও অন্যান্য সার্চ ইঞ্জিন সহজেই বুঝতে পারে এবং সেই হিসাবে পেজটিকে র‌্যাঙ্ক করে। 

Google এর বৈশিষ্ট্যযুক্ত স্নিপেট কি?

বৈশিষ্ট্যযুক্ত স্নিপেটগুলি হল সার্চ ইঞ্জিনের বিশেষ বাক্স যেখানে নিয়মিত তালিকার বিন্যাস বিপরীত হয়ে থাকে, প্রথমে বর্ণনামূলক স্নিপেট দেখানো হয়।

বৈশিষ্ট্যযুক্ত স্নিপেটগুলি সাধারণত ওয়েব অনুসন্ধান তালিকা থেকে আসে। Google স্বয়ংক্রিয় সিস্টেমগুলি ওয়েব তালিকাগুলি দেখে এবং তাদের মধ্যে একটি হাইলাইট করা দরকারী কিনা তা নির্ধারণ করে৷ 

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

ব্লগার/ব্লগস্পটে কীভাবে "পোস্ট টেবিল কনটেন্ট" যোগ করবেন?

ওয়ার্ডপ্রেস পোস্টে বিষয়বস্তুর সারণী বা টেবিল কনটেন্ট যোগ করার জন্য অনেকগুলি প্লাগইন উপলব্ধ রয়েছে। এই প্লাগইনগুলির সাহায্যে, আপনি সহজেই ওয়ার্ডপ্রেসের জন্য বিষয়বস্তুর একটি টেবিল তৈরি করতে পারেন তবে ব্লগার প্ল্যাটফর্মে, আপনাকে সামগ্রীর টেবিল তৈরি করতে HTML ব্যবহার করতে হবে।

তবে, বিষয়বস্তুর একটি সারণী বা পোস্ট টেবিল কনটেন্ট তৈরি করতে, আপনার প্রচুর HTML জ্ঞানের প্রয়োজন নেই। আপনি সহজেই আপনার পোস্টে বিষয়বস্তুর একটি সারণী যোগ করতে পারেন এমনকি যদি আপনি এইচটিএমএল এর সামান্য বিট জানেন।

এছাড়াও আপনি যদি HTML সম্পর্কে কোন জ্ঞান না রাখেন, কোন ব্যাপার না কারণ আপনি যদি এই পোস্টটি ভালোভাবে অনুসরণ করেন, তাহলে আপনি সহজেই আপনার পোস্টে Table of Content (TOC) যোগ করতে পারবেন। আমরা ম্যানুয়ালি বিষয়বস্তুর একটি সারণীও যোগ করতে পারি, তবে এটি একটি খুব সময়সাপেক্ষ কাজ। অর্থাৎ ম্যানুয়ালি টেবিল কনটেন্ট যুক্ত করতে গেলে প্রতিটি পোস্টের জন্য অনেক সময় ব্যায় করতে হবে।

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

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

অর্থাৎ পরিবর্তনের পর যদি সাইট ভালোভাবে কাজ না করে তাহলে ব্যাকআপ থিমটি দিয়ে সাইটটি পুনরায় উদ্ধার করতে পারেন।

আপনার ব্লগার এবং ব্লগস্পট পোস্টে স্বয়ংক্রিয়ভাবে বিষয়বস্তুর সারণী বা টেবিল কনটেন্ট যোগ করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:

ধাপ 1. আপনার ব্লগার ব্লগে লগ ইন করুন এবং সেটিং থেকে Theme > Edit HTML এ ক্লিক করুন

ধাপ 2. এখানে, </head> ট্যাগ অনুসন্ধান করুন এবং </head> ট্যাগের উপরে নিচের HTML কোডটি পেস্ট করুন

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'> //<![CDATA[ //*************Table of Content (TOC) plugin by anantvijaysoni.in function avsTOC() {var avsTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}} //]]> </script>

ধাপ 3. এরপর, আবার Edit HTML এ সার্চ  বক্স এ  ]]></b:skin> কোড অনুসন্ধান করুন এবং CSS কোডের নীচে এবং ]]></b:skin> এর আগে নিচের বক্সের কোডগুলো পেস্ট করুন, ঠিক নীচের চিত্রের মতো করে।

উপরের চিত্রের মতো করে ]]></b:skin> এর উপরে নিচে গুডগুলো পেস্ট করুন।

.avsTOC{border:5px solid #EE5535; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .avsTOC ol,.avsTOC ul {margin:0;padding:0;} .avsTOC ul {list-style:none;} .avsTOC ol li,.avsTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .avsTOC a{color:#EE5535;text-decoration:none;} .avsTOC a:hover{text-decoration:underline; } .avsTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px; position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .avsTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

আপনি আপনার সাইটের বিষয়বস্তুর সারণীতে (যুক্ত করা পোস্ট টেবিলে) কিছু কাস্টমাইজেশন করতে পারেন, আপনার ব্লগার রঙের সমন্বয়ের উপর নির্ভর করে। যেমন:

• বিষয়বস্তু বক্সের পটভূমির রঙ পরিবর্তন করতে #FFFFE0 সম্পাদনা করুন
• বিষয়বস্তু বক্সের সীমানা রঙ পরিবর্তন করতে #EE5535 সম্পাদনা করুন
• বিষয়বস্তুর শিরোনাম পাঠ্যের হরফের রঙ পরিবর্তন করতে #707037 সম্পাদনা করুন
• বিষয়বস্তুর সারণীর অ্যাঙ্কর লিঙ্কের রঙ পরিবর্তন করতে #0080ff সম্পাদনা করুন
• অ্যাঙ্কর লিঙ্কের ফন্ট সাইজ পরিবর্তন করতে 15px সম্পাদনা করুন
• বিষয়বস্তুর শিরোনাম পাঠ্য সম্পাদনা 20px টেবিলের ফন্টের আকার পরিবর্তন করতে

ধাপ 4. এখন, আবার HTML এ <data:post.body/> এই কোডটি অনুসন্ধান করুন এবং নিচের কোড দিয়ে প্রতিস্থাপন করুন।

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

ধাপ 5. টেমপ্লেট সংরক্ষণ (Save) করুন। এবার থিমের কাজ শেষ। আপনি এখান থেকে বেরিয়ে পড়তে পারেন। 

কেননা যে পোস্টটিতে আপনি টেবিল যুক্ত করতে চান সেটিতে একটি কোড যুক্ত করতে হবে। মনে রাখবেন, সাইটের ছোট পোস্টগুলোতে টেবিল কনটেন্ট যুক্ত করার প্রয়োজন নেই। 

বড় বড় পোস্টগুলোতে অবশ্যই টেবিল কনটেন্ট যুক্ত করতে হবে। এতে ব্যবহারকারী সহজেই সূচী দেখে বুঝতে পারে পোস্টটি সম্পর্কে।

ব্লগার পোস্টে বিষয়বস্তুর সারণী (পোস্ট টেবিল কনটেন্ট) কিভাব দেখাবেন?

 আপনি যখনই কোন নির্দিষ্ট পোস্টে বিষয়বস্তুর সারণী দেখাতে চান। আপনাকে নীচের কোড যোগ করতে হবে, আপনি <h2> ট্যাগের মত প্রথম শিরোনাম ট্যাগের আগে এবং পরে যোগ করতে পারেন। অনুগ্রহ করে নিচের ধাপগুলি অনুসরণ করুন:

ধাপ 1. বিষয়বস্তুর সারণী (টেবিল কনটেন্ট) বাক্সের অবস্থান নির্বাচন করুন 

বিষয়বস্তুর সারণী (টেবিল কনটেন্ট) দেখানোর সেরা জায়গা হচ্ছে, পোস্টের প্রথম H2 ট্যাগের উপরে। তবে আপনি আপনার পছন্দ অনুযায়ী পরিবর্তন করতে পারেন। অর্থাৎ যেখানে আপনি দেখাতে চান সেখানেই যুক্ত করতে পারেন।

Table of Content (TOC) যোগ করতে নির্দিষ্ট ব্লগ পোস্ট ওপেন করুন, কম্পোজ থেকে HTML এ স্যুইচ করুন। অর্থাৎ আপনার পেজটি HTML মোডে ওপেন করতে হবে। পোস্টের যেখানে  আপনি পোস্ট সূচী টেবিলটা দেখাতে চান সেখানে নিচের কোডটি যুক্ত করুন।

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

ধাপ 2. ব্লগ পোস্টের শেষে নিচের কোড যোগ করুন

<div> <script>avsTOC();</script> </div>

এবার পোস্টটি আপডেট করুন। আপনার কাজ শেষ এবং চূড়ান্ত হয়ে গেছে। আপনার পোস্টটি প্রকাশ করে যাদু দেখুন। স্বয়ংক্রিয়ভাবে ব্লগ পোস্টটিতে বিষয়বস্তুর সারণী বা টেবিল কনটেন্ট যুক্ত হবে।

আপনি নীচের চিত্রের মতো বিষয়বস্তুর সারণী দেখতে পাবেন।

পোস্টটি ভালো লাগলে লাইক করুন এবং আপনার বন্ধুদের সাথে শেয়ার করুন।

ওয়েবসাইট সংক্রান্ত অন্যান্য ইনফো দেখুন

ওয়েবসাইট এবং ব্লগ সাইটের মধ্যে পার্থক্য কি?

একটি E-Commerce ওয়েবসাইট কিভাবে তৈরি করবেন?

ওয়েব হোস্টিং কি? কিভাবে ক্রয় করবেন?

লোকাল SEO কি? কিভাবে আপনার সাইটের লোকাল এসইও করবেন?

Technical SEO কি? কিভাবে ট্যাকনিক্যাল এসইও করবেন?

সাইটের ডুপ্লিকেট কনটেন্ট কিভাবে পরীক্ষা করবেন?

বাংলাদেশের সেরা ব্লগসাইটগুলো কি কি?

গুগল এডসেন্স এর জন্য বাংলাদেশে উচ্চতর সিপিসি কিওয়ার্ডগুলো কি কি?

এস এস এল কি?

কিভাবে একটি ব্লগার পেজ গুগল সার্চ ইঞ্জিনে দ্রুত ইনডেক্স করবেন?