Schema.Org Markup কি এবং কেন ব্লগে ব্যবহার করতে হয় তা নিয়ে আমরা ইতোপূর্বে আলোচনা করেছি। আপনি চাইলে আমাদের পূর্বের পোষ্ট থেকে এর বেসিক বিষয়গুলি জেনে নিতে পারেন। সেখানে আমরা এর মূল বিষয়সহ এটি ব্যবহারে কি কি সুবিধা রয়েছে তা নিয়ে বিস্তারিতভাবে আলোচনা করেছি। ঐ পোষ্টের ধারাবাহিকতায় আজকে আমরা দেখাবে কিভাবে ব্লগার ব্লগে Schema.Org Markup ব্যবহার করতে হয়?
ব্লগে Schema Markup ব্যবহার করার ফলে ব্লগের Structure সম্পর্কে সার্চ ইঞ্জিন স্পষ্ট ধারনা পায় এবং ব্লগের প্রত্যেকটি অংশকে সার্চ ইঞ্জিন সহজে মার্ক করে নিতে পারে। উপরের চিত্রে দেখুন Schema.Org Markup ব্যবহার করার ফলে একটি ওয়েবসাইটকে সার্চ ইঞ্জিন কিভাবে প্রদর্শন করছে? চিত্রে স্পষ্ট দেখা যাচ্ছে যে, ঐ ওয়েবসাইটটির সাথে Star Rating, পাবলিশ হওয়ার তারিখ, ক্যাটাগরিসহ আরও অনেক ইনফরমেশন শো করছে। এই বিষয়গুলি সার্চ ইঞ্জিনকে আকর্ষন করার পাশাপাশি যে কোন ভিজিটরকেও দৃষ্টি আকর্ষণ করবে।
তবে ব্লগার ব্লগ থেকে সকল সুবিধা নেয়া না গেলে Schema.Org Markup ব্যবহার করে এর কিছুটা সুবিধা পাওয়া যাবে। মূলত ব্লগে যারা HTML5 ব্যবহার করছেন তারা Schema Markup ব্যবহার করে সকল সুবিধা নিতে পারবেন। যেহেতু ব্লগার ব্লগে এখন Html4 ব্যবহার হচ্ছে সেহেতু এর সকল সুবিধা নেয়া যাবে না। তবে সব না পাওয়া গেলেও অধিকাংস সুবিধা পাওয়া যাবে।
বিঃ দ্রঃ উপরের প্রত্যেকটি Markup সার্চ ইঞ্জিনকে ব্লগের প্রত্যেকটি অংশ সম্পর্কে পরিষ্কারভাবে জানিয়ে দেবে। এখন এই মার্কগুলি আপনার ব্লগের Structure এর কোথাও ভূল আছে কি না তাও ধরে দিবে। এই লিংটিতে ক্লিক করে Google Structured Data Testing Tool থেকে জানতে পারবেন আপনার ব্লগের কোন অংশ ভূল আছে কি না? উপরের মার্কগুলি যুক্ত করার পর আপনার ব্লগের ত্রুটি খোঁজে বের করবে, যেগুলি আপনাকে সংশোধন করে নিতে হবে। আমাদের পরবর্তী পোষ্টে আলোচনা করব কিভাবে এই ত্রুটিগুলি সংশোধন করতে হয়?
তবে ব্লগার ব্লগ থেকে সকল সুবিধা নেয়া না গেলে Schema.Org Markup ব্যবহার করে এর কিছুটা সুবিধা পাওয়া যাবে। মূলত ব্লগে যারা HTML5 ব্যবহার করছেন তারা Schema Markup ব্যবহার করে সকল সুবিধা নিতে পারবেন। যেহেতু ব্লগার ব্লগে এখন Html4 ব্যবহার হচ্ছে সেহেতু এর সকল সুবিধা নেয়া যাবে না। তবে সব না পাওয়া গেলেও অধিকাংস সুবিধা পাওয়া যাবে।
সকল পোষ্ট দেখুন
কিভাবে ব্লগে যুক্ত করতে হয়ঃ
- প্রথমে ব্লগে লগইন করুন।
- তারপর Template > Edit Html এ ক্লিক করলে ব্লগার টেমপ্লেটের সবার উপরে নিচের কোডগুলির মত একটি অংশ দেখতে পাবেন। ঐ গুলির জায়গায় নিচের অপটিমাইজ করা কোডগুলি যুক্ত করুন।
<html expr:dir='data:blog.languageDirection' itemscope='' itemtype='https://schema.org/Blog' xmlns='https://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr' xmlns:fb='https://ogp.me/ns/fb#'>
- এখন কিবোর্ড হতে Ctrl+F চেপে <header> অথবা <header-wrapper> অংশটি সার্চ করুন এবং নিচের লাইনটি Replace করুন।
<div id='header-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPHeader' role='banner'>
- তারপর কিবোর্ড হতে Ctrl+F চেপে <div class='post hentry uncustomized-post-template' > অংশটি সার্চ করুন এবং নিচের লাইনটি Replace করুন।
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
- কিবোর্ড হতে Ctrl+F চেপে <div class='post hentry'> অংশটি সার্চ করুন এবং নিচের লাইনটি Replace করুন।
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
- কিবোর্ড হতে Ctrl+F চেপে <div id='sidebar-wrapper'> অংশটি সার্চ করুন এবং নিচের লাইনটি Replace করুন।
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
- কিবোর্ড হতে Ctrl+F চেপে <div id='footer-wrapper'> অংশটি সার্চ করুন এবং নিচের লাইনটি Replace করুন।
<div id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter' role='contentinfo'>
- সবশেষে Save Template এ ক্লিক করে Save করুন।
ভাই এটা ওয়ার্ডপ্রেসে কীভাবে অ্যাড করবো?
ReplyDeleteএই Markup টি ওয়ার্ডপ্রেসে যুক্ত করার জন্য www.wpbeginner.com এ দেখেুন। অবশ্যই পেয়ে যাবেন।
DeleteGoogle Structured Data Testing Tool থেকে আমার সাইটে প্রচুর এরোর দেখাচ্ছে । এখন এগুলো ঠিক করব কি ভাবে ? বলেছেন পরে পোস্ট করবেন । কিন্তু কোথায় ? প্লিজ লিংক দিন অথবা অন্য কোন বাংলা ব্লগের লিংক দিন যেখান থেকে সহজেই ঠিক করে নিতে পারব ।
ReplyDeleteএই পোষ্টের মধ্যে সিরিজ পোষ্ট হিসেবে লিংক করে দেয়া আছে। আপনি উপরের ”সকল পোষ্ট দেখুন” বাটনটিতে ক্লিক করুন। তাহলে দেখতে পাবেন...
Deleteভাই এটা ঠিক ভাবে করতে পারতাসি না ইস্ক্রিন সর্ট দিলে উপক্রিত হব
ReplyDeleteপয়েন্ট বাই পয়েন্ট সবকিছু বর্ণনা করা হয়েছে। স্কিনসর্ট এর প্রয়োজন আছে বলে মনেকরি না। আপনার সমস্যা কোথায় হচ্ছে, সেটা জানালে সমাধান দেয়ার চেষ্টা করব। ধন্যবাদ...
Deletediv class= post hentry uncustomized-post-template অংশ টুকু আমার ব্লগে নেই তো আমি কি করতে পারি
ReplyDeleteসম্পূর্ণ অংশটি না পেলে div class= post hentry অংশটি সার্চ করে পরের অংশটি যুক্ত করে নিলেই হয়ে যাবে।
Deleteহারুন ভাই দেখুনতো ভাই আমার ব্লগে করা লাগবে কি না।?? http/:healthbd72.blogspot.com
ReplyDeleteভাইয়া!
ReplyDeleteআমার ব্লগে div class='post-hentry' এই টুকু নেই,কী করতে পারি?
ভালোভাবে সার্চ করেন, কারণ এই অংশটা প্রত্যেক ব্লগে রয়েছে।
Deleteআপনার কোডে মনে হয় ভুল আছে,, এটা সঠিক >>> html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' itemscope='' itemtype='https://schema.org/Blog' xmlns='https://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr'>
ReplyDeleteনা বুঝে কাউকে সরাসরি ভূল বলবেন না। এগুলো বিভিন্নভাবে লিখা যায়। আপনার এবং আমার দুটিও সঠিক। এগুলোর ভাষা বুঝতে পারলে কখনোই ভূল বলতেন না।
Delete