SEO — metadata, sitemap, structured data আর Open Graph

১ · Crawler কী দেখে — rendering আর SEO

“বাজারঘর”-এর মিনিকেট চালের পাতা তৈরি। কেউ Google-এ “মিনিকেট চাল ৫ কেজি দাম” লিখলেন। পাতাটি কি সেখানে আসবে? কেউ পাতার লিংক WhatsApp-এ পাঠালেন। সুন্দর একটি কার্ড আসবে, নাকি শুধু খালি লিংক? এই দুই প্রশ্নের উত্তরই ঠিক হয় পাতার প্রথম HTML-এ, যা আপনার server পাঠায়।

HTML-এর <head>-এর মূল জিনিস, যেমন title, description, canonical, Open Graph, আগেই শিখেছেন HTML & CSS কোর্সের head আর SEO পর্বে। এখানে আবার শেখানো হবে না। এই পর্বের প্রশ্ন অন্য: হাজার পণ্যের পাতায় এগুলো Next.js দিয়ে ডেটা থেকে কীভাবে বানাবেন, আর বানানোর পর কীভাবে প্রমাণ করবেন যে ঠিক হয়েছে।

পর্ব ৩-এ দেখেছেন, CSR পাতা JavaScript ছাড়া প্রায় ফাঁকা। Google-এর নথি অনুযায়ী Googlebot পাতা আনে, তারপর একটি সারিতে রেখে headless Chromium-এ JavaScript চালিয়ে render করে, তারপর index করে। নথিটি তবু বলে, server-side rendering বা pre-rendering এখনো ভালো ধারণা, কারণ এতে ব্যবহারকারী আর crawler দুজনেরই গতি বাড়ে, আর সব bot JavaScript চালাতে পারে না। অন্য search engine, link preview-এর bot বা AI-এর crawler কতটা JavaScript চালায়, তা প্রত্যেকের নিজের নীতি, আর বদলাতে পারে। তাই নিরাপদ নিয়ম একটিই: যা খুঁজে পাওয়া দরকার, তা প্রথম HTML-এ রাখুন। SSR, SSG আর ISR-এর কোনটি কখন, তা আসবে পর্ব ৫৫-এ।

Next.js এখানে একটি সুবিধা দেয়। Metadata তৈরি হয় server-এ, Server Component-এ, তাই প্রথম HTML-এ থাকে। Next.js ১৫.২ থেকে আরেকটি আচরণ এসেছে: streaming metadata. generateMetadata ধীর হলে Next.js আগে পাতার কাঠামো পাঠায়, পরে metadata <body>-এ জুড়ে দেয়। Docs বলে, যে bot পুরো DOM দেখে (যেমন Googlebot) সে এটি ঠিক পড়ে। আর যে bot JavaScript চালায় না, যেমন facebookexternalhit, তাকে Next.js User-Agent দেখে চেনে আর তার জন্য metadata <head>-এই রাখে। এই তালিকা বদলানো যায় htmlLimitedBots option দিয়ে। এমন bot-কে বলে HTML-limited bot.

আমাদের ল্যাবে /category/rice?brand=x&sort=price একটি dynamic পাতা। সাধারণ curl আর facebookexternalhit/1.1 User-Agent, দুটিতেই title আর robots ট্যাগ <head>-এ এসেছে, কারণ আমাদের generateMetadata সাথে সাথে শেষ হয়। Database ধীর হলে সাধারণ browser-এর জন্য এটি বদলাতে পারে। তাই যাচাইয়ের সময় দুই রকম User-Agent দিয়েই দেখবেন।

২ · Metadata API — layout-এ নিয়ম, title template আর merge

Next.js-এর App Router-এ <head> হাতে লেখা হয় না। লেখা হয় একটি Metadata API দিয়ে: layout.tsx বা page.tsx থেকে একটি metadata object বা generateMetadata function export করবেন, Next.js সেটি পড়ে ট্যাগ বানাবে। পুরোনো tutorial-এ next/head বা next-seo package দেখবেন; সেগুলো মূলত Pages Router-এর যুগের পথ। Docs অনুযায়ী এই export শুধু Server Component-এ চলে, আর একই segment-এ metadata আর generateMetadata দুটি একসাথে রাখা যায় না।

বাজারঘরের root layout. এখানে পুরো সাইটের নিয়ম:

import type { Metadata } from 'next';
import { SITE } from '@/lib/products';   // 'https://bazarghar.example'

export const metadata: Metadata = {
  metadataBase: new URL(SITE),
  title: {
    template: '%s | বাজারঘর',
    default: 'বাজারঘর — ঘরে বসে বাজার',
  },
  description: 'চাল, ডাল, তেল আর নিত্যপণ্য অনলাইনে অর্ডার করুন।',
  openGraph: { siteName: 'বাজারঘর', locale: 'bn_BD', type: 'website' },
  twitter: { card: 'summary_large_image' },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="bn">
      <body>{children}</body>
    </html>
  );
}

তিনটি নিয়ম মনে রাখুন, সবই Next.js-এর docs আর আমাদের run থেকে:

• title.template-এর %s-এ child পাতার title বসে। Template শুধু child segment-এ খাটে, যে layout-এ লেখা সেখানে নয়। তাই default দিতে হয়। কোনো পাতা template এড়াতে চাইলে title: { absolute: '…' }.
• metadataBase থাকলে canonical বা ছবির URL আপেক্ষিক (/products/…) লেখা যায়, Next.js পুরো URL বানায়। না থাকলে আপেক্ষিক URL-এ build error.
• Merge অগভীর (shallow). Layout থেকে পাতা পর্যন্ত object মেশে, কিন্তু একই key আবার এলে পুরো মান বদলে যায়। পাতা openGraph দিলে layout-এর openGraph.siteName হারিয়ে যায়। তাই পণ্যের পাতায় আমরা siteName আবার লিখেছি।

এবার দেখুন, একটি পণ্যের ডেটা কীভাবে ধাপে ধাপে <head> হয়ে যায়। প্রতিটি মান ল্যাবের আসল run-এর।

{ slug: 'miniket-chal-5kg',
  nameBn: 'মিনিকেট চাল ৫ কেজি',
  descBn: 'ঝরঝরে মিনিকেট চাল, ৫ কেজির প্যাকেট। …',
  priceBdt: 450, inStock: true }

title: 'মিনিকেট চাল ৫ কেজি'
alternates.canonical: '/products/miniket-chal-5kg'
alternates.languages: { 'bn-BD', en, 'x-default' }
openGraph: { title, description, url, siteName … }

'%s | বাজারঘর'  +  'মিনিকেট চাল ৫ কেজি'
→ মিনিকেট চাল ৫ কেজি | বাজারঘর
og:title-এ template বসে না: 'মিনিকেট চাল ৫ কেজি'

'/products/miniket-chal-5kg'
→ https://bazarghar.example/products/miniket-chal-5kg
'/en/products/…' → https://bazarghar.example/en/products/…

<title>মিনিকেট চাল ৫ কেজি | বাজারঘর</title>
<link rel="canonical" href="https://bazarghar.example/products/miniket-chal-5kg"/>
<link rel="alternate" hrefLang="en" href="…/en/products/miniket-chal-5kg"/>
<meta property="og:image" content="…/opengraph-image?b91b43274e5c72e8"/>

৩ · generateMetadata — async params, canonical আর hreflang

প্রতিটি পণ্যের পাতা আলাদা, তাই সেখানে static object নয়, generateMetadata. Next.js 15 থেকে params আর searchParams একটি Promise, আর Next.js 16-এ পুরোনো synchronous পথটি আর চলে না। তাই await params লিখতে হবে। ২০২৪-এর আগের tutorial-এ params.slug সরাসরি দেখলে বুঝবেন সেটি পুরোনো।

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getProduct, products } from '@/lib/products';

type Props = { params: Promise<{ slug: string }> };

export function generateStaticParams() {
  return products.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const p = await getProduct(slug);
  if (!p) notFound();
  return {
    title: p.nameBn,
    description: p.descBn,
    alternates: {
      canonical: `/products/${p.slug}`,
      languages: {
        'bn-BD': `/products/${p.slug}`,
        en: `/en/products/${p.slug}`,
        'x-default': `/products/${p.slug}`,
      },
    },
    openGraph: {
      siteName: 'বাজারঘর', locale: 'bn_BD', type: 'website',
      title: p.nameBn, description: p.descBn, url: `/products/${p.slug}`,
    },
  };
}

এখানে কয়েকটি সিদ্ধান্ত আছে।

• একই ডেটা দুবার আনা কি খরচ? generateMetadata আর পাতা দুজনেই getProduct ডাকে। Docs বলে, একই fetch এই দুই জায়গায় memoize হয়; fetch না হলে React-এর cache দিয়ে মুড়ে দিতে পারেন। ডেটা আনা আর cache-এর পুরো আলোচনা পর্ব ৫৩-এ।
• পণ্য না থাকলে notFound(). এটি generateMetadata-এর ভেতরেও চলে, আর server আসল 404 দেয়। ধাপ ৮-এ দেখবেন কেন এটি জরুরি।
• Canonical মানে “এই বিষয়বস্তুর আসল ঠিকানা এটি”। একই পণ্য ?utm_source=fb বা ?ref=home দিয়েও খোলে, কিন্তু canonical থাকে একটিই, query ছাড়া। Google-এর নথিতে canonical একটি জোরালো সংকেত, কিন্তু আদেশ নয়; Google নিজে অন্য URL বেছে নিতে পারে।
• hreflang বলে, একই পাতার কোন ভাষার রূপ কোথায়। bn-BD মানে বাংলাদেশের বাংলা, en ইংরেজি, আর x-default হলো ভাষা না মিললে কোনটি দেখাতে হবে। Google-এর নথি অনুযায়ী প্রতিটি রূপকে অন্যগুলোর দিকে ফিরতি লিংক দিতে হয়, নিজেরটিসহ। না হলে সংকেত উপেক্ষিত হতে পারে। বাংলা আর ইংরেজি route কীভাবে সাজাবেন, তা পর্ব ৫৯-এ.

next build-এর আসল route table (সত্যিকারের run, Next.js 16.4.4, পথ ছাঁটা):

~/bazarghar$ npx next build
▲ Next.js 16.4.4 (Turbopack)
✓ Compiled successfully in 549ms
  Finished TypeScript in 1124ms ...
✓ Generating static pages using 14 workers (14/14) in 523ms

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /category/[cat]
├   /en/products/[slug]
│ ├ ● /en/products/miniket-chal-5kg
│ ├ ● /en/products/moshur-dal-1kg
│ └ ● /en/products/soybean-tel-2l
├ ƒ /og-nofont
├ ƒ /og-test
├   /products/[slug]
│ ├ ● /products/miniket-chal-5kg
│ ├ ● /products/moshur-dal-1kg
│ └ ● /products/soybean-tel-2l
├ ƒ /products/[slug]/opengraph-image
├ ○ /robots.txt
├ ƒ /search
├ ○ /sitemap.xml
└ ƒ /soft404/[slug]

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses generateStaticParams)
ƒ  (Dynamic)  server-rendered on demand

পণ্যের পাতা ●, অর্থাৎ build-এর সময়েই HTML আর metadata তৈরি। robots.txt আর sitemap.xml ○, static ফাইল। /search আর /category/[cat] ƒ, কারণ এরা searchParams পড়ে। এবার next start চালিয়ে curl-এ আসল head (সত্যিকারের run, charset আর viewport বাদ):

~/bazarghar$ curl -s http://127.0.0.1:47658/products/miniket-chal-5kg
<title>মিনিকেট চাল ৫ কেজি | বাজারঘর</title>
<meta name="description" content="ঝরঝরে মিনিকেট চাল, ৫ কেজির প্যাকেট। ঢাকার ভেতরে পরের দিন ডেলিভারি।"/>
<link rel="canonical" href="https://bazarghar.example/products/miniket-chal-5kg"/>
<link rel="alternate" hrefLang="bn-BD" href="https://bazarghar.example/products/miniket-chal-5kg"/>
<link rel="alternate" hrefLang="en" href="https://bazarghar.example/en/products/miniket-chal-5kg"/>
<link rel="alternate" hrefLang="x-default" href="https://bazarghar.example/products/miniket-chal-5kg"/>
<meta property="og:title" content="মিনিকেট চাল ৫ কেজি"/>
<meta property="og:url" content="https://bazarghar.example/products/miniket-chal-5kg"/>
<meta property="og:site_name" content="বাজারঘর"/>
<meta property="og:locale" content="bn_BD"/>
<meta property="og:image" content="https://bazarghar.example/products/miniket-chal-5kg/opengraph-image?b91b43274e5c72e8"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="মিনিকেট চাল ৫ কেজি"/>
…

HTML-এ hrefLang লেখা বড় হাতের L দিয়ে; HTML attribute-এর নামে বড়-ছোট হাতের পার্থক্য নেই, তাই এতে সমস্যা নেই। এবার ইংরেজি পাতা। আসল run-এ একটি ভুল ধরা পড়ল:

~/bazarghar$ curl -s http://127.0.0.1:47658/en/products/miniket-chal-5kg
<title>Miniket Rice 5 kg | Bazarghar</title>
<meta name="description" content="চাল, ডাল, তেল আর নিত্যপণ্য অনলাইনে অর্ডার করুন।"/>
<link rel="canonical" href="https://bazarghar.example/en/products/miniket-chal-5kg"/>
<link rel="alternate" hrefLang="bn-BD" href="https://bazarghar.example/products/miniket-chal-5kg"/>
…

শিরোনাম ইংরেজি (title.absolute দিয়ে template এড়ানো), canonical নিজের দিকে, hreflang ঠিক। কিন্তু description এসেছে root layout থেকে, বাংলায়। ইংরেজি পাতা কোনো description দেয়নি, তাই merge-এর নিয়মে layout-এরটি থেকে গেছে। এ ধরনের ভুল চোখে পড়ে শুধু আসল HTML দেখলে। সমাধান: প্রতিটি locale-এর পাতায় নিজের description, অথবা locale-ভিত্তিক layout. পর্ব ৫৯-এ এর সাজানো পথ আসবে।

৪ · বাংলা শিরোনাম আর বিবরণের দৈর্ঘ্য — grapheme গোনা

Search ফলাফলে শিরোনাম লম্বা হলে কেটে যায়। কতটুকু দেখাবে, তা search engine ঠিক করে, সাধারণত পর্দায় পিক্সেলের প্রস্থ দেখে, অক্ষরের নির্দিষ্ট সংখ্যা দেখে নয়। তাই “৬০ অক্ষর” কোনো নিয়ম নয়, একটি কাজের বাজেট। কিন্তু বাংলায় “অক্ষর” গোনাই প্রথম সমস্যা। JavaScript-এর .length গোনে UTF-16 code unit, আর বাংলায় একটি চোখে-দেখা অক্ষরে কয়েকটি code point থাকে। “স্ট” আসলে স + হসন্ত + ট।

নিচের ব্লক বাজারঘরের আসল শিরোনাম আর বিবরণ তিনভাবে মাপে, আর দেখায় .length ধরে কাটলে কী হয়। চালিয়ে দেখুন।

const seg = new Intl.Segmenter('bn', { granularity: 'grapheme' });
const graphemes = (s) => [...seg.segment(s)].map((x) => x.segment);
const bytes = (s) => new TextEncoder().encode(s).length;

function cut(s, max) {
  const g = graphemes(s);
  return g.length <= max ? s : g.slice(0, max - 1).join('') + '…';
}

const title = 'মিনিকেট চাল ৫ কেজি | বাজারঘর';
const desc = 'ঝরঝরে মিনিকেট চাল, ৫ কেজির প্যাকেট। ঢাকার ভেতরে পরের দিন ডেলিভারি।';

for (const [name, s] of [['title', title], ['description', desc]]) {
  console.log(name, '| .length', s.length, '| graphemes', graphemes(s).length, '| UTF-8 bytes', bytes(s));
}

const word = 'স্টক';
console.log('slice(0,2):', JSON.stringify(word.slice(0, 2)), 'graphemes:', JSON.stringify(graphemes(word)));
console.log('cut by .length :', desc.slice(0, 20) + '…');
console.log('cut by grapheme:', cut(desc, 20));

// কাজের বাজেট (নিয়ম নয়): শিরোনাম ~60, বিবরণ ~155 grapheme
const BUDGET = { title: 60, description: 155 };
console.log('title ok:', graphemes(title).length <= BUDGET.title,
  '| description ok:', graphemes(desc).length <= BUDGET.description);

বাস্তবে এই পরীক্ষা কোথায় বসাবেন? generateMetadata-এ বিবরণ grapheme ধরে ছোট করুন, আর CI-তে একটি test রাখুন যা প্রতিটি পণ্যের শিরোনাম বাজেটের বাইরে গেলে সতর্ক করে। Test লেখা আসবে মডিউল ১১-এ।

৫ · sitemap.ts আর robots.ts — ফাইল কোডে বানানো

Sitemap হলো search engine-কে দেওয়া URL-এর তালিকা: “আমার এই পাতাগুলো আছে, এগুলো শেষ কবে বদলেছে।” robots.txt হলো দরজার নোটিশ: “এই পথগুলোতে ঢুকবেন না।” দুটিই সাইটের মূলে থাকে। Next.js-এ app/sitemap.ts আর app/robots.ts লিখলে সে এই দুটি ফাইল বানিয়ে দেয়।

import type { MetadataRoute } from 'next';
import { products, SITE } from '@/lib/products';

export default function sitemap(): MetadataRoute.Sitemap {
  const entries: MetadataRoute.Sitemap = [{ url: SITE, lastModified: '2026-10-30' }];
  for (const p of products) {
    const languages = {
      'bn-BD': `${SITE}/products/${p.slug}`,
      en: `${SITE}/en/products/${p.slug}`,
    };
    // প্রতিটি ভাষার URL নিজের <url> পায়, আর দুটিই একে অপরকে দেখায়
    for (const url of Object.values(languages)) {
      entries.push({ url, lastModified: p.updatedAt, alternates: { languages } });
    }
  }
  return entries;
}

import type { MetadataRoute } from 'next';
import { SITE } from '@/lib/products';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: '*', allow: '/', disallow: ['/cart', '/account/', '/api/'] },
    sitemap: `${SITE}/sitemap.xml`,
  };
}

আসল ফল (সত্যিকারের run, sitemap-এর শেষ অংশ ছাঁটা):

~/bazarghar$ curl -s http://127.0.0.1:47658/robots.txt
User-Agent: *
Allow: /
Disallow: /cart
Disallow: /account/
Disallow: /api/

Sitemap: https://bazarghar.example/sitemap.xml

~/bazarghar$ curl -s http://127.0.0.1:47658/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://bazarghar.example</loc>
<lastmod>2026-10-30</lastmod>
</url>
<url>
<loc>https://bazarghar.example/products/miniket-chal-5kg</loc>
<xhtml:link rel="alternate" hreflang="bn-BD" href="https://bazarghar.example/products/miniket-chal-5kg" />
<xhtml:link rel="alternate" hreflang="en" href="https://bazarghar.example/en/products/miniket-chal-5kg" />
<lastmod>2026-10-28</lastmod>
</url>
<url>
<loc>https://bazarghar.example/en/products/miniket-chal-5kg</loc>
…

প্রথম চেষ্টায় আমরা শুধু বাংলা URL-কে <url> দিয়েছিলাম, ইংরেজিটি ছিল শুধু xhtml:link-এ। Sitemap-এ hreflang-এর নিয়মে প্রতিটি ভাষার URL-এর নিজের <url> লাগে, তাই কোড বদলাতে হলো। এমন ভুলও ধরা পড়ে শুধু আসল ফাইল পড়লে। আরও কিছু কথা:

• lastmod সত্যি রাখুন। ডেটার updatedAt থেকে নিন, new Date() থেকে নয়। প্রতিবার build-এ “আজ বদলেছে” বললে সংকেতটির মূল্য থাকে না। changefreq আর priority Next.js নিতে পারে, তবে Google-এর নথি বলে Google এ দুটি উপেক্ষা করে।
• শুধু canonical, indexযোগ্য URL. Filter, খোঁজা, cart বা 404 পাতা sitemap-এ নয়।
• বড় সাইটে ভাগ। sitemaps.org-এর প্রোটোকল অনুযায়ী এক ফাইলে সর্বোচ্চ ৫০,০০০ URL আর ৫০ MB (চাপ দেওয়ার আগে)। Next.js-এ generateSitemaps দিয়ে ভাগ করা যায়; Next.js 16-এ সেখানে id-ও একটি Promise.
• sitemap.ts ডিফল্টে cache হয়, যদি না request-এর সময়ের কোনো API ব্যবহার করে। আমাদের table-এ তাই ○. পণ্য বদলালে নতুন build বা revalidate লাগবে।

Sitemap হাতে বানাতে গেলে সবচেয়ে সাধারণ ভুল XML-এর escaping. URL-এ & থাকলে XML-এ লিখতে হয় &, আর বাংলা slug percent-encode হয়। নিচের ব্লকে Node নিজেই একটি ছোট sitemap বানায়:

const SITE = 'https://bazarghar.example';
const escapeXml = (s) => s.replace(/[&<>"']/g, (c) =>
  ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c]);

const pages = [
  { path: '/products/miniket-chal-5kg', updated: '2026-10-28' },
  { path: '/products/চিনিগুঁড়া-চাল', updated: '2026-10-31' },
  { path: '/category/rice?page=2&per=48', updated: '2026-11-01' },
];

function sitemap(list) {
  const rows = list.map((p) => {
    const loc = new URL(p.path, SITE).href;   // বাংলা অক্ষর percent-encode হয়
    return `  <url><loc>${escapeXml(loc)}</loc><lastmod>${p.updated}</lastmod></url>`;
  });
  return ['<?xml version="1.0" encoding="UTF-8"?>',
    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
    ...rows, '</urlset>'].join('\n');
}

const xml = sitemap(pages);
console.log(xml);
console.log('bytes:', Buffer.byteLength(xml), '| raw & left:', /&(?!amp;|lt;|gt;|quot;|apos;)/.test(xml));

// sitemaps.org-এর সীমা: এক ফাইলে সর্বোচ্চ 50,000 URL
for (const n of [3, 50000, 120000]) {
  console.log(`${n} URLs -> ${Math.ceil(n / 50000)} sitemap file(s)`);
}

৬ · Structured data — Product আর BreadcrumbList-এর JSON-LD

শিরোনাম আর বিবরণ মানুষের ভাষা। কিন্তু “৪৫০” কি দাম, ওজন, নাকি পণ্যের কোড? Structured data যন্ত্রকে স্পষ্ট বলে দেয়: এটি একটি Product, তার Offer-এর দাম 450.00, মুদ্রা BDT, আর এটি স্টকে আছে। শব্দভান্ডার আসে schema.org থেকে, আর লেখার ধরন JSON-LD: পাতার ভেতরে একটি <script type="application/ld+json">. Next.js-এর docs এটিকে layout বা page-এ সাধারণ <script> হিসেবে বসাতে বলে, next/script দিয়ে নয়, কারণ এটি চালানোর কোড নয়, ডেটা।

const url = `${SITE}/products/${p.slug}`;
const jsonLd = [
  {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: p.nameBn,
    description: p.descBn,
    sku: p.sku,
    image: [`${url}/opengraph-image`],
    offers: {
      '@type': 'Offer',
      url,
      price: p.priceBdt.toFixed(2),
      priceCurrency: 'BDT',
      availability: p.inStock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
      itemCondition: 'https://schema.org/NewCondition',
    },
  },
  {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'বাজারঘর', item: SITE },
      { '@type': 'ListItem', position: 2, name: p.categoryBn, item: `${SITE}/category/${p.category}` },
      { '@type': 'ListItem', position: 3, name: p.nameBn },
    ],
  },
];

return (
  <main>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }}
    />
    …

শেষের .replace(/</g, '\\u003c') লাইনটি বাদ দেবেন না। Next.js-এর docs সতর্ক করে, JSON.stringify ক্ষতিকর লেখা পরিষ্কার করে না। কোনো বিক্রেতা বিবরণে </script> লিখলে সেটি script ট্যাগ বন্ধ করে নিজের HTML চালাতে পারত। <-কে \u003c করলে JSON-এর মান একই থাকে, কিন্তু HTML parser আর ট্যাগ দেখে না। এখানে dangerouslySetInnerHTML কেন বিপজ্জনক, তা পর্ব ৫০-এ দেখেছেন; XSS-এর তত্ত্ব Cybersecurity কোর্সে।

আসল HTML-এ যা গেল (সত্যিকারের run, এক লাইনে ছিল, পড়ার সুবিধায় ভাঙা):

<script type="application/ld+json">[{"@context":"https://schema.org","@type":"Product",
"name":"মিনিকেট চাল ৫ কেজি","description":"ঝরঝরে মিনিকেট চাল, …","sku":"BG-RICE-005",
"image":["https://bazarghar.example/products/miniket-chal-5kg/opengraph-image"],
"offers":{"@type":"Offer","url":"https://bazarghar.example/products/miniket-chal-5kg",
"price":"450.00","priceCurrency":"BDT","availability":"https://schema.org/InStock",
"itemCondition":"https://schema.org/NewCondition"}},
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[
{"@type":"ListItem","position":1,"name":"বাজারঘর","item":"https://bazarghar.example"},
{"@type":"ListItem","position":2,"name":"চাল","item":"https://bazarghar.example/category/rice"},
{"@type":"ListItem","position":3,"name":"মিনিকেট চাল ৫ কেজি"}]}]</script>

এটি কি schema.org-এর সংজ্ঞার সাথে মেলে? অনুমান না করে আমরা schema.org-এর নিজের প্রকাশিত vocabulary ফাইল (schemaorg-current-https.jsonld, ২ নভেম্বর ২০২৬-এ নামানো) পড়ে একটি ছোট Python script দিয়ে প্রতিটি property মিলিয়েছি: property-টি আছে কি না, আর তার domainIncludes-এ এই type বা তার পূর্বপুরুষ আছে কি না। সত্যিকারের run:

$ python check_schema.py prod.html
Product.name: ok
Product.description: ok
Product.sku: ok
Product.image: ok
Product.offers: ok
Offer.url: ok
Offer.price: ok
Offer.priceCurrency: ok
Offer.availability: ok
  value InStock: enum member of ItemAvailability
Offer.itemCondition: ok
  value NewCondition: enum member of OfferItemCondition
BreadcrumbList.itemListElement: ok
ListItem.position: ok
ListItem.name: ok
ListItem.item: ok
…

দুটি আলাদা প্রশ্ন গুলিয়ে ফেলবেন না। (১) schema.org-এ বৈধ কি? এটি শব্দভান্ডারের প্রশ্ন, উপরের script বা Schema Markup Validator দেখায়। (২) কোনো search engine এটি দিয়ে বিশেষ ফলাফল দেখাবে কি? এটি সেই engine-এর নিজের নিয়ম। Google-এর নথিতে যে পাতা থেকে সরাসরি কেনা যায় তার জন্য “merchant listing”-এর নিয়ম, যেখানে লেখার সময়ে Product-এ name, image, offers বাধ্যতামূলক, আর Offer-এ শূন্যের বেশি price আর priceCurrency. মুদ্রা ISO 4217-এর তিন অক্ষরের কোড, বাংলাদেশি টাকার জন্য BDT. availability-এ schema.org-এর একটি মান, যেমন https://schema.org/InStock. Shipping আর return policy-র ঘর ঐচ্ছিক, কিন্তু কিছু অভিজ্ঞতার জন্য লাগে। আর সবচেয়ে জরুরি কথা, Google নিজেই লেখে, structured data থাকলেও তার ফিচার ফলাফলে দেখানোর নিশ্চয়তা নেই। Rich result দেখানো হবে কি না, তা search engine ঠিক করে।

নিচের ব্লক একটি পণ্য থেকে JSON-LD বানায়, Google-এর merchant listing-এর বাধ্যতামূলক ঘর যাচাই করে, আর < escape করে। দ্বিতীয় পণ্যে দুটি ইচ্ছাকৃত ভুল আছে।

const SITE = 'https://bazarghar.example';
function productJsonLd(p) {
  return {
    '@context': 'https://schema.org', '@type': 'Product',
    name: p.name, description: p.desc, image: p.image ? [p.image] : undefined,
    offers: {
      '@type': 'Offer', url: `${SITE}/products/${p.slug}`,
      price: p.price.toFixed(2), priceCurrency: 'BDT',
      availability: `https://schema.org/${p.inStock ? 'InStock' : 'OutOfStock'}`,
    },
  };
}

// লেখার সময়ের Google merchant listing docs-এ যেগুলো বাধ্যতামূলক
function missing(ld) {
  const checks = {
    name: !!ld.name, image: !!ld.image,
    'offers.price > 0': Number(ld.offers?.price) > 0,
    'offers.priceCurrency': /^[A-Z]{3}$/.test(ld.offers?.priceCurrency ?? ''),
  };
  return Object.keys(checks).filter((k) => !checks[k]);
}

const items = [
  { slug: 'miniket-chal-5kg', name: 'মিনিকেট চাল ৫ কেজি', desc: 'ঝরঝরে চাল',
    price: 450, inStock: true, image: `${SITE}/og/miniket-chal-5kg.png` },
  { slug: 'moshur-dal-1kg', name: 'মসুর ডাল ১ কেজি', desc: 'দেশি ডাল </script><b>অফার</b>',
    price: 0, inStock: false },
];
for (const p of items) {
  const ld = productJsonLd(p);
  const safe = JSON.stringify(ld).replace(/</g, '\\u003c');
  console.log(p.slug, '-> missing:', missing(ld).join(', ') || 'none');
  console.log('  ', ld.offers.availability, '| price', ld.offers.price, '| "</script" left:', safe.includes('</script'));
}

৭ · Open Graph, Twitter card আর বাংলা OG ছবি

কেউ পণ্যের লিংক Facebook, WhatsApp বা Messenger-এ দিলে কার্ড তৈরি হয় Open Graph-এর og:title, og:description আর og:image দেখে। X (আগের Twitter) পড়ে Twitter card-এর twitter:* ট্যাগ, না পেলে সাধারণত og ট্যাগে ফিরে যায়। এই bot-গুলো সাধারণত JavaScript চালায় না বলে ব্যাপকভাবে জানা, তবে প্রতিটি প্ল্যাটফর্মের নিয়ম আলাদা আর বদলায়।

প্রতিটি পণ্যের জন্য আলাদা ছবি হাতে বানানো অসম্ভব। Next.js-এ opengraph-image.tsx নামে একটি ফাইল route segment-এ রাখলে সে ছবি বানায় আর head-এ og:image, তার মাপ, type আর alt বসিয়ে দেয়। ছবি আঁকে next/og-এর ImageResponse, যা ভেতরে Satori দিয়ে JSX আর CSS থেকে SVG বানায়, তারপর Resvg দিয়ে PNG. Docs-এর সীমা: শুধু flexbox আর CSS-এর একটি অংশ (grid চলে না), ফন্ট শুধু ttf, otf বা woff, আর JSX, CSS, ফন্ট, ছবি মিলিয়ে bundle ৫০০ KB-এর মধ্যে। Next.js 14-এর আগে এটি next/server থেকে import হতো; পুরোনো tutorial-এ তাই দেখবেন।

import { ImageResponse } from 'next/og';
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import { getProduct } from '@/lib/products';

export const alt = 'বাজারঘরের পণ্য';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

// ফন্ট request-এর ওপর নির্ভর করে না, তাই module-এ একবার পড়া
const bengali = await readFile(join(process.cwd(), 'assets/NotoSansBengali-Bold.ttf'));

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const p = await getProduct(slug);
  const name = p?.nameBn ?? 'বাজারঘর';
  const price = p ? `৳${p.priceBdt}` : '';

  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column',
        justifyContent: 'center', padding: 80, background: '#0d1f3c', color: 'white',
        fontFamily: 'Noto Sans Bengali' }}>
        <div style={{ fontSize: 40, color: '#facc15' }}>বাজারঘর</div>
        <div style={{ fontSize: 84, marginTop: 24 }}>{name}</div>
        <div style={{ fontSize: 64, marginTop: 24 }}>{price}</div>
      </div>
    ),
    { ...size, fonts: [{ name: 'Noto Sans Bengali', data: bengali, weight: 700, style: 'normal' }] },
  );
}

বাংলা ফন্ট কেন আলাদা করে দিতে হলো? next/og-এর সাথে আসে শুধু একটি Latin ফন্ট (আমাদের node_modules-এ Geist-Regular.ttf). আমরা Noto Sans Bengali Bold-এর একটি static TTF (১,৪৪,৮২৮ byte) assets/-এ রেখেছি; ৫০০ KB সীমার ভেতরে। Variable font বা woff2 না নেওয়াই ভালো, কারণ docs যে format-এর কথা বলে, তার মধ্যে সেগুলো নেই। আর একটি জিনিস আমরা Next.js-এর নিজের কোড পড়ে পেয়েছি: ফন্ট না দিলে @vercel/og (Next-এর ভেতরে 1.0.1) বাংলা লেখা দেখে request-এর সময় fonts.googleapis.com থেকে Noto Sans Bengali আনার চেষ্টা করে। অর্থাৎ ফন্ট ছাড়া ছবি বানাতে আপনার server-কে বাইরের নেটওয়ার্কে যেতে হয়। ইন্টারনেট বন্ধ বা ধীর হলে ছবি ভাঙবে। নিজের ফন্ট নিজের প্রকল্পে রাখুন।

এবার একটি ছবির request ধাপে ধাপে, ল্যাবের আসল মান দিয়ে:

GET /products/miniket-chal-5kg
User-Agent: facebookexternalhit/1.1
→ 200, metadata <head>-এ, JavaScript চালানো লাগে না

og:image  …/products/miniket-chal-5kg/opengraph-image?b91b43274e5c72e8
og:image:type  image/png
og:image:width 1200 · height 630
og:image:alt   বাজারঘরের পণ্য

await params → { slug: 'miniket-chal-5kg' }
ফন্ট: আগেই memory-তে, 144828 byte
JSX → Satori (layout, SVG) → Resvg (PNG)

HTTP/1.1 200 OK
content-type: image/png
cache-control: public, max-age=0, must-revalidate
size_download: 36014 byte · প্রথম 0.39 s, পরে 0.016 s

লেখার কথা:  মিনিকেট চাল ৫ কেজি
ছবিতে এল:  মনিকিটে চাল ৫ কজেি
দাম: ৳450 ঠিক এসেছে

বাংলা কেন ভাঙল, আর কী করবেন

বাংলায় লেখার ক্রম আর আঁকার ক্রম এক নয়। “মি” লেখা হয় ম তারপর ি, কিন্তু আঁকতে হয় ি আগে। যুক্তাক্ষর “ষ্ট” লেখা হয় ষ + হসন্ত + ট, আঁকতে হয় একটি জোড়া আকার। এই কাজটির নাম text shaping: ফন্টের OpenType নিয়ম পড়ে অক্ষরের ক্রম আর আকার বদলানো। Browser-এ এটি করে HarfBuzz-এর মতো shaping ইঞ্জিন। আমাদের আরেকটি পরীক্ষার ছবিতে (একই ফন্ট) “মিষ্টি দই”, “প্রাণ”, “ক্ষীর” আর “স্টক”-এর একটি যুক্তাক্ষরও জোড়া লাগেনি: প্রতিটিতে হসন্ত আলাদা দৃশ্যমান, আর হ্রস্ব-ই ভুল জায়গায়। ফন্ট ছাড়া (Google Fonts থেকে আনা ফন্টে) একই ভুল। অর্থাৎ সমস্যা ফন্টে নয়, আমাদের run-এ ব্যবহৃত Satori-র shaping-এ। ভবিষ্যতের version-এ এটি বদলাতে পারে, তাই নিজের version-এ নিজে পরীক্ষা করবেন।

তৃতীয় পথের জন্য আমরা Playwright দিয়ে Edge চালিয়ে একটি HTML টেমপ্লেটের screenshot নিয়েছি (সত্যিকারের run): wrote public/og/miniket-chal-5kg.png 28256 bytes, আর ছবিতে নাম ঠিক এসেছে। একটি ছোট খুঁত: আমাদের বাংলা ফন্টে Latin অঙ্ক নেই, তাই “450” browser-এর অন্য ফন্টে এসেছে। টেমপ্লেটে একটি Latin ফন্টও দিন। কোন পথ নেবেন, তা আপনার build ব্যবস্থার ওপর নির্ভর করে; সমাধান যা-ই হোক, প্রতিটি নতুন টেমপ্লেটের অন্তত একটি ছবি নিজের চোখে দেখবেন।

৮ · একই পাতা, অনেক URL — filter, খোঁজা, 404 আর soft 404

পর্ব ৩৪-এ বাজারঘরের তালিকায় filter আর sort বসিয়েছিলেন: ?brand=teer&price=0-500&sort=price. API-র জন্য এটি দারুণ। কিন্তু প্রতিটি filter-এর মিশ্রণ একটি নতুন URL, আর প্রতিটি URL crawler-এর কাছে একটি নতুন পাতা। সাথে যোগ হয় Facebook বিজ্ঞাপনের utm_source, fbclid-এর মতো tracking parameter, আর একই filter ভিন্ন ক্রমে। ফল: একই বিষয়বস্তুর শত শত URL. একে বলে duplicate content, আর filter-এর এই জালকে faceted navigation.

Google-এর faceted navigation-এর নথির মূল পরামর্শ, সংক্ষেপে: filter-এর URL index-এ না চাইলে crawl-ই কমান (robots.txt দিয়ে, অথবা filter-কে URL fragment-এ রেখে); একান্ত crawl করতে দিলে parameter-এর ক্রম সবসময় একই রাখুন আর একই filter দুবার আসতে দেবেন না; আর ফলহীন মিশ্রণে আসল 404 দিন। Canonical দিয়ে কাজ হয়, তবে নথি অনুযায়ী এটি ধীরে ধীরে crawl কমায় আর robots.txt-এর চেয়ে কম কার্যকর। বাজারঘরের নীতি এই পর্বে সরল: filter বা sort থাকলে noindex, follow আর canonical মূল তালিকায়; tracking parameter সবসময় বাদ; page থাকলে নিজের canonical. বড় সাইটে আপনি হয়তো robots.txt দিয়ে crawl-ও আটকাবেন, তবে মনে রাখবেন, তখন noindex আর পড়া হবে না।

নিচের ব্লক এই normaliser আর সিদ্ধান্তের যুক্তি, কোনো framework ছাড়া। পাঁচটি URL দিয়ে দেখুন:

const TRACKING = /^(utm_[a-z]+|fbclid|gclid)$/;
const FACETS = ['brand', 'price', 'instock', 'sort'];
function normalise(raw) {
  const u = new URL(raw);            // host ছোট হাতের হয়ে যায়
  u.hash = '';
  const keep = [...u.searchParams].filter(([k, v]) => v !== '' && !TRACKING.test(k));
  keep.sort(([a, x], [b, y]) => (a + '=' + x).localeCompare(b + '=' + y));
  u.search = new URLSearchParams(keep).toString();
  if (u.searchParams.get('page') === '1') u.searchParams.delete('page');
  return u;
}

function decide(u) {
  const used = FACETS.filter((f) => u.searchParams.has(f));
  if (used.length === 0) return { robots: 'index, follow', canonical: u.href };
  return { robots: 'noindex, follow', canonical: u.origin + u.pathname };
}

const urls = [
  'https://Bazarghar.example/category/rice?utm_source=fb&fbclid=x1',
  'https://bazarghar.example/category/rice?page=1',
  'https://bazarghar.example/category/rice?page=2&utm_campaign=eid',
  'https://bazarghar.example/category/rice?brand=teer&price=0-500',
  'https://bazarghar.example/category/rice?price=0-500&brand=teer#top',
];

const seen = new Set();
for (const raw of urls) {
  const u = normalise(raw);
  const d = decide(u);
  console.log(u.pathname + u.search + (seen.has(u.href) ? '  (duplicate!)' : ''));
  seen.add(u.href);
  console.log('   ' + d.robots + ' | canonical ' + d.canonical.replace('https://bazarghar.example', ''));
}
console.log('5 URLs ->', seen.size, 'distinct');

একটি URL কীভাবে সিদ্ধান্তে পৌঁছায়, ধাপে ধাপে:

1const u = new URL(raw);2u.hash = ''; drop utm_*, fbclid, gclid3keep.sort(); if page=1 → delete4used = FACETS.filter(f => has(f))5used.length ? noindex : index6<meta name="robots"> · canonical

Next.js-এ একই যুক্তি generateMetadata-এ, যেখানে searchParams-ও Promise:

const FACETS = ['brand', 'price', 'sort', 'instock'];

export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
  const { cat } = await params;
  const sp = await searchParams;
  const used = FACETS.filter((f) => sp[f] !== undefined);
  const base = `/category/${cat}`;
  if (used.length === 0) {
    return { title: `${cat} — সব পণ্য`, alternates: { canonical: base } };
  }
  return {
    title: `${cat} — ফিল্টার করা তালিকা`,
    alternates: { canonical: base },
    robots: { index: false, follow: true },
  };
}

খোঁজার ফলের পাতা

/search?q=চাল অসীম সংখ্যক URL তৈরি করতে পারে। Google-এর পুরোনো Webmaster নির্দেশিকায় সাইটের ভেতরের খোঁজার ফলের পাতা crawl না করানোর পরামর্শ ছিল, আর এগুলোকে index-এর বাইরে রাখা আজও প্রচলিত অভ্যাস, কারণ এমন পাতা ক্রেতাকে আরেকটি খোঁজার পাতায় নিয়ে যায় মাত্র। তাই /search পাতায় static metadata-তেই robots: { index: false, follow: true }. আসল run-এ head-এ এল <meta name="robots" content="noindex, follow"/> আর শিরোনাম “খোঁজার ফল | বাজারঘর”।

404 আর soft 404

যে পণ্য নেই, তার পাতা কী ফেরত দেবে? দুটি route পাশাপাশি চালিয়ে দেখুন (সত্যিকারের run):

~/bazarghar$ for u in /products/miniket-chal-5kg /products/no-such-item /soft404/no-such-item; do
  curl -s -o /dev/null -w "%{http_code} %{size_download} $u\n" "http://127.0.0.1:47658$u"; done
200 13046 /products/miniket-chal-5kg
404 8493 /products/no-such-item
200 6866 /soft404/no-such-item

প্রথম route notFound() ডাকে: status 404, আর Next.js head-এ নিজেই <meta name="robots" content="noindex"/> বসিয়েছে। দ্বিতীয় route ইচ্ছা করে ভুলভাবে লেখা: পর্দায় “দুঃখিত, পণ্যটি পাওয়া যায়নি”, কিন্তু status 200 আর কোনো noindex নেই। এটিই soft 404. Crawler একে আসল পাতা ভাবতে পারে, আর শত শত “পাওয়া যায়নি” পাতা একই রকম দেখায়। Google এমন পাতা চিনে নেওয়ার চেষ্টা করে আর Search Console-এ “soft 404” হিসেবে দেখায়, কিন্তু দায়িত্ব আপনার। পর্ব ২০-এ SPA-তে এই সমস্যা দেখেছেন, যেখানে server সবসময় একই index.html আর 200 দেয়।

আরেকটি জিনিস লক্ষ করুন: 404 পাতার head-এ og:image-ও এসেছে, /products/no-such-item/opengraph-image, কারণ ছবির ফাইলটি segment-এ আছে। আমাদের ছবির কোড পণ্য না পেলে “বাজারঘর” লেখে, তাই ক্ষতি নেই। কিন্তু ছবির কোড যদি ধরে নিত পণ্য আছেই, তাহলে 404 পাতার ছবি 500 দিত। Edge case-গুলো নিজের চোখে দেখুন।

সাবধান: Cache Components চালু থাকলে notFound()-ও 200 দিতে পারে

উপরের run ছিল Cache Components বন্ধ রেখে। একই কোড আমরা আরেকটি কপিতে next.config.ts-এ cacheComponents: true আর partialPrefetching: true দিয়ে চালিয়েছি, যেমন create-next-app 16.4.4 লেখে। Build-এ প্রথমে আসল error এল: /category/[cat]-এ params <Suspense>-এর বাইরে পড়া হয়েছে। Dynamic অংশগুলো <Suspense>-এ মোড়ার পর route table-এ নতুন চিহ্ন এল, ◐ /products/[slug], অর্থাৎ partial prerender: static খোলস আগে, বাকিটা পরে stream. তারপর অচেনা slug-এ (সত্যিকারের run):

~/bazarghar-cc$ curl -s -D - -o first.html -A "Mozilla/5.0 Chrome/140" http://127.0.0.1:47659/products/abc-first
HTTP/1.1 200 OK
x-nextjs-postponed: 1
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
~/bazarghar-cc$ curl -s -D - -o second.html -A "Mozilla/5.0 Chrome/140" http://127.0.0.1:47659/products/abc-first
HTTP/1.1 404 Not Found
Cache-Control: s-maxage=31536000

নতুন slug, প্রথম request:  facebookexternalhit/1.1 → 404   Googlebot/2.1 → 200

প্রথম request-এ status 200, যদিও body-তে “দুঃখিত, পাতাটি পাওয়া যায়নি” আর head-এ <meta name="robots" content="noindex"/> আছে। একই slug-এর দ্বিতীয় request-এ 404, কারণ ততক্ষণে ফলটি জানা। Link preview-এর bot (HTML-limited) প্রথমবারেই 404 পেল, কারণ তার জন্য Next.js পুরো পাতা শেষ করে তবে পাঠায়; Googlebot প্রথমবার পেল 200. Next.js-এর notFound docs ঠিক এটিই বলে: response stream শুরু হওয়ার পর notFound() চললে status 200 থেকে যায়, কারণ header আগেই চলে গেছে, তবে Next.js noindex বসায়; stream শুরুর আগে চললে 404. HTTP-তে status থাকে উত্তরের একদম শুরুতে, তাই পরে মত বদলানোর উপায় নেই।

এটি কি soft 404? আংশিক। noindex থাকায় পাতাটি index-এ যাওয়ার কথা নয়, আর Google-এর নথিও SPA-র জন্য এই পথটিকে (noindex) একটি গ্রহণযোগ্য বিকল্প বলে। তবু 404-ই সবচেয়ে পরিষ্কার সংকেত, আর monitoring বা অন্য bot শুধু status দেখে। আসল 404 চাইলে পণ্যের অস্তিত্ব যাচাই করুন stream শুরুর আগে: <Suspense>-এর বাইরে, page-এর ওপরের অংশে (যা ওই route-কে কম static করে), জানা slug-এর জন্য generateStaticParams দিয়ে, অথবা docs-এর পরামর্শমতো request-এর সময় Proxy-তে। যে config-ই ব্যবহার করুন, deploy-এর আগে নতুন অচেনা slug দিয়ে, প্রথম request-এ, কয়েক রকম User-Agent দিয়ে status দেখে নিন। Proxy আর route handler আছে পর্ব ৫৭-এ।

স্টক শেষ হলে পাতা মুছে ফেলবেন না। পণ্য আবার আসবে, আর পুরোনো লিংকগুলো কাজে লাগবে। HTTP status-এর অর্থ নিয়ে পুরো আলোচনা আছে পর্ব ৩৩-এ।

৯ · Core Web Vitals আর বাজারঘরের পণ্যের পাতার তালিকা

গতি কি SEO? Google-এর নথি অনুযায়ী Core Web Vitals তাদের ranking ব্যবস্থায় ব্যবহৃত হয়। একই নথি বলে, ভালো স্কোর শীর্ষে থাকার নিশ্চয়তা দেয় না, আর Google সবচেয়ে প্রাসঙ্গিক বিষয়বস্তু দেখানোর চেষ্টা করে, পাতার অভিজ্ঞতা দুর্বল হলেও। অর্থাৎ এটি অনেক সংকেতের একটি, আর কতটা ভার পায়, তা প্রকাশিত নয়। লেখার সময়ের লক্ষ্য: LCP ২.৫ সেকেন্ডের মধ্যে, INP ২০০ মিলিসেকেন্ডের কম, CLS ০.১-এর কম। এগুলো আসল ব্যবহারকারীর মাপ থেকে বিচার হয়। ধীর ফোনে কীভাবে মাপবেন আর কমাবেন, তা পর্ব ২৩-এ দেখেছেন; ছবি আর cache header-সহ পুরো আলোচনা পর্ব ৮৪-এ (Web performance — Core Web Vitals, image আর cache header).

SEO-র দিক থেকে কয়েকটি সংযোগ আছে। Static (●) পণ্যের পাতা CDN থেকে আসে বলে TTFB কম থাকে, যা LCP-তে সাহায্য করে। পণ্যের ছবিতে width আর height দিলে CLS কমে। আর Next.js-এর streaming metadata ধীর generateMetadata-কে প্রথম HTML আটকাতে দেয় না। কিন্তু ১০০ নম্বর পেতে গিয়ে বিষয়বস্তু বাদ দেবেন না; ক্রেতার প্রশ্নের উত্তর দেওয়াই আসল কাজ।

এবার পুরো পর্ব এক তালিকায়। বাজারঘরের প্রতিটি নতুন পণ্যের পাতা বা টেমপ্লেট পাঠানোর আগে এগুলো মিলিয়ে নিন। ডান কলামে যাচাইয়ের উপায়:

১০ · AI-এর যুগে SEO-র কোড

SEO-র কোড AI-কে দিয়ে লেখানো লোভনীয়, কারণ এটি একঘেয়ে। কিন্তু এখানে ভুল চোখে পড়ে না: পাতা ঠিকই চলে, শুধু কয়েক সপ্তাহ পরে দেখবেন search-এ আসছে না। AI-এর সাধারণ ভুলগুলো:

AI-এর লেখা SEO কোড মেলানোর চেকলিস্ট

• নিজের Next.js version-এর docs-এ প্রতিটি API আর field খুঁজে পেয়েছি
• next build চালিয়েছি; route table-এ পাতাগুলো প্রত্যাশিত চিহ্নে (○, ●, ƒ)
• curl-এ title, canonical, hreflang, robots আর og ট্যাগ পড়েছি, দুই রকম User-Agent দিয়ে
• না থাকা পণ্যে 404 পেয়েছি, 200 নয়
• JSON-LD schema.org-এর সাথে মিলিয়েছি, আর পাতার দামের সাথে মিলেছে
• OG ছবির PNG খুলে বাংলা লেখা চোখে দেখেছি
• Diff-এ নতুন package বা বাইরের নেটওয়ার্কের ডাক নেই