HTML Meta Tags & SEO — head ও মেটা ট্যাগ বাংলায় | পর্ব ১৩

Q: JSON-LD লিখলে কি পাতা ওপরে ওঠে? AI-সার্চের যুগে structured data-র মূল্য কতটা?

সরাসরি উত্তর: না, structured data নিজে র্যাংকিং বাড়ায় না — Google-ও এটি বহুবার বলেছে। এটি সার্চ ইঞ্জিনকে দুটি জিনিস দেয়: পাতার বিষয় নিয়ে নিশ্চয়তা (এই “৫০০” কি দাম, না পৃষ্ঠাসংখ্যা?), আর rich result দেখানোর যোগ্যতা । rich result-এ ক্লিক বেশি আসতে পারে, তাই পরোক্ষ লাভ আছে — কিন্তু দেখানো হবে কি না, সেই সিদ্ধান্ত পুরোপুরি সার্চ ইঞ্জিনের। schema.org-এর জন্ম ২০১১ সালে, যখন Google, Microsoft আর Yahoo বুঝল যে প্রতিটি সার্চ ইঞ্জিনের আলাদা নিয়ম ওয়েবমাস্টারদের জন্য যন্ত্রণা; পরে Yandex-ও যোগ দেয়। শুরুতে লেখা হতো Microdata দিয়ে — HTML ট্যাগের ভেতরে attribute ছড়িয়ে। পরে JSON-LD জনপ্রিয় হয়, কারণ এটি পাতার HTML থেকে আলাদা একটি ব্লক — ডিজাইন বদলালেও ভাঙে না, আর সার্ভার থেকে তৈরি করা সহজ। কিন্তু যত বেশি সুবিধা, তত বেশি অপব্যবহার। বানানো রেটিং, পাতায় নেই এমন FAQ, নকল দাম — এসব ঠেকাতে Google-এর নিয়ম কড়া হয়েছে, আর ধরাও পড়ে।

এক নজরে · TL;DR

head হলো পাতার অদৃশ্য পরিচয়পত্র: পর্দায় কিছু দেখায় না, কিন্তু ব্রাউজার, সার্চ ইঞ্জিন আর Facebook-WhatsApp এখান থেকেই জানে পাতাটি কী, কোন ভাষায়, কোন ঠিকানায়, শেয়ার করলে কেমন দেখাবে।
প্রথম দুই লাইন প্রায় বাধ্যতামূলক: <meta charset="utf-8"> আর <meta name="viewport" content="width=device-width, initial-scale=1">. zoom কখনো বন্ধ করবেন না।
title আর description সার্চ ফলাফলের সাইনবোর্ড: প্রতিটি পাতায় আলাদা, সৎ, মানুষের জন্য লেখা। Google দরকার মনে করলে এগুলো নিজের মতো বদলেও দেখাতে পারে।
শেয়ারের কার্ড আসে Open Graph থেকে: og:title, og:description, og:image (প্রায় 1200×630, পূর্ণ URL), og:url; X-এর জন্য twitter:card. কার্ড ক্যাশ হয় — বদলালে Sharing Debugger দিয়ে নতুন করে পড়ান।
SEO মানে আগে ভালো বিষয়বস্তু: canonical, robots, hreflang, sitemap আর JSON-LD সার্চ ইঞ্জিনকে বুঝতে সাহায্য করে; keyword ঠেসে দেওয়া বা meta keywords কোনো কাজে আসে না।

এই পর্বে যা শিখবেন

head-এ কী থাকে, কেন তা পর্দায় দেখা যায় না, আর কারা এটি পড়ে
charset আর viewport meta ঠিক কী করে — আর zoom বন্ধ করা কেন অ্যাক্সেসিবিলিটির বড় ভুল
সার্চ ফলাফলের জন্য title ও description, আর robots, canonical, hreflang, sitemap, robots.txt
favicon, apple-touch-icon, theme-color আর Open Graph ও X card দিয়ে সুন্দর শেয়ার-কার্ড
JSON-LD structured data, preload/preconnect-এর প্রথম পরিচয়, আর SEO কী — কী নয়

১ · head — পাতার অদৃশ্য পরিচয়পত্র

একটি চিঠির খামের কথা ভাবুন। ভেতরের চিঠিটাই আসল লেখা — যা পাঠক পড়বেন। কিন্তু খামের ওপরে থাকে প্রাপকের ঠিকানা, প্রেরকের নাম, ডাকটিকিট, হয়তো “জরুরি” সিল। ডাকপিয়ন চিঠি খোলেন না; খামের তথ্য দেখেই ঠিক করেন কোথায় পৌঁছাবেন। HTML পাতাও ঠিক এমন। <body> হলো চিঠি — পর্দায় যা দেখেন। আর <head> হলো খাম — পাতা সম্পর্কে তথ্য, যা পাঠকের চোখে পড়ে না, কিন্তু যন্ত্রগুলো পড়ে।

পর্ব ০৩-এ প্রথম পেজ বানানোর সময় head-এ দুটি লাইন লিখেছিলেন — charset আর viewport — আর একটি <title>. এই পর্বে সেই খামটি খুলে প্রতিটি জিনিস চিনে নেব। head-এর তথ্যকে বলে metadata — “তথ্য সম্পর্কে তথ্য”। আর এর বেশিরভাগই লেখা হয় <meta> আর <link> ট্যাগ দিয়ে।

ব্রাউজার পড়ে

অক্ষরের encoding, মোবাইলে পাতার চওড়া, ট্যাবের নাম, ট্যাবের ছোট্ট লোগো, কোন CSS আগে আনতে হবে।

charset, viewport, title, icon, stylesheet

সার্চ ইঞ্জিন পড়ে

পাতার নাম ও সারাংশ, index করা যাবে কি না, আসল ঠিকানা কোনটি, অন্য ভাষার সংস্করণ কোথায়।

title, description, robots, canonical, hreflang

সোশ্যাল অ্যাপ পড়ে

Facebook, WhatsApp, LinkedIn, X-এ লিংক দিলে কার্ডে কোন শিরোনাম, কোন ছবি, কোন বর্ণনা।

og:*, twitter:*

সহায়ক প্রযুক্তি পড়ে

Screen reader নতুন পাতা খুললে প্রথমে title পড়ে শোনায় — শ্রোতা জানেন কোথায় এলেন।

title, lang

head কেন পর্দায় দেখা যায় না? কারণ ব্রাউজারের নিজস্ব স্টাইলে head আর তার ভেতরের সব কিছুর জন্য display: none লেখা আছে। তথ্যগুলো কিন্তু DOM-এ ঠিকই আছে — JavaScript দিয়ে পড়া যায়। নিচের প্রিভিউতে নিজেই দেখুন: পর্দায় শুধু body, আর head-এর জিনিসগুলো একটি ছোট স্ক্রিপ্ট নিচে ছাপিয়ে দিচ্ছে।

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>মায়ের রান্নাঘর — মিরপুরে ঘরে বানানো খাবার</title>
  <meta name="description" content="খিচুড়ি, পিঠা আর দুপুরের খাবার। সকাল ১০টার আগে অর্ডার দিলে দুপুরে পৌঁছায়।">
</head>
<body>
  <h1>মায়ের রান্নাঘর</h1>
  <p>পর্দায় শুধু body দেখা যায়। head-এর জিনিসগুলো কোথায় গেল?</p>
  <script>
    console.log('ট্যাবের নাম:', document.title);
    for (const tag of document.head.querySelectorAll('meta, title, link')) {
      console.log(tag.outerHTML);
    }
  </script>
</body>
</html>

প্রিভিউতে শুধু শিরোনাম আর একটি অনুচ্ছেদ। কিন্তু নিচের আউটপুটে আসবে ট্যাবের নাম আর head-এর চারটি ট্যাগ, হুবহু — অর্থাৎ ব্রাউজার সবই পড়েছে, শুধু আঁকেনি। চেষ্টা করুন: <title>-এর লেখা বদলে দিন — আউটপুট বদলাবে, পর্দা বদলাবে না। তারপর head-এ একটি <link rel="icon" href="logo.png"> যোগ করুন — সেটিও তালিকায় আসবে।

head-এ যা থাকতে পারে — আর কোনটির কী কাজ
ট্যাগ	কাজ	কে পড়ে
`<meta charset>`	অক্ষরের encoding জানায় — বাংলা ঠিকমতো দেখানোর চাবি	ব্রাউজার
`<meta name="viewport">`	মোবাইলে পাতার চওড়া কত ধরা হবে	মোবাইল ব্রাউজার
`<title>`	পাতার নাম — ট্যাব, বুকমার্ক, সার্চ ফলাফল	সবাই
`<meta name="description">`	পাতার এক-দুই বাক্যের সারাংশ	সার্চ ইঞ্জিন, সোশ্যাল অ্যাপ
`<link rel="…">`	অন্য ফাইল বা ঠিকানার সাথে সম্পর্ক: stylesheet, icon, canonical, alternate, preload	ব্রাউজার, সার্চ ইঞ্জিন
`<meta property="og:…">`	শেয়ার-কার্ডের তথ্য	Facebook, WhatsApp, LinkedIn…
`<script type="application/ld+json">`	যন্ত্রের পড়ার মতো গোছানো তথ্য (structured data)	সার্চ ইঞ্জিন
`<style>`, `<script>`, `<base>`	CSS, JavaScript, সব relative লিংকের ভিত্তি-ঠিকানা	ব্রাউজার

আরও গভীরে: <head> আর </head> দুটোই HTML-এ ঐচ্ছিক ট্যাগ — না লিখলেও parser নিজে head বানায়। কিন্তু এর একটি ফাঁদ আছে: head-এ থাকার কথা নয় এমন কিছু (যেমন একটি <img>, <div> বা সাধারণ লেখা) চলে এলে parser ধরে নেয় head শেষ, body শুরু। তার পরে লেখা <meta> বা <link rel="canonical"> তখন DOM-এ body-র ভেতরে পড়ে, আর Google-এর নথিতেও বলা আছে — head-এ অবৈধ element পেলে সে ধরে নেয় head ওখানেই শেষ, পরের metadata উপেক্ষা করতে পারে। আরেকটি সূক্ষ্ম নিয়ম: charset ঘোষণাটি ফাইলের প্রথম 1024 byte-এর মধ্যে থাকতেই হবে, কারণ ব্রাউজার পুরো ফাইল পড়ার আগে শুধু ওই অংশে উঁকি দিয়ে (spec-এ বলে “prescan”) encoding ঠিক করে।

২ · charset আর viewport — প্রথম দুই লাইন

meta charset — বাংলা যেন “à¦¬” না হয়ে যায়

কম্পিউটার অক্ষর রাখে সংখ্যা হিসেবে। কোন সংখ্যা কোন অক্ষর — সেই নিয়মের নাম encoding. আজকের ওয়েবের নিয়ম একটাই: UTF-8. <meta charset="utf-8"> ব্রাউজারকে আগেভাগে জানিয়ে দেয় “এই ফাইল UTF-8-এ লেখা”। না জানালে ব্রাউজার অনুমান করে, আর ভুল অনুমানে “বাংলা” হয়ে যায় “à¦¬à¦¾à¦‚à¦²à¦¾”-র মতো হিজিবিজি — একে বলে mojibake. লেখাটি head-এর একদম শুরুতে, title-এরও আগে রাখুন। বাংলা, ফন্ট আর encoding-এর পুরো গল্প পরের পর্বে — পর্ব ১৪-তে।

meta viewport — ফোনকে বলুন — পাতা হবে পর্দার সমান চওড়া

২০০৭ সালে প্রথম iPhone যখন এল, তখন প্রায় সব ওয়েবসাইট বানানো ছিল ডেস্কটপের চওড়া পর্দার জন্য। ফোনের ছোট পর্দায় সেগুলো ভেঙে না পড়ুক, তাই মোবাইল ব্রাউজার একটি কৌশল নিল: পাতাটিকে প্রায় 980px চওড়া ধরে সেই মাপে সাজানো, তারপর পুরো ছবিটা ছোট করে ফোনের পর্দায় বসানো। পুরোনো সাইট এতে “চলে”, কিন্তু লেখা এত ছোট যে চিমটি দিয়ে বড় করে পড়তে হয়। এই অনুমানটি বন্ধ করার উপায় Apple-ই বের করে — viewport meta tag. “পরে” চেপে দেখুন প্রতিটি অংশ কী করে:

ধাপ ১viewport meta নেই

<head>
  <meta charset="utf-8">
  <!-- viewport লেখা হয়নি -->
</head>

ধাপ ২পাতার চওড়া = ফোনের চওড়া

<meta name="viewport" content="width=device-width">

ধাপ ৩শুরুর zoom ১০০%

<meta name="viewport" content="width=device-width, initial-scale=1">

ধাপ ৪ভুল: zoom বন্ধ

<meta name="viewport" content="width=device-width, initial-scale=1,
      maximum-scale=1, user-scalable=no">

ধাপ ৫সঠিক সমাধান

<meta name="viewport" content="width=device-width, initial-scale=1">
/* CSS-এ — ইনপুটের লেখা অন্তত 16px */
input, select, textarea { font-size: 16px; }

viewport নেই। মোবাইল ব্রাউজার ধরে নেয় এটি পুরোনো ডেস্কটপ সাইট। প্রায় 980px চওড়া “কল্পিত পর্দায়” সাজিয়ে পুরোটা ছোট করে ফোনে বসায়। আপনার সুন্দর রেসপন্সিভ CSS-ও তখন কাজ করে না, কারণ ব্রাউজার ভাবছে পর্দা 980px.
width=device-width. “পাতার লেআউটের চওড়া = এই ডিভাইসের চওড়া” — ৩৬০ পিক্সেলের ফোনে 360px (এগুলো CSS pixel, ফোনের আসল ক্ষুদ্র বিন্দু নয়)। এখন লেখা স্বাভাবিক আকারে, আর পর্ব ৩০-৩১-এ যে media query শিখবেন সেগুলো সঠিক মাপ পায়।
initial-scale=1. পাতা খোলার মুহূর্তে zoom ১০০%. পুরোনো কিছু ব্রাউজারে ফোন আড়াআড়ি ঘোরালে পাতা অদ্ভুতভাবে বড় হয়ে যেত — এটি সেই সমস্যাও সামলায়। এই দুটি মিলিয়ে লেখা লাইনটিই প্রতিটি পাতার মানক লাইন।
zoom বন্ধ করা — করবেন না। user-scalable=no বা maximum-scale=1 লিখলে মানুষ আর চিমটি দিয়ে বড় করতে পারেন না। কম দৃষ্টিশক্তির মানুষ, বয়স্ক বাবা-মা, রোদে দাঁড়িয়ে ফোন দেখা রিকশাচালক — সবাই আটকে যান। এটি WCAG-এর “Resize Text” নিয়ম (লেখা ২০০% পর্যন্ত বড় করা যাবে) ভাঙে। iPhone-এর Safari অনেক বছর ধরে এই নিষেধ উপেক্ষা করে, কিন্তু সব ব্রাউজার করে না — আর Lighthouse একে ভুল হিসেবে ধরে।
আসল সমাধান। মানুষ zoom বন্ধ করত মূলত একটি বিরক্তি থেকে: iPhone-এ ফর্মের ঘরে চাপলে লেখা 16px-এর ছোট হলে Safari নিজে থেকে zoom করে। সমাধান CSS-এ — ইনপুটের font-size অন্তত 16px. zoom খোলা থাকল, বিরক্তিও গেল।

AI টুল আর পুরোনো টেমপ্লেট প্রায়ই maximum-scale=1.0, user-scalable=no বসিয়ে দেয়। কোড হাতে পেলেই আগে viewport লাইনটি দেখুন। পরিষ্কার নিয়ম: viewport-এ শুধু width=device-width, initial-scale=1 — এর বেশি কিছু নয়।

৩ · title আর meta description — সার্চ ফলাফলের সাইনবোর্ড

নিউমার্কেটে হাঁটলে প্রতিটি দোকানের সাইনবোর্ড দেখে আপনি এক সেকেন্ডে ঠিক করেন ঢুকবেন কি না। Google-এর ফলাফলের পাতাও (একে বলে SERP) একটি লম্বা বাজার — প্রতিটি ফলাফল একটি দোকানের সাইনবোর্ড। সেই সাইনবোর্ডের বড় নীল লেখাটি সাধারণত আসে আপনার <title> থেকে, আর নিচের ধূসর দুই লাইন প্রায়ই আসে meta description থেকে।

ভালো title-এর চার নিয়ম

প্রতিটি পাতায় আলাদা। ১০০টি পাতার title “হোম” বা “আমাদের সাইট” হলে কেউ বুঝবে না কোনটি কী। <title> HTML-এ বাধ্যতামূলক element-ও বটে।
আসল কথা আগে। “জামদানি শাড়ি — দাম ও নকশা | তাঁতঘর” — দোকানের নাম শেষে। লম্বা হলে শেষ থেকে কাটা পড়ে, তাই গুরুত্বপূর্ণ শব্দ সামনে।
মোটামুটি মাপ। Google অক্ষর নয়, পর্দার প্রস্থ মেপে কাটে। মোটা দাগে ইংরেজিতে ৫০–৬০ অক্ষরের পর “…” আসতে পারে; বাংলা অক্ষর চওড়া হওয়ায় আরও আগে। এটি কোনো নিয়ম নয়, শুধু আন্দাজ।
h1-এর সাথে মিল। title আর পাতার <h1> একই কথা বলবে — শব্দে হুবহু না হলেও অর্থে।

description পাতার “বিজ্ঞাপনের লাইন” নয়, সৎ সারাংশ: এই পাতায় কী পাবেন, কেন কাজে আসবে। মোটামুটি ১২০–১৬০ ইংরেজি অক্ষরের মধ্যে মূল কথাটা বলুন (মোবাইলে আরও কম দেখায়)। description সরাসরি র‍্যাংকিং বাড়ায় না — কিন্তু ভালো সারাংশ দেখে মানুষ বেশি ক্লিক করেন। নিচের এডিটরটি head থেকে title, description আর canonical পড়ে একটি নকল সার্চ-ফলাফল এঁকে দেয়:

<!doctype html>
<html lang="bn"><head>
<meta charset="utf-8">
<title>মায়ের রান্নাঘর — মিরপুরে ঘরে বানানো খিচুড়ি, পিঠা আর দুপুরের খাবার</title>
<meta name="description" content="ঘরে রান্না, কম তেল-মসলা। সকাল ১০টার আগে অর্ডার দিলে মিরপুর ও পল্লবীতে দুপুরের মধ্যে পৌঁছে যায়। আজকের মেনু আর দাম দেখুন।">
<link rel="canonical" href="https://rannaghor.example/menu">
<style>
  .serp { font-family: Arial, sans-serif; max-width: 600px; }
  .serp cite { color: #4d5156; font-size: 14px; font-style: normal; }
  .serp h3 { color: #1a0dab; font-size: 20px; font-weight: 400; margin: 4px 0; }
  .serp p { color: #4d5156; font-size: 14px; margin: 0; }
</style></head>
<body>
<div class="serp"><cite id="u"></cite><h3 id="t"></h3><p id="d"></p></div>
<script>
  function cut(text, max) { return text.length > max ? text.slice(0, max) + ' …' : text; }
  const descTag = document.querySelector('meta[name="description"]');
  const pageDesc = descTag ? descTag.content : '(description নেই — Google পাতার লেখা থেকে বেছে নেবে)';
  const canon = document.querySelector('link[rel="canonical"]');
  document.getElementById('u').textContent = canon ? canon.href : '(canonical নেই)';
  document.getElementById('t').textContent = cut(document.title, 55);
  document.getElementById('d').textContent = cut(pageDesc, 120);
  console.log('title:', document.title.length, 'অক্ষর | description:', pageDesc.length, 'অক্ষর');
</script>
</body></html>

প্রিভিউতে Google-এর মতো একটি ফলাফল: ওপরে ঠিকানা, নীল শিরোনাম, নিচে সারাংশ। title লম্বা, তাই শেষে “…” — খেয়াল করুন “দুপুরের খাবার” কাটা পড়েছে, কিন্তু আসল কথা সামনে থাকায় ক্ষতি কম। চেষ্টা করুন: title-কে ছোট করে “মায়ের রান্নাঘর — মিরপুর” লিখুন। তারপর পুরো description লাইনটি মুছে দেখুন কী বার্তা আসে। (এটি শুধু অনুশীলনের নকল — আসল Google পিক্সেল মেপে কাটে, আর এখানে অক্ষর গোনা হচ্ছে JavaScript-এর হিসাবে, যেখানে “ক্ষ”-এর মতো যুক্তাক্ষর কয়েকটি অক্ষর হিসেবে গোনা হয়।)

খোলা কথা

Google প্রতিশ্রুতি দেয় না যে আপনার title বা description হুবহু দেখাবে। ২০২১ সালে Google জানায়, ফলাফলের শিরোনাম (তারা বলে “title link”) বানাতে সে <title>-এর পাশাপাশি পাতার h1, অন্য সাইটের লিংকের লেখা ইত্যাদিও ব্যবহার করে। আর description-এর জায়গায় প্রায়ই সার্চের শব্দের সাথে মেলে এমন একটি অংশ পাতার লেখা থেকে তুলে দেখায় — একই পাতার জন্য দুই রকম খোঁজে দুই রকম সারাংশ। আপনার কাজ: পরিষ্কার, সৎ, পাতার সাথে মেলে এমন title-description লেখা — তাহলে বদলানোর সম্ভাবনা কমে।

৪ · সার্চ ইঞ্জিন পাতা খোঁজে কীভাবে — robots, canonical, hreflang, sitemap

Google-এ খুঁজলে Google তখন পুরো ইন্টারনেট ঘোরে না — সে আগে থেকেই বানানো একটি বিশাল সূচিপত্র (index) থেকে উত্তর দেয়। সেই সূচিপত্র বানায় crawler নামের প্রোগ্রাম (Google-এরটির নাম Googlebot), যে লিংক ধরে ধরে পাতা থেকে পাতায় যায়। head-এর কয়েকটি ট্যাগ এই যাত্রার প্রতিটি মোড়ে নির্দেশনা দেয়। ধাপে ধাপে দেখুন:

খুঁজে পাওয়াsitemap.xmlলিংক আর sitemap থেকে নতুন ঠিকানা
অনুমতি দেখাrobots.txtএই ঠিকানায় ঢোকা যাবে?
ডাউনলোড ও renderHTML + CSS + JSব্রাউজারের মতো পাতা সাজিয়ে দেখা
Index-এ রাখাrobots meta · canonicalরাখবে কি না, কোন ঠিকানায়
Rankingবিষয়বস্তু · লিংক · গতিকোন পাতা কার আগে
ফলাফলে দেখানোtitle · description · hreflangকোন ভাষার সংস্করণ, কোন শিরোনাম

খুঁজে পাওয়া। Crawler নতুন পাতার খোঁজ পায় অন্য পাতার লিংক থেকে, আর আপনার দেওয়া sitemap থেকে — সাইটের সব গুরুত্বপূর্ণ ঠিকানার একটি XML তালিকা। নতুন বা ছোট সাইট, যার দিকে কেউ লিংক দেয়নি, তার জন্য sitemap বিশেষ কাজের।
অনুমতি দেখা। ঢোকার আগে crawler সাইটের মূলে থাকা robots.txt পড়ে — বাড়ির গেটের নোটিশের মতো: “অ্যাডমিন অংশে ঢুকবেন না।” মনে রাখুন, এটি শুধু ঢোকা (crawl) নিয়ন্ত্রণ করে, আর ভদ্র crawler-রা মানে; এটি কোনো তালা নয়, গোপন তথ্য লুকানোর উপায়ও নয়।
ডাউনলোড ও render. পাতার HTML আনা হয়, দরকারে CSS-JavaScript চালিয়ে ব্রাউজারের মতো সাজিয়ে দেখা হয়। head-এর সব metadata এখানেই পড়া হয়। যে লেখা শুধু অনেক পরে JavaScript দিয়ে আসে, সেটি বোঝা সার্চ ইঞ্জিনের জন্য কঠিন ও ধীর হতে পারে।
Index-এ রাখা। <meta name="robots" content="noindex"> থাকলে পাতাটি সূচিপত্রে রাখা হয় না। একই লেখা কয়েকটি ঠিকানায় থাকলে <link rel="canonical"> বলে “আসল ঠিকানা এটি” — Google একে জোরালো ইঙ্গিত হিসেবে নেয়, তবে আদেশ হিসেবে নয়।
Ranking. কেউ খুঁজলে index থেকে প্রাসঙ্গিক পাতাগুলো বাছাই করে সাজানো হয়। এখানে সবচেয়ে বড় ভূমিকা বিষয়বস্তুর মান আর প্রাসঙ্গিকতার; অন্য সাইটের লিংক, পাতার গতি আর মোবাইলে ব্যবহারযোগ্যতাও হিসাবে আসে। কোনো meta tag একা পাতাকে ওপরে তোলে না।
ফলাফলে দেখানো। title link আর snippet তৈরি হয় (অংশ ৩), আর পাতার কয়েকটি ভাষার সংস্করণ থাকলে hreflang দেখে খোঁজকারীর ভাষার সংস্করণটি দেখানো হয় — বাংলায় খুঁজলে বাংলা পাতা।

robots meta — “এই পাতা সূচিপত্রে রাখবেন না”

কিছু পাতা সার্চে আসার দরকার নেই: সাইটের ভেতরের সার্চ-ফলাফল, “অর্ডার সফল” পাতা, পরীক্ষামূলক খসড়া। এদের head-এ লিখুন <meta name="robots" content="noindex">. nofollow যোগ করলে বলা হয় “এই পাতার লিংকগুলো অনুসরণ কোরো না”। একটি বিখ্যাত ভুল: পাতাটি robots.txt দিয়ে আটকে আবার noindex দেওয়া। আটকানো পাতায় crawler ঢুকতেই পারে না, তাই noindex দেখতেও পায় না — আর অন্য কেউ লিংক দিলে ঠিকানাটা বর্ণনা ছাড়াই ফলাফলে চলে আসতে পারে। সূচিপত্র থেকে বাদ দিতে চাইলে crawl করতে দিন, আর noindex দিন।

canonical — একই পণ্য, পাঁচটি ঠিকানা

অনলাইন দোকানে একটি জামদানির পাতা হয়তো খোলে /saree/jamdani, /saree/jamdani?color=red, /saree/jamdani?ref=facebook — তিন ঠিকানা, একই লেখা। সার্চ ইঞ্জিনের চোখে এটি duplicate content: কোনটি দেখাবে, লিংকের মূল্য কোথায় জমা হবে — বিভ্রান্তি। প্রতিটির head-এ একই লাইন দিন: <link rel="canonical" href="https://shop.example/saree/jamdani">. সবসময় পূর্ণ absolute URL, আর পাতা নিজের দিকেও canonical দিতে পারে (এই পাতার head-এও আছে)।

hreflang — বাংলা আর ইংরেজি সংস্করণ চেনানো

একটি বিশ্ববিদ্যালয়ের ভর্তির পাতা বাংলায় আর ইংরেজিতে দুই ঠিকানায় থাকলে প্রতিটি পাতার head-এ সব সংস্করণের তালিকা দিন — নিজেরটিসহ:

<link rel="alternate" hreflang="bn" href="https://uni.example/bn/admission.html">
<link rel="alternate" hreflang="en" href="https://uni.example/en/admission.html">
<link rel="alternate" hreflang="x-default" href="https://uni.example/en/admission.html">

নিয়ম তিনটি: দুই দিক থেকেই উল্লেখ থাকতে হবে (বাংলা পাতা ইংরেজিকে দেখাবে, ইংরেজি পাতাও বাংলাকে) — নইলে Google উপেক্ষা করতে পারে; ভাষার কোড ঠিক লিখুন (bn, দেশ বোঝাতে চাইলে bn-BD, ভারতের বাংলার জন্য bn-IN); আর x-default হলো “অন্য সবার জন্য” সংস্করণ। পাতার ভাষা জানাতে <html lang="bn"> তো থাকছেই — hreflang তার বিকল্প নয়, বরং “অন্য ভাষার ভাই-বোন কোথায়” তার ঠিকানা।

robots.txt আর sitemap.xml — সাইটের মূলে দুটি ছোট ফাইল

এ দুটি HTML নয়, head-এও থাকে না — থাকে সাইটের মূল ফোল্ডারে (https://example.com/robots.txt). চেহারা দেখে রাখুন:

# robots.txt
User-agent: *
Disallow: /admin/
Sitemap: https://shop.example/sitemap.xml

<!-- sitemap.xml (একটি ঠিকানার অংশ) -->
<url>
  <loc>https://shop.example/saree/jamdani</loc>
  <lastmod>2026-10-19</lastmod>
</url>

robots.txt-এর ধারণা ১৯৯৪ সালের — দীর্ঘদিন এটি ছিল শুধু একটি অলিখিত ভদ্রতার চুক্তি, ২০২২ সালে এটি RFC 9309 নামে ইন্টারনেট-মানক হয়। sitemap প্রোটোকল ২০০৫ সালে Google শুরু করে, পরে অন্য বড় সার্চ ইঞ্জিনগুলোও মেনে নেয় (sitemaps.org). Google Search Console-এ (বিনা পয়সার টুল) sitemap জমা দিলে কোন পাতা index হলো, কোনটি কেন হলো না — সব দেখতে পাবেন। ডোমেইন আর হোস্টিং কীভাবে কাজ করে জানতে ICT কোর্সের ডোমেইন ও হোস্টিং পর্বটি দেখুন।

৫ · favicon, apple-touch-icon আর theme-color — ছোট্ট লোগো, বড় পরিচয়

ব্রাউজারে দশটি ট্যাব খোলা থাকলে আপনি লেখা পড়েন না — ছোট্ট লোগো দেখে চেনেন কোনটি YouTube, কোনটি Gmail. সেই লোগোর নাম favicon (favorite icon — বুকমার্কের আইকন থেকে নাম)। Google-এর মোবাইল সার্চ ফলাফলেও সাইটের নামের পাশে এটি দেখায়। আজকের একটি সহজ, প্রায় সব জায়গায় চলা সেট:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">   <!-- 180×180 PNG -->
<meta name="theme-color" content="#0d1f3c">

favicon.ico — সবচেয়ে পুরোনো ফরম্যাট, প্রায় সব ব্রাউজার আর অনেক টুল (যেমন RSS reader) বোঝে। অনেক ব্রাউজার কিছু না বললেও নিজে থেকে সাইটের মূলে /favicon.ico খোঁজে।
SVG icon — একটি ফাইলেই সব মাপে ঝকঝকে। SVG-র ভেতরে CSS-এর prefers-color-scheme লিখে dark mode-এ লোগোর রংও বদলানো যায়। Chrome, Edge, Firefox দেখায়; Safari-তে সাপোর্ট এসেছে অনেক দেরিতে (Can I use দেখে নিন) — তাই ওপরের ICO-টি fallback হিসেবে রাখুন।
apple-touch-icon — iPhone-এ “Add to Home Screen” করলে হোম স্ক্রিনে যে আইকন বসে। 180×180 PNG, স্বচ্ছ পটভূমি ছাড়া হলে ভালো দেখায়।
theme-color — কিছু ব্রাউজারে (যেমন Android-এর Chrome, কিছু ক্ষেত্রে Safari) অ্যাড্রেস বার বা ব্রাউজারের ওপরের অংশের রং। media="(prefers-color-scheme: dark)" দিয়ে আলো ও অন্ধকার মোডের জন্য দুটি রং দেওয়া যায়। এটি Baseline নয় — অনেক ব্রাউজার (যেমন Firefox) উপেক্ষা করে, আর ব্রাউজারভেদে ব্যবহার বদলায়; না মানলে কোনো ক্ষতি নেই, তাই এটি নিরাপদ “বাড়তি সাজ”।

পুরোনো কোডে rel="shortcut icon" দেখবেন — এটি Internet Explorer যুগের অভ্যাস। আজকের HTML-এ শুধু rel="icon" লিখলেই চলে। favicon না দিলে ব্রাউজার প্রতিটি পাতায় /favicon.ico চেয়ে 404 পায় — ক্ষতি সামান্য, কিন্তু সার্ভারের লগ ভরে যায়।

৬ · Open Graph আর X card — লিংক শেয়ার করলে সুন্দর কার্ড

Messenger-এ কাউকে একটি লিংক পাঠালেন — মুহূর্তেই নিচে একটি কার্ড: বড় ছবি, শিরোনাম, এক লাইনের বর্ণনা। এই link preview কোথা থেকে আসে? ২০১০ সালে Facebook একটি নিয়ম প্রকাশ করে — Open Graph protocol: head-এ কয়েকটি og: meta দিলেই যেকোনো পাতা শেয়ার-কার্ডের তথ্য দিতে পারে। আজ Facebook-এর পাশাপাশি WhatsApp, LinkedIn, Telegram, Slack, Discord — প্রায় সবাই এটি পড়ে।

পাঁচটি মূল Open Graph ট্যাগ
ট্যাগ	কী দেবেন	খেয়াল রাখুন
`og:title`	কার্ডের শিরোনাম	title-এর চেয়ে ছোট ও আকর্ষণীয় হতে পারে; সাইটের নাম `og:site_name`-এ দিন
`og:description`	এক-দুই বাক্যের বর্ণনা	অনেক অ্যাপ এক-দুই লাইনের বেশি দেখায় না
`og:image`	কার্ডের ছবির পূর্ণ URL	মোটামুটি 1200×630 (অনুপাত প্রায় ১.৯১:১); মূল বিষয় মাঝখানে রাখুন, কোনায় কাটা পড়তে পারে
`og:url`	পাতার আসল ঠিকানা	canonical-এর সাথে মিল রাখুন
`og:type`	`website` বা `article`	ব্লগ-পোস্ট বা খবরের জন্য article

খেয়াল করুন, Open Graph-এ লেখা হয় property="og:title", name= নয় — কারণ এটি RDFa নামের একটি পুরোনো নিয়ম থেকে ধার করা। X (আগের Twitter)-এর নিজের ট্যাগ twitter:card লেখা হয় name= দিয়ে। <meta name="twitter:card" content="summary_large_image"> দিলে বড় ছবির কার্ড আসে; শিরোনাম-ছবি আলাদা না দিলে X সাধারণত og ট্যাগ থেকেই নিয়ে নেয়। এবার নিজেই একটি কার্ড বানিয়ে দেখুন — এডিটরটি og ট্যাগ পড়ে Facebook-ধাঁচের কার্ড আঁকে (আসল ছবির বদলে একটি রঙিন জায়গায় ছবির ঠিকানা লেখা):

<!doctype html>
<html lang="bn"><head>
<meta charset="utf-8">
<title>ঈদ কালেকশন ২০২৬ | তাঁতঘর</title>
<meta property="og:title" content="ঈদ কালেকশন — হাতে বোনা জামদানি">
<meta property="og:description" content="নারায়ণগঞ্জের তাঁতিদের হাতে বোনা ৪০টি নতুন নকশা।">
<meta property="og:image" content="https://tantghor.example/img/eid-1200x630.jpg">
<meta property="og:url" content="https://tantghor.example/eid">
<style>
  .card { max-width: 420px; border: 1px solid #ccd0d5; font-family: system-ui, sans-serif; }
  .img { aspect-ratio: 1200 / 630; background: linear-gradient(135deg, #0f766e, #f59e0b);
         color: #fff; display: grid; place-items: center; padding: 8px; font-size: 13px; overflow-wrap: anywhere; }
  .txt { background: #f0f2f5; padding: 8px 12px; }
  .txt small { color: #65676b; } .txt b { display: block; margin: 2px 0; }
</style></head>
<body>
<div class="card"><div class="img" id="img"></div>
  <div class="txt"><small id="site"></small><b id="ttl"></b><span id="dsc"></span></div></div>
<script>
  function og(p) { const m = document.querySelector('meta[property="og:' + p + '"]'); return m ? m.content : ''; }
  document.getElementById('img').textContent = og('image') || 'ছবি নেই — কার্ড ছোট আর ফ্যাকাশে দেখাবে';
  document.getElementById('site').textContent = og('url') ? new URL(og('url')).hostname.toUpperCase() : '';
  document.getElementById('ttl').textContent = og('title') || document.title;
  document.getElementById('dsc').textContent = og('description');
  console.log('শিরোনাম এসেছে:', og('title') ? 'og:title থেকে' : 'title থেকে (fallback)');
</script>
</body></html>

প্রিভিউতে একটি শেয়ার-কার্ড: ওপরে 1200×630 অনুপাতের রঙিন ছবির জায়গা, নিচে বড় হাতের অক্ষরে সাইটের ডোমেইন, মোটা শিরোনাম আর বর্ণনা। আউটপুট বলবে শিরোনাম og:title থেকে এসেছে। চেষ্টা করুন: og:title-এর পুরো লাইনটি মুছুন — শিরোনাম এবার <title> থেকে আসবে, যেমন অনেক আসল অ্যাপও করে। তারপর og:image মুছে দেখুন কার্ড কতটা ফ্যাকাশে লাগে — ছবিহীন লিংকে মানুষ ক্লিকও কম করেন।

কার্ডটি আসলে কে বানায় — আর পুরোনো ছবি কেন আটকে থাকে

অনেকের অভিজ্ঞতা: পাতার ছবি বদলালেন, কিন্তু Facebook-এ শেয়ার করলে এখনো পুরোনো ছবি। কারণ বুঝতে কার্ড তৈরির পুরো পথটি দেখুন:

লিংক পেস্টtantghor.example/eidMessenger বা WhatsApp-এ
অ্যাপের crawlerGET /eidপাতার HTML চেয়ে আনে
head পড়াog:title · og:imageনা পেলে title, description
ছবি আনাeid-1200x630.jpgপূর্ণ URL থেকে ডাউনলোড
ক্যাশে রাখাcacheপরের শেয়ারে আর আনে না
নতুন করে পড়ানোSharing Debugger“Scrape Again”

লিংক পেস্ট। আপনি শুধু ঠিকানা দিলেন। কার্ড বানাতে অ্যাপকে পাতাটি নিজে পড়তে হবে — আর সেটা করে মানুষ নয়, একটি প্রোগ্রাম।
অ্যাপের crawler. Facebook-এর সার্ভার পাতাটি চেয়ে আনে (WhatsApp-এ সাধারণত প্রেরকের ফোন নিজেই আনে)। এই প্রোগ্রামগুলো সাধারণত JavaScript চালায় না — তাই og ট্যাগ অবশ্যই সার্ভার থেকে আসা HTML-এ থাকতে হবে, পরে JavaScript দিয়ে বসালে চলবে না।
head পড়া। og ট্যাগ খোঁজা হয়। না পেলে অ্যাপ নিজের মতো অনুমান করে — <title>, description, পাতার কোনো এলোমেলো ছবি। সেই অনুমান প্রায়ই খারাপ দেখায়।
ছবি আনা। og:image-এ https:// সহ পূর্ণ ঠিকানা লাগে; img/share.jpg লিখলে অনেক অ্যাপ খুঁজে পায় না। ছবির ফাইল খুব বড় হলে বা লগইনের পেছনে থাকলেও ব্যর্থ। Facebook অন্তত 1200×630 সুপারিশ করে।
ক্যাশে রাখা। প্রতিবার শেয়ারে পাতা আবার পড়া খরচের, তাই অ্যাপ ফলটি cache-এ রাখে। এজন্যই ছবি বদলানোর পরও পুরোনো কার্ড আসে — আপনার সাইট ঠিক আছে, অ্যাপের স্মৃতি পুরোনো।
নতুন করে পড়ানো। Facebook-এর Sharing Debugger (developers.facebook.com/tools/debug)-এ ঠিকানা দিয়ে “Scrape Again” চাপলে নতুন করে পড়ে; LinkedIn-এর জন্য আছে Post Inspector. WhatsApp-এর ক্যাশ পরিষ্কারের এমন সরাসরি টুল নেই, তাই অনেকে ছবির ফাইলের নামই বদলে দেন (যেমন eid-v2.jpg).

৭ · Structured data আর JSON-LD — যন্ত্রের জন্য গোছানো তথ্য

মানুষ পাতা পড়ে বোঝে “এটি একটি কোর্সের পর্ব, ABCL TECH-এর, বাংলায়”। যন্ত্রকে এটা নিশ্চিত করে বোঝাতে আলাদা করে লিখে দেওয়া যায় — একে বলে structured data. শব্দভান্ডারটি আসে schema.org থেকে, যা ২০১১ সালে Google, Microsoft (Bing) আর Yahoo মিলে শুরু করে: Article, Course, Product, Event, BreadcrumbList, FAQPage… হাজারো “ধরন”। আর লেখার সবচেয়ে প্রচলিত ও Google-এর সুপারিশ করা উপায় JSON-LD — head-এ একটি <script type="application/ld+json">-এর ভেতরে JSON.

এর লাভ? সার্চ ফলাফলে সাধারণ নীল লিংকের বদলে সমৃদ্ধ চেহারা — rich result: পণ্যের দাম ও স্টক, অনুষ্ঠানের তারিখ, “হোম › কোর্স › HTML ও CSS”-এর মতো breadcrumb. এই পাতার head-এও একটি LearningResource ব্লক আছে (Ctrl+U চেপে দেখুন)। নিচের এডিটরে একটি BreadcrumbList আছে; স্ক্রিপ্টটি JSON পড়ে Google-এর মতো breadcrumb এঁকে দেয়:

<!doctype html>
<html lang="bn"><head>
<meta charset="utf-8">
<title>CSS Grid | HTML ও CSS কোর্স</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "হোম", "item": "https://learn.example/" },
    { "@type": "ListItem", "position": 2, "name": "কোর্স", "item": "https://learn.example/courses/" },
    { "@type": "ListItem", "position": 3, "name": "HTML ও CSS" }
  ]
}
</script>
</head>
<body>
<p id="crumb" style="font-family: Arial, sans-serif; color: #4d5156"></p>
<script>
  const ldText = document.querySelector('script[type="application/ld+json"]').textContent;
  try {
    const data = JSON.parse(ldText);
    const names = data.itemListElement.map(function (x) { return x.name; });
    document.getElementById('crumb').textContent = 'learn.example › ' + names.join(' › ');
    console.log('@type:', data['@type'], '| ধাপ:', names.length);
  } catch (e) {
    console.log('JSON ভুল — সার্চ ইঞ্জিন পুরো ব্লকটিই বাদ দেবে:', e.message);
  }
</script>
</body></html>

প্রিভিউতে আসবে “learn.example › হোম › কোর্স › HTML ও CSS”, আর আউটপুটে @type: BreadcrumbList | ধাপ: 3. চেষ্টা করুন: তৃতীয় আইটেমের }-এর ঠিক পরে (]-এর আগে) একটি কমা বসান — JavaScript-এ চলে, কিন্তু JSON-এ শেষের কমা নিষেধ। আউটপুট এবার বলবে JSON ভুল। ঠিক এভাবেই একটি ছোট কমার জন্য সার্চ ইঞ্জিন পুরো structured data বাদ দেয়, কোনো সতর্কবার্তা ছাড়াই। তারপর একটি চতুর্থ ধাপ যোগ করে দেখুন।

শেখার সাইটে প্রচলিত চারটি ধরন
ধরন	কখন	মনে রাখুন
`Article`	ব্লগ-পোস্ট, খবর	headline, author, datePublished, image
`Course`	একটি কোর্সের মূল পাতা	name, description, provider; Google-এর কোর্স-ফলাফলের নিয়ম সময়ে সময়ে বদলায় — তাদের বর্তমান নথি দেখে নিন
`BreadcrumbList`	সাইটে পাতাটি কোথায়	পাতায় দৃশ্যমান breadcrumb-এর সাথে মিলিয়ে
`FAQPage`	প্রশ্ন-উত্তরের পাতা	প্রশ্ন-উত্তর পাতাতেই দেখা যেতে হবে; ফলাফলে আলাদা চেহারা আজ খুব সীমিত (নিচে দেখুন)

তিনটি সতর্কতা। (১) structured data সরাসরি র‍্যাংকিং বাড়ায় না; rich result পাওয়ার যোগ্যতা দেয় মাত্র, নিশ্চয়তা নয়। (২) যা পাতায় দেখা যায় না, তা লিখবেন না — নকল ৫-তারা রিভিউ বা বানানো দাম Google-এর spam নীতি ভাঙে, শাস্তি হতে পারে। (৩) নিয়ম বদলায়: ২০২৩ সালের আগস্টে Google জানায়, FAQ-এর বিশেষ চেহারা এখন থেকে মূলত সুপরিচিত, নির্ভরযোগ্য সরকারি ও স্বাস্থ্য-বিষয়ক সাইটে দেখানো হবে, আর HowTo-র বিশেষ চেহারা পরে পুরোপুরি তুলে নেয়। FAQ markup লেখা ভুল নয় — শুধু সাধারণ সাইটের জন্য আলাদা চেহারা আশা করবেন না। যাচাই করুন Google-এর Rich Results Test আর validator.schema.org দিয়ে।

৮ · preload, preconnect আর একটি পূর্ণ head

head-এর <link> শুধু পরিচয় দেয় না, ব্রাউজারকে আগাম ইশারাও দেয়। দুটি নাম এখনই চিনে রাখুন — খুঁটিনাটি পর্ব ৪৯-এ (পারফরম্যান্স):

rel="preconnect" — “এই সার্ভারের সাথে এখনই যোগাযোগ শুরু করে রাখো” (DNS, সংযোগ, নিরাপত্তার হাত-মেলানো)। যেমন Google Fonts ব্যবহার করলে <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. শুধু সত্যিই দরকারি এক-দুটি সার্ভারের জন্য।
rel="preload" — “এই ফাইলটি শিগগির লাগবে, আগেভাগে নামাও”, যেমন প্রথম পর্দার বড় ছবি বা মূল ফন্ট: <link rel="preload" href="hero.webp" as="image">. সব কিছু preload করলে আসলে কিছুই আগে আসে না — সবাই লাইনে দাঁড়ায়।

দুটিই Baseline Widely available — আধুনিক সব ব্রাউজারে চলে, আর না চললেও পাতা ভাঙে না, শুধু একটু ধীর হয়। এবার সব মিলিয়ে একটি ছোট সাইটের পাতার জন্য পরামর্শযোগ্য head (ক্রমটি খেয়াল করুন — charset সবার আগে, তারপর viewport আর title):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>জামদানি শাড়ি — দাম ও নকশা | তাঁতঘর</title>
  <meta name="description" content="নারায়ণগঞ্জের তাঁতিদের হাতে বোনা জামদানি — নকশা, দাম আর ঘরে পৌঁছানোর নিয়ম।">
  <link rel="canonical" href="https://tantghor.example/saree/jamdani">
  <link rel="alternate" hreflang="bn" href="https://tantghor.example/saree/jamdani">
  <link rel="alternate" hreflang="en" href="https://tantghor.example/en/saree/jamdani">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="/css/site.css">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <meta name="theme-color" content="#0f766e">

  <meta property="og:type" content="website">
  <meta property="og:title" content="হাতে বোনা জামদানি">
  <meta property="og:description" content="নারায়ণগঞ্জের তাঁতিদের নতুন নকশা।">
  <meta property="og:image" content="https://tantghor.example/img/jamdani-1200x630.jpg">
  <meta property="og:url" content="https://tantghor.example/saree/jamdani">
  <meta name="twitter:card" content="summary_large_image">
  <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Product", … }</script>
</head>

এবার উল্টো দিক — একটি ভুলে ভরা head. নিচের এডিটরটি একটি ছোট “head অডিট” — Lighthouse বা অনেক SEO টুল যে কয়েকটি জিনিস দেখে, তার একটি খেলনা সংস্করণ। head ঠিক করতে থাকুন, তালিকার ✘ গুলো ✔ হতে থাকবে:

<!doctype html>
<html lang="bn"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>হোম</title>
<meta name="keywords" content="ঢাকা, বাজার, সস্তা, সস্তা বাজার, ঢাকা সস্তা বাজার">
<meta property="og:image" content="img/share.jpg">
</head>
<body><ul id="report"></ul>
<script>
  function found(sel) { return document.head.querySelector(sel); }
  const vp = found('meta[name="viewport"]');
  const ms = vp && /maximum-scale\s*=\s*([\d.]+)/.exec(vp.content);
  const ogImg = found('meta[property="og:image"]');
  const checks = [
    ['viewport আছে', !!vp],
    ['zoom বন্ধ করা হয়নি', !!vp && !/user-scalable\s*=\s*(no|0)/.test(vp.content) && !(ms && parseFloat(ms[1]) < 5)],
    ['title-এ অন্তত ১৫ অক্ষর', document.title.trim().length >= 15],
    ['meta description আছে', !!found('meta[name="description"]')],
    ['canonical আছে', !!found('link[rel="canonical"]')],
    ['og:image পূর্ণ URL (https://…)', !!ogImg && /^https:\/\//.test(ogImg.content)],
    ['meta keywords নেই (Google উপেক্ষা করে)', !found('meta[name="keywords"]')]
  ];
  const report = document.getElementById('report');
  for (const c of checks) report.insertAdjacentHTML('beforeend', '<li>' + (c[1] ? '✔ ' : '✘ ') + c[0] + '</li>');
  console.log('পাস:', checks.filter(function (c) { return c[1]; }).length, '/', checks.length);
</script>
</body></html>

শুরুতে সাতটির মধ্যে মাত্র একটি পাস (পাস: 1 / 7) — viewport আছে, কিন্তু zoom বন্ধ; title মাত্র “হোম”; description আর canonical নেই; og:image relative; আর অচল keywords ট্যাগ। চেষ্টা করুন একে একে ঠিক করতে: viewport থেকে maximum-scale আর user-scalable মুছুন, title-এ পূর্ণ নাম লিখুন, একটি description ও canonical যোগ করুন, og:image-এ https:// সহ পূর্ণ ঠিকানা দিন, keywords লাইনটি মুছুন — 7 / 7 করতে পারেন কি না দেখুন। (মনে রাখবেন, এটি খেলনা অডিট; সব ✔ মানেই ভালো পাতা নয় — ভালো বিষয়বস্তু ছাড়া SEO হয় না।)

৯ · SEO কী, আর কী নয়

SEO নিয়ে ইন্টারনেটে অসংখ্য “গোপন কৌশল” বিক্রি হয়। সত্যটি কম রোমাঞ্চকর, কিন্তু অনেক বেশি কাজের: সার্চ ইঞ্জিনের লক্ষ্য খোঁজকারীকে সবচেয়ে কাজের পাতাটি দেখানো। তাই দীর্ঘমেয়াদে জেতে সেই পাতা, যা সত্যিই মানুষের প্রশ্নের ভালো উত্তর দেয় — আর সেই পাতাকে যন্ত্রের কাছে সহজবোধ্য করাটাই SEO-র প্রযুক্তিগত অংশ।

✔ SEO যা

মানুষের কাজে লাগে এমন মৌলিক লেখা; অর্থবহ HTML (পর্ব ০৪, ১০) — একটি h1, গোছানো heading; প্রতিটি পাতার আলাদা title-description; ছবির alt; দ্রুত, মোবাইলে ভালো চলা পাতা (Core Web Vitals, পর্ব ৪৯); ভাঙা লিংক না থাকা; canonical, sitemap দিয়ে পরিষ্কার কাঠামো।

বিষয়বস্তু আগে, কাঠামো তারপর

✘ SEO যা নয়

Keyword stuffing — “ঢাকা সস্তা শাড়ি ঢাকা শাড়ি সস্তা” বারবার ঠেসে দেওয়া; সাদা পটভূমিতে সাদা লেখায় লুকানো শব্দ; কিনে আনা লিংক; অন্য সাইট থেকে কপি; AI দিয়ে হাজারো মানহীন পাতা বানানো; আর meta keywords.

এগুলো উল্টো শাস্তি ডেকে আনে

<meta name="keywords"> নিয়ে আলাদা করে বলা দরকার, কারণ অনেক টিউটোরিয়াল আর AI এখনো এটি শেখায়। ২০০৯ সালেই Google স্পষ্ট জানিয়েছে, ওয়েব র‍্যাংকিংয়ে তারা এই ট্যাগ ব্যবহার করে না; অন্য বড় সার্চ ইঞ্জিনগুলোর কাছেও এর গুরুত্ব নেই বললেই চলে। অনেক সাইটে (এই সাইটেও) এটি এখনো দেখবেন — ক্ষতি নেই, তবে এতে সময় দেওয়ার কোনো মানেও নেই। কেন এটি মরে গেল, সেই গল্প ভাবনার প্রশ্ন ১-এ।

বোর্ড পরীক্ষার খাতার কথা ভাবুন। পরীক্ষক যদি শুধু খাতার ওপরে লেখা “আমি সব প্রশ্নের সঠিক উত্তর দিয়েছি” পড়ে নম্বর দিতেন, সবাই সেটাই লিখত। তাই পরীক্ষক ভেতরের উত্তর পড়েন। meta keywords ছিল খাতার ওপরের সেই দাবি — Google ভেতরের লেখা পড়ে। head-এর metadata তখনই কাজের, যখন তা ভেতরের লেখার সৎ বর্ণনা দেয়।

সবশেষে একটি নতুন বাস্তবতা: আজ অনেকেই প্রশ্নের উত্তর খোঁজেন AI চ্যাট বা সার্চের AI-সারাংশে। সেই টুলগুলোও শেষ পর্যন্ত ওয়েবের পাতা পড়ে — আর ঠিক এই একই জিনিস তাদের সাহায্য করে: পরিষ্কার title, সৎ description, অর্থবহ HTML, সঠিক structured data. নতুন কোনো জাদুর ট্যাগ খোঁজার আগে মূল কাজটি ঠিক করুন।

১০ · AI-এর যুগে — head আর SEO-র কাজ AI-কে দিলে কী দেখবেন

“আমার পাতার জন্য SEO meta tag লিখে দাও” — AI কয়েক সেকেন্ডে লম্বা একটি head দিয়ে দেবে। দেখতে পেশাদার, কিন্তু প্রায়ই ভেতরে পুরোনো বা ক্ষতিকর জিনিস থাকে, কারণ AI শিখেছে ইন্টারনেটের বহু বছরের পুরোনো লেখা থেকে।

AI সাধারণত যেসব ভুল করে

AI-এর ভুল	সমস্যা	ঠিক কী
`maximum-scale=1, user-scalable=no`	zoom বন্ধ — অ্যাক্সেসিবিলিটি ভাঙে	শুধু `width=device-width, initial-scale=1`
লম্বা `meta keywords`	Google উপেক্ষা করে; সময় নষ্ট	বাদ দিন, লেখায় মন দিন
`og:image="images/share.jpg"`	relative URL — কার্ডে ছবি আসে না	`https://` সহ পূর্ণ ঠিকানা
সব পাতায় একই title-description	সার্চে পাতাগুলো আলাদা করা যায় না	প্রতি পাতায় আলাদা
বানানো `aggregateRating`, নকল রিভিউ	spam নীতি ভঙ্গ, শাস্তির ঝুঁকি	শুধু পাতায় দেখা যায় এমন সত্য তথ্য
`revisit-after`, `X-UA-Compatible`, `rel="shortcut icon"`	অচল বা অপ্রয়োজনীয় ট্যাগ	বাদ দিন; icon-এর জন্য `rel="icon"`
og ট্যাগ JavaScript দিয়ে পরে বসানো	শেয়ার-crawler সাধারণত JS চালায় না	সার্ভারের HTML-এই রাখুন

AI-কে কাজ দেওয়ার সময় নিয়মগুলো আগেই বলে দিন — তাহলে ভুল কম আসে, আর আপনিও জানেন কী যাচাই করবেন:

আমার একটি অনলাইন দোকানের পণ্যের পাতা আছে (ঠিকানা: https://tantghor.example/saree/jamdani, ভাষা বাংলা)। এর জন্য একটি আধুনিক HTML head লিখে দাও, নিচের নিয়ম মেনে: ১. charset utf-8 সবার আগে; viewport শুধু width=device-width, initial-scale=1 — zoom বন্ধ করবে না। ২. বাংলায় একটি title (আসল কথা আগে, দোকানের নাম শেষে) আর ১২০–১৫০ অক্ষরের একটি সৎ description. ৩. canonical, আর Open Graph (og:title, og:description, og:image পূর্ণ https URL, 1200×630, og:url, og:type) ও twitter:card. ৪. meta keywords, revisit-after বা অন্য অচল ট্যাগ দেবে না। ৫. JSON-LD-তে শুধু Product-এর নাম, ছবি আর বর্ণনা — কোনো রেটিং বা রিভিউ বানাবে না। শেষে প্রতিটি লাইনের পাশে এক বাক্যে বলো সেটি কে পড়ে (ব্রাউজার, সার্চ ইঞ্জিন না সোশ্যাল অ্যাপ)।

AI-এর দেওয়া head হাতে পেলে — যাচাইয়ের চেকলিস্ট

validator.w3.org-এ পাতা যাচাই করেছি — head-এ কোনো অবৈধ element বা ভুল attribute নেই
viewport লাইনে user-scalable বা maximum-scale নেই
DevTools-এর Elements প্যানেলে দেখেছি সব meta আসলেই <head>-এর ভেতরে, body-তে সরে যায়নি
Lighthouse-এর SEO আর Accessibility রিপোর্ট চালিয়েছি; Google-এর Rich Results Test-এ JSON-LD-এ error নেই
Facebook Sharing Debugger বা LinkedIn Post Inspector-এ কার্ড দেখেছি — ছবি, শিরোনাম ঠিক আসছে
কোনো ট্যাগ নিয়ে সন্দেহ হলে MDN আর Google Search Central-এর নিজস্ব নথিতে পড়েছি, ব্লগের “গোপন কৌশল”-এ নয়; নতুন ফিচারের সাপোর্ট Can I use-এ দেখেছি

পরীক্ষা ও ইন্টারভিউতে — বিশ্ববিদ্যালয়, চাকরি বা ফ্রন্ট-এন্ড ইন্টারভিউর পরীক্ষায় এ ধরনের প্রশ্ন প্রায়ই আসে:

<head> আর <body>-এর পার্থক্য? — head-এ পাতা সম্পর্কে তথ্য (metadata), যা দেখা যায় না; body-তে দৃশ্যমান বিষয়বস্তু।
viewport meta কী করে? — মোবাইল ব্রাউজারকে পাতার চওড়া ডিভাইসের চওড়ার সমান ধরতে বলে; না দিলে পাতা প্রায় 980px ধরে ছোট করে দেখায়।
canonical tag কেন? — একই লেখা কয়েক ঠিকানায় থাকলে আসল ঠিকানা জানায়, duplicate content-এর বিভ্রান্তি কমায়।
Open Graph কী? — Facebook-এর শুরু করা meta ট্যাগের নিয়ম (og:title, og:image…), যা দিয়ে লিংক শেয়ারের কার্ড তৈরি হয়।
robots.txt আর noindex-এর পার্থক্য? — robots.txt crawl আটকায়, noindex সূচিপত্রে রাখা আটকায়; noindex কাজ করতে crawl করতে দিতে হয়।

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিয়ে নিজে কিছুক্ষণ ভাবুন — তারপর “→ উত্তর” চাপুন। এগুলো আপনাকে ট্যাগ-মুখস্থকারী থেকে সিস্টেম-চিন্তক বানাবে।

প্র ০১একসময় সবাই meta keywords লিখত — সার্চ ইঞ্জিন এটিকে উপেক্ষা করা শুরু করল কেন?

১৯৯০-এর দশকের মাঝামাঝি প্রথম দিকের সার্চ ইঞ্জিনগুলোর (যেমন AltaVista, Infoseek) কাছে একটি পাতা বোঝার উপায় ছিল সীমিত। পাতার লেখা আর লেখকের নিজের দেওয়া তথ্য — এই দুটিই ছিল প্রধান ভরসা। তাই meta keywords বেশ গুরুত্ব পেত: লেখক নিজেই বলে দিচ্ছেন পাতাটি কোন বিষয়ে।

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

১৯৯৮ সালে Google এল একেবারে অন্য চিন্তা নিয়ে — PageRank: কোন পাতার দিকে কত ভালো পাতা লিংক দিয়েছে। অর্থাৎ পাতার নিজের দাবি নয়, অন্যদের “ভোট”। পরে সেটিও কেনাবেচা আর লিংক-খামারে অপব্যবহার হয়েছে, আর Google আরও শত শত সংকেত যোগ করেছে। কিন্তু meta keywords আর কখনো ফেরেনি — ২০০৯ সালে Google আনুষ্ঠানিকভাবে লিখে জানায় যে ওয়েব র‍্যাংকিংয়ে তারা এটি ব্যবহার করে না।

এর পেছনে অর্থনীতির একটি বিখ্যাত নীতি কাজ করছে — Goodhart's law: “কোনো মাপকাঠি যখন লক্ষ্য হয়ে যায়, তখন সেটি আর ভালো মাপকাঠি থাকে না।” পরীক্ষায় শুধু মুখস্থ যাচাই হলে ছাত্ররা বোঝা বাদ দিয়ে মুখস্থ করে; ঠিক তেমনি keyword গুনে র‍্যাংকিং হলে মানুষ keyword ঠাসে। আজও description আর structured data নিয়ে একই লড়াই চলছে — তাই সার্চ ইঞ্জিন সেগুলো পাতার দৃশ্যমান লেখার সাথে মিলিয়ে দেখে।

মূল উপলব্ধি: যে metadata পাতার সত্যিকারের বিষয়বস্তুর সাথে মেলে না, তা দীর্ঘমেয়াদে মূল্যহীন। সৎ বর্ণনা লিখুন — যন্ত্রগুলো শেষ পর্যন্ত ভেতরের লেখাই পড়ে।

প্র ০২আমি নিজে title লিখে দিলাম, তবু Google ফলাফলে অন্য শিরোনাম দেখায় — Google-এর এই অধিকার কেন, আর আমি কী করতে পারি?

Google-এর চোখে ফলাফলের পাতাটি তার নিজের পণ্য, আর সেই পণ্যের ক্রেতা খোঁজকারী — ওয়েবসাইটের মালিক নন। খোঁজকারী যদি ভুল বা অস্পষ্ট শিরোনাম দেখে ভুল পাতায় যান, ক্ষতি Google-এর। তাই অনেক বছর ধরেই Google কখনো কখনো <title> বদলে দেখাত, আর ২০২১ সালের আগস্টে তারা এই ব্যবস্থা বড় আকারে বদলায় এবং নাম দেয় “title link”: শিরোনাম বানাতে পাতার <title> ছাড়াও h1, পাতার বড় লেখা, অন্য সাইটের লিংকের লেখা — সব বিবেচনা করা হয়। শুরুতে অনেক সাইটের মালিক অভিযোগ করেন, পরে Google কিছু সংশোধনও আনে।

কখন Google সবচেয়ে বেশি বদলায়? তাদের নিজের নথি অনুযায়ী মূলত এই ক্ষেত্রগুলোতে:

title নেই, বা “Home”, “Untitled”-এর মতো অর্থহীন;
অনেক পাতায় হুবহু একই title (টেমপ্লেটের দোষ);
keyword ঠেসে দেওয়া, বা এত লম্বা যে কেটে গেলে অর্থ থাকে না;
পুরোনো তথ্য — যেমন title-এ “২০২৩ ভর্তি” অথচ পাতায় ২০২৬-এর তথ্য;
title-এর সাথে পাতার আসল বিষয় বা h1-এর মিল নেই।

description-এর ক্ষেত্রে বদলানো আরও স্বাভাবিক। Google snippet বানায় খোঁজের শব্দ দেখে। কেউ “জামদানি দাম” খুঁজলে পাতার দামের অংশটি দেখানোই বেশি কাজের, আপনার সাধারণ description নয়। তাই একই পাতার জন্য দুই রকম খোঁজে দুই রকম snippet আসতেই পারে। চাইলে data-nosnippet attribute বা max-snippet robots নির্দেশ দিয়ে কিছুটা নিয়ন্ত্রণ করা যায়, তবে সাধারণত দরকার পড়ে না।

আপনার করণীয় তাই সোজা: প্রতিটি পাতার আলাদা, সংক্ষিপ্ত, সৎ title; তার সাথে মেলানো h1; আর এমন description, যা পাতার বিষয়ের সত্যিকারের সারাংশ।

মূল উপলব্ধি: head-এর metadata একটি প্রস্তাব, আদেশ নয়। যে প্রস্তাব খোঁজকারীর জন্য ভালো, Google সাধারণত সেটিই রাখে।

প্র ০৩পাতার ছবি বদলালাম, তবু Facebook আর WhatsApp-এ পুরোনো কার্ড আসে — ক্যাশ এখানে কেন এত শক্ত, আর এর থেকে কী শিখি?

প্রতিদিন কোটি কোটি লিংক শেয়ার হয়। প্রতিটি শেয়ারে যদি Facebook আপনার সার্ভারে গিয়ে পাতা পড়ত, ছবি নামাত — Facebook-এর খরচ বাড়ত, আর একটি ভাইরাল পোস্টে আপনার ছোট সার্ভার মুহূর্তে বসে যেত। তাই প্রথমবার পড়ার পর কার্ডের তথ্য cache-এ রেখে দেওয়া হয়। এটি উভয় পক্ষের জন্যই ভালো — যতক্ষণ না আপনি কিছু বদলান।

Open Graph নিজেই এই বাস্তবতা থেকে জন্ম। ২০১০ সালে Facebook যখন এটি প্রকাশ করে, তাদের লক্ষ্য ছিল যেকোনো ওয়েবপাতাকে তাদের “social graph”-এর একটি বস্তু বানানো — একটি সিনেমা, একটি খবর, একটি পণ্য। আগে Facebook পাতার লেখা থেকে অনুমান করত, ফল হতো এলোমেলো — লোগোর বদলে বিজ্ঞাপনের ছবি। og ট্যাগ দিয়ে পাতার মালিক নিজেই বলে দেন “আমার কার্ড এমন হবে”। নিয়মটি খোলা হওয়ায় পরে অন্য সব অ্যাপ এটি গ্রহণ করে।

কিন্তু প্রতিটি অ্যাপের ক্যাশ আলাদা, নিয়মও আলাদা:

Facebook: Sharing Debugger-এ “Scrape Again” চাপলে নতুন করে পড়ে। একই সাথে এটি দেখায় কোন og ট্যাগ পেয়েছে, কোনটি পায়নি — শেখার জন্য দারুণ টুল।
LinkedIn: Post Inspector একই কাজ করে।
WhatsApp: সাধারণত প্রেরকের ফোন নিজেই কার্ড বানায়, আর ক্যাশ পরিষ্কারের সরাসরি টুল নেই। তাই প্রচলিত কৌশল হলো ছবির ঠিকানাই বদলে দেওয়া (share-v2.jpg) বা পাতার ঠিকানায় একটি ছোট query (?v=2) যোগ করা।

এই “ঠিকানা বদলে ক্যাশ এড়ানো” কৌশলটি ওয়েবের সব জায়গায় আছে। এই সাইটের নিজের CSS-এর লিংকেই দেখবেন lesson.css?v=20261024 — ব্রাউজার CSS কয়েক দিন ক্যাশে রাখে, তাই ফাইল বদলালে নম্বরটিও বদলানো হয়, আর ব্রাউজার নতুন ফাইল আনে।

মূল উপলব্ধি: ক্যাশ গতি আর খরচ বাঁচায়, বিনিময়ে “সর্বশেষ তথ্য” দেরিতে পৌঁছায়। কম্পিউটার বিজ্ঞানে একটি পুরোনো ঠাট্টা আছে — সবচেয়ে কঠিন কাজ দুটি: জিনিসের নাম দেওয়া আর ক্যাশ বাতিল করা। শেয়ার-কার্ড তার প্রতিদিনের উদাহরণ।

প্র ০৪ডেভেলপাররা এত বছর user-scalable=no লিখত কেন — আর আজ একে ভুল বলা হয় কেন?

viewport meta এসেছিল ২০০৭ সালে, প্রথম iPhone-এর Safari-র সাথে — Apple-এর নিজের আবিষ্কার, পরে অন্য ব্রাউজারগুলো নকল করে। শুরু থেকেই এতে zoom নিয়ন্ত্রণের অপশন ছিল (user-scalable, maximum-scale). ডেভেলপাররা এগুলো ব্যবহার করতেন তিনটি বাস্তব কারণে:

ট্যাপের দেরি: পুরোনো মোবাইল ব্রাউজার একবার ট্যাপের পর প্রায় ৩০০ মিলিসেকেন্ড অপেক্ষা করত — দ্বিতীয় ট্যাপ আসে কি না (double-tap zoom) দেখতে। zoom বন্ধ করলে এই দেরি চলে যেত, অ্যাপ “দ্রুত” লাগত।
ফর্মে নিজে নিজে zoom: iPhone-এ ছোট লেখার ইনপুটে চাপলে পাতা বড় হয়ে যায়, ফিরে আসে না।
“অ্যাপের মতো” অনুভূতি: ডিজাইনাররা চাইতেন ওয়েবপাতা নেটিভ অ্যাপের মতো স্থির থাকুক।

কিন্তু এর দাম দিতেন অন্য মানুষ। কম দৃষ্টিশক্তির মানুষের কাছে zoom কোনো বিলাসিতা নয় — পড়ার একমাত্র উপায়। WCAG-এর “Resize Text” নীতি (Level AA) বলে লেখা ২০০% পর্যন্ত বড় করা গেলেও পাতা ব্যবহারযোগ্য থাকতে হবে। ব্রাউজারগুলোও বদলায়: ২০১৬ সালে iOS 10-এর Safari ঘোষণা দিয়ে user-scalable=no উপেক্ষা করা শুরু করে, যাতে মানুষ সবসময় চিমটি দিয়ে বড় করতে পারেন। পরে ব্রাউজারগুলো এটাও ঠিক করে যে width=device-width থাকলেই ট্যাপের সেই দেরি আর থাকবে না — অর্থাৎ zoom বন্ধ করার প্রধান কারণটাই উঠে গেল। ফর্মের zoom-এর সমাধান CSS-এ: ইনপুটের লেখা অন্তত 16px.

তবু সব ব্রাউজার এই নিষেধ উপেক্ষা করে না, আর পুরোনো টেমপ্লেট ও AI-এর মাধ্যমে লাইনটি আজও ছড়ায়। Lighthouse তাই একে আলাদা করে ধরে: user-scalable=no বা ৫-এর কম maximum-scale পেলেই অ্যাক্সেসিবিলিটি স্কোর কমে।

মূল উপলব্ধি: একসময় যা “ভালো অভ্যাস” ছিল, তা প্রায়ই একটি পুরোনো প্রযুক্তিগত সীমাবদ্ধতার সমাধান। সীমাবদ্ধতা চলে গেলে অভ্যাসটি পুনর্বিবেচনা করুন — আর কোনো সিদ্ধান্তের দাম কে দিচ্ছেন, সবসময় সেটা জিজ্ঞেস করুন।

প্র ০৫JSON-LD লিখলে কি পাতা ওপরে ওঠে? AI-সার্চের যুগে structured data-র মূল্য কতটা?

সরাসরি উত্তর: না, structured data নিজে র‍্যাংকিং বাড়ায় না — Google-ও এটি বহুবার বলেছে। এটি সার্চ ইঞ্জিনকে দুটি জিনিস দেয়: পাতার বিষয় নিয়ে নিশ্চয়তা (এই “৫০০” কি দাম, না পৃষ্ঠাসংখ্যা?), আর rich result দেখানোর যোগ্যতা। rich result-এ ক্লিক বেশি আসতে পারে, তাই পরোক্ষ লাভ আছে — কিন্তু দেখানো হবে কি না, সেই সিদ্ধান্ত পুরোপুরি সার্চ ইঞ্জিনের।

schema.org-এর জন্ম ২০১১ সালে, যখন Google, Microsoft আর Yahoo বুঝল যে প্রতিটি সার্চ ইঞ্জিনের আলাদা নিয়ম ওয়েবমাস্টারদের জন্য যন্ত্রণা; পরে Yandex-ও যোগ দেয়। শুরুতে লেখা হতো Microdata দিয়ে — HTML ট্যাগের ভেতরে attribute ছড়িয়ে। পরে JSON-LD জনপ্রিয় হয়, কারণ এটি পাতার HTML থেকে আলাদা একটি ব্লক — ডিজাইন বদলালেও ভাঙে না, আর সার্ভার থেকে তৈরি করা সহজ।

কিন্তু যত বেশি সুবিধা, তত বেশি অপব্যবহার। বানানো রেটিং, পাতায় নেই এমন FAQ, নকল দাম — এসব ঠেকাতে Google-এর নিয়ম কড়া হয়েছে, আর ধরাও পড়ে। ২০২৩ সালে FAQ আর HowTo-র বিশেষ চেহারা সীমিত করাটাও এরই অংশ: সব সাইটে এগুলো দেখালে ফলাফলের পাতা ভিড়ে ভরে যায়, আর অনেক সাইট এগুলো লিখছিল শুধু বেশি জায়গা দখলের জন্য।

AI-সার্চের যুগে কী বদলাল? AI-চালিত সার্চ আর চ্যাট-টুলগুলোও শেষ পর্যন্ত ওয়েবের পাতা পড়ে। পরিষ্কার কাঠামো, সঠিক structured data আর সৎ metadata তাদের জন্যও পাতা বোঝা সহজ করে — এ নিয়ে বিশেষজ্ঞরা মোটামুটি একমত। ২০২৪ সালে প্রস্তাবিত llms.txt-এর মতো কিছু নতুন ধারণাও এসেছে (এই সাইটেও একটি আছে), তবে এগুলো এখনো কোনো মানক নয়, আর বড় সার্চ ইঞ্জিনগুলো ব্যবহার করে বলে নিশ্চিত ঘোষণাও নেই। তাই নতুন ফ্যাশনের পেছনে না ছুটে মূল জিনিসগুলো ঠিক রাখাই নিরাপদ।

মূল উপলব্ধি: structured data হলো যন্ত্রের জন্য অনুবাদ — অনুবাদ যত নিখুঁতই হোক, মূল লেখা দুর্বল হলে কাজ হয় না। আর মিথ্যা অনুবাদ একদিন ধরা পড়েই।

অনুশীলন

প্রথম দুটিতে কোড লিখতে হবে না — দেখা আর ভাবাই আসল কাজ। শেষ দুটিতে ছোট head বা JSON লিখবেন।

একটি পরিচিত সাইটের head পড়ুন: যেকোনো বড় খবরের সাইট বা অনলাইন দোকানের একটি পণ্যের পাতা খুলে Ctrl+U চাপুন (মোবাইলে ঠিকানার আগে view-source: লিখুন)। Ctrl+F দিয়ে খুঁজুন: viewport, canonical, og:image, ld+json. কোনটি আছে, কোনটি নেই? og:image-এর ঠিকানাটি নতুন ট্যাবে খুলে ছবির মাপ দেখুন।

বড় সাইটে সাধারণত চারটিই পাবেন। og:image প্রায়ই 1200×630 বা কাছাকাছি অনুপাতের, অনেক সময় শিরোনামসহ আলাদা করে বানানো ছবি। খবরের সাইটে JSON-LD-তে সাধারণত NewsArticle বা Article, দোকানে Product থাকে। অনেক সাইটে এখনো meta keywords দেখবেন — মনে রাখুন, Google এটি উপেক্ষা করে। আর viewport-এ user-scalable=no পেলে সেটি একটি অ্যাক্সেসিবিলিটি ভুল, বড় সাইটেও।
ভুল খুঁজুন: একটি head-এ এগুলো আছে — (ক) <title>-এর আগে একটি <img src="logo.png">, তার পরে charset ও canonical (খ) robots.txt-এ Disallow: /offer/ আর ওই পাতায় noindex (গ) og:image-এ /img/eid.jpg (ঘ) বাংলা ও ইংরেজি পাতার মধ্যে শুধু বাংলা পাতায় hreflang. প্রতিটির সমস্যা কী?

(ক) head-এ img অবৈধ — parser ওখানেই head শেষ ধরে, তাই পরের charset আর canonical body-তে চলে যায়; charset হয়তো প্রথম 1024 byte-এর বাইরেও চলে যায়। লোগো body-তে রাখুন, charset সবার আগে। (খ) robots.txt আটকানোয় crawler পাতায় ঢুকতেই পারে না, তাই noindex দেখে না; সূচিপত্র থেকে বাদ দিতে Disallow সরিয়ে শুধু noindex রাখুন। (গ) root-relative ঠিকানা — অনেক অ্যাপ বোঝে না; https:// সহ পূর্ণ URL দিন। (ঘ) hreflang দুই দিক থেকে না থাকলে Google উপেক্ষা করতে পারে; ইংরেজি পাতাতেও একই তালিকা দিন।
সাইনবোর্ড লিখুন: রাজশাহীর একটি আমের অনলাইন দোকানের “ল্যাংড়া আম” পাতার জন্য একটি title (আসল কথা আগে) আর একটি ১২০–১৫০ অক্ষরের সৎ description লিখুন। তারপর অংশ ৩-এর নকল সার্চ-ফলাফলের এডিটরে বসিয়ে দেখুন কেমন দেখায়।
একটি সম্ভাব্য উত্তর — এডিটরের <title> আর description লাইন দুটি বদলে দিন:
```
<title>ল্যাংড়া আম — রাজশাহীর বাগান থেকে সরাসরি | আমবাড়ি</title>
<meta name="description" content="রাজশাহীর বাগান থেকে পেড়ে ২৪ ঘণ্টার মধ্যে কুরিয়ারে পাঠানো ল্যাংড়া আম। কেজিপ্রতি দাম, মৌসুমের সময় আর ঢাকায় পৌঁছানোর খরচ দেখুন।">
```
খেয়াল করুন: পণ্যের নাম সবার আগে, দোকানের নাম শেষে; description-এ খোঁজকারী যা জানতে চান (কোথা থেকে, কত দিনে, দাম কোথায়) — কোনো “সেরা! সস্তা! ১০০% গ্যারান্টি!” নেই। “কার্বাইড-মুক্ত” লিখতে চাইলে সেটি সত্য হতে হবে, আর পাতাতেও তার প্রমাণ থাকা উচিত।
JSON-LD লিখুন: “হোম › ব্লগ › বর্ষায় ঢাকার যানজট” — এই breadcrumb-এর জন্য একটি BreadcrumbList লিখুন (ডোমেইন: https://blog.example). অংশ ৭-এর এডিটরে পেস্ট করে যাচাই করুন।
```
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "হোম", "item": "https://blog.example/" },
    { "@type": "ListItem", "position": 2, "name": "ব্লগ", "item": "https://blog.example/blog/" },
    { "@type": "ListItem", "position": 3, "name": "বর্ষায় ঢাকার যানজট" }
  ]
}
```
position ১ থেকে ক্রমানুসারে; শেষ ধাপটি বর্তমান পাতা, তাই তার item ঠিকানা না দিলেও চলে। কোথাও শেষে বাড়তি কমা নেই — থাকলে এডিটরের আউটপুট “JSON ভুল” বলবে। আর পাতায় দৃশ্যমান breadcrumb-ও যেন একই কথা বলে।

নিজেকে যাচাই করুন

ভুল হলে কারণসহ ব্যাখ্যা পাবেন, আবার চেষ্টাও করতে পারবেন।

ক্রমএকটি নতুন পাতা সার্চ ফলাফলে আসার ধাপগুলো সঠিক ক্রমে সাজান (▲▼ চেপে সরান)

🗺️ লিংক বা sitemap থেকে পাতার ঠিকানা খুঁজে পাওয়া
🚦 robots.txt দেখে ঢোকার অনুমতি যাচাই
📥 পাতা ডাউনলোড করে render করা
📚 robots meta আর canonical দেখে index-এ রাখা
🔎 খোঁজার সময় সাজিয়ে title link আর snippet দেখানো

HTML নিয়ম অনুযায়ী <meta charset> ঘোষণাটি ফাইলের কোথায় থাকতে হবে?

body-র শুরুতে
ফাইলের প্রথম 1024 byte-এর মধ্যে, head-এর শুরুতে
title-এর ঠিক পরে, যেকোনো জায়গায়
যেকোনো জায়গায়, কোনো নিয়ম নেই

viewport meta-তে user-scalable=no লেখার সবচেয়ে বড় সমস্যা কী?

পাতা ধীরে লোড হয়
Google পাতাটিকে index থেকে বাদ দেয়
মানুষ zoom করে লেখা বড় করতে পারেন না — অ্যাক্সেসিবিলিটি ভাঙে
পাতার চওড়া ফোনের চেয়ে বড় হয়ে যায়

Google ওয়েব র‍্যাংকিংয়ে <meta name="keywords">-কে কীভাবে দেখে?

সবচেয়ে গুরুত্বপূর্ণ সংকেত হিসেবে
যত বেশি শব্দ, তত ভালো র‍্যাংকিং
description না থাকলে keywords দেখায়
উপেক্ষা করে — র‍্যাংকিংয়ে ব্যবহার করে না

Facebook-এ বড় ছবিসহ শেয়ার-কার্ডের জন্য og:image-এর কোন মাপটি সাধারণত সুপারিশ করা হয়?

1200×630 পিক্সেল
32×32 পিক্সেল
180×180 পিক্সেল
630×1200 পিক্সেল

একটি পণ্যের পাতা ?color=red আর ?ref=fb সহ কয়েকটি ঠিকানায় খোলে। সার্চ ইঞ্জিনকে আসল ঠিকানা জানাতে কোনটি ব্যবহার করবেন?

<meta name="robots" content="noindex">
<link rel="canonical" href="…">
<link rel="alternate" hreflang="bn">
<meta property="og:url">

একটি পাতাকে Google-এর সূচিপত্র থেকে নিশ্চিতভাবে বাদ রাখতে কোনটি ঠিক?

শুধু robots.txt-এ Disallow দেওয়া
robots.txt-এ Disallow আর পাতায় noindex — দুটোই
crawl করতে দেওয়া, আর পাতার head-এ noindex দেওয়া
meta keywords ফাঁকা রাখা

শব্দকোষ

লেখার মধ্যে ডটেড দাগ দেওয়া শব্দে মাউস রাখুন বা চাপুন — অর্থ দেখাবে। এই পর্বের সব নতুন শব্দ এখানে একসাথে:

মনে রাখুন

head = অদৃশ্য পরিচয়পত্র — ব্রাউজার, সার্চ ইঞ্জিন, সোশ্যাল অ্যাপ আর screen reader এখান থেকে পাতা চেনে; অবৈধ element ঢুকলে head আগেভাগে শেষ হয়ে যায়।
শুরুতে charset="utf-8", তারপর width=device-width, initial-scale=1 — zoom কখনো বন্ধ নয়।
title আর description প্রতি পাতায় আলাদা ও সৎ; Google বদলাতে পারে। canonical আসল ঠিকানা, noindex সূচিপত্র থেকে বাদ, hreflang ভাষার সংস্করণ, robots.txt crawl-এর নিয়ম, sitemap ঠিকানার তালিকা।
Open Graph (og:title, og:description, og:image 1200×630 পূর্ণ URL, og:url, og:type) + twitter:card; কার্ড ক্যাশ হয় — Sharing Debugger দিয়ে নতুন করে পড়ান।
JSON-LD যন্ত্রকে বোঝায়, র‍্যাংক কেনে না; শুধু দৃশ্যমান সত্য তথ্য। SEO = ভালো বিষয়বস্তু + পরিষ্কার কাঠামো; meta keywords মৃত।

পরের পর্বে: charset-এর সেই এক লাইনের পেছনের পুরো জগৎ — ওয়েবে বাংলা: UTF-8 আর Unicode, lang attribute, বাংলা ফন্ট বাছাই, যুক্তাক্ষর আর বাংলা লেখার টাইপোগ্রাফি।

head, meta, SEO আর সোশ্যাল শেয়ারিং (Open Graph)