বেশিরভাগ ডেভেলপার পোর্টফোলিও ডিফল্টে এক ভাষারই থাকে। সেটা একটা মিস করা সুযোগ। যে Next.js + hreflang সেটআপ একটাই সাইটকে দুইবার র‍্যাঙ্ক করতে দেয় — সেটাই বলছি, এবং কেন আমার মনে হয় প্রতিটা ফ্রিল্যান্সারের এটা আজই শিপ করা উচিত।

আপনার পোর্টফোলিও সম্ভবত শুধু ইংরেজিতে।

আমারও ছিল — পাঁচ বছর ধরে। কখনো দ্বিতীয়বার ভেবে দেখিনি।

তারপর একদিন Google Search Console খুলে অদ্ভুত একটা জিনিস দেখলাম: যারা আমার সাইটে আসছিল, তাদের অর্ধেক বাংলাদেশ, ভারত আর মধ্যপ্রাচ্যের। তাদের অনেকে নিজের ভাষায় সার্চ করছিল। ইংরেজিতে আমাকে পাচ্ছিল, স্ক্রল করছিল, বাউন্স করছিল।

আমার দর্শকের একটা নীরব অর্ধেক — আমি তাদের কথোপকথনের বাইরে রেখেছিলাম।

তাই সাইটটা আবার বানালাম — যাতে ইংরেজি আর বাংলা দুটোতেই কথা বলে। একই কনটেন্ট, দুটো দরজা। কোনো সাবডোমেইন না। কোনো CMS রিরাইট না। শুধু Next.js — যেটা সে ভালো পারে।

পথে যা শিখলাম, এই পোস্টে সেটাই।

কোডের প্রথম লাইন লেখার আগেই URL-এর গঠন বেছে নিন

এই জায়গাতেই প্রথম দিনে বেশিরভাগ মানুষ ভুল করে।

তিনটা অপশন আছে:

  1. সাবডোমেইনbn.yoursite.com। পরিষ্কার আলাদা। কিন্তু SEO অথরিটির জন্য খারাপ — প্রতিটা সাবডোমেইনকে Google আলাদা সাইট হিসেবে দেখে।
  2. কোয়েরি স্ট্রিংyoursite.com?lang=bn। সবচেয়ে খারাপ অপশন। ক্রলার অপছন্দ করে, মানুষ URL ভালোভাবে শেয়ারও করতে পারে না।
  3. সাবপাথyoursite.com/bn। প্রায় সবার জন্যই সঠিক উত্তর। এক ডোমেইন, এক অথরিটি সিগন্যাল, দুই লোকেল।

আমি সাবপাথ বেছে নিয়েছি। ইংরেজি /-এ, বাংলা /bn-এ। ইংরেজি সংস্করণ একদম মূল রুটেই রাখলাম, কারণ পাঁচ বছরের ব্যাকলিংক ইতিমধ্যে সেখানে পয়েন্ট করে — যা আগেই র‍্যাঙ্ক করছে, সেটা কখনো ভাঙবেন না।

hreflang ছাড়া আপনি দুইবার অস্তিত্বশীল না

৯০% "বাইলিঙ্গুয়াল" পোর্টফোলিও যে ভুলটা করে — তারা কনটেন্ট অনুবাদ করে, কিন্তু Google-কে কখনো বলে না কোন সংস্করণ কার জন্য

hreflang ছাড়া Google একটা সংস্করণ বেছে নেয় আর অন্যটা চুপচাপ উপেক্ষা করে। এত পরিশ্রম — পুরোটাই বৃথা।

নিয়মটা সিম্পল — প্রতিটা ভাষার প্রতিটা পেজে নিজেকেসহ অন্য সব সংস্করণের রেফারেন্স থাকতে হবে। তাই /-এ:

<link rel="alternate" hreflang="en" href="https://yoursite.com/" />
<link rel="alternate" hreflang="bn" href="https://yoursite.com/bn" />
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/" />

আর /bn-এ — একই তিনটা লিংক, একই দিকে নির্দেশ করছে।

x-default হলো "Google যার ভাষা পছন্দ চিনতে পারছে না" — তাদের জন্য ফলব্যাক। বেশিরভাগ ক্ষেত্রেই এটা সবচেয়ে সর্বজনীন সংস্করণে পয়েন্ট করুন (বেশিরভাগের জন্য সেটা ইংরেজি)।

Next.js-এ এসব কিছু metadata.alternates.languages-এর ভেতরে থাকে। প্রতিটা রুটে একবার সেট করুন, ভুলে যান।

<html lang> অ্যাট্রিবিউট যা ভাবছেন তার চেয়ে বেশি কিছু করে

যদি আপনার সাইট প্রতিটা পেজে <html lang="en"> সেট করে — Google ভাবে পুরো সাইটই ইংরেজি, এমনকি বাংলা পেজগুলোও।

Next.js-এর একটামাত্র রুট লেআউট দিয়ে এটা কষ্টের। প্রতিটা লোকেলে আলাদা lang অ্যাট্রিবিউট দরকার।

সবচেয়ে পরিষ্কার সমাধান: একাধিক রুট লেআউটসহ রুট গ্রুপ।

app/
  (en)/layout.tsx     ← <html lang="en">
  (en)/page.tsx
  (bn)/layout.tsx     ← <html lang="bn">
  (bn)/bn/page.tsx

(en) আর (bn) সেগমেন্টগুলো রুট গ্রুপ — URL-এ এগুলো দেখা যায় না। শুধু প্রতিটা সাবট্রি-কে নিজের রুট লেআউট রাখতে দেয়।

বেশিরভাগ টিউটোরিয়াল এটা শেখায় না। কিন্তু SEO-র জন্য আসলে এটাই কাজ করে।

অনুবাদ করবেন না। লোকালাইজ করুন।

বাইলিঙ্গুয়াল হওয়ার সময় লোভ হয় — ইংরেজি কপি Google Translate-এ চালিয়ে দিন, কাজ শেষ।

এটা করবেন না।

টুল দিয়ে ইংরেজি থেকে অনুবাদ করা বাংলা পড়লেই বোঝা যায় — এটা টুলের অনুবাদ। তাল কেটে যায়। কনজাংশন ভুল। বাক্য এমন জায়গায় শেষ হয় যেখানে বাংলাভাষী কখনো শেষ করত না। দুই প্যারাগ্রাফেই মানুষ ধরে ফেলে।

যেটা কাজ করে: প্রতিটা অংশ নতুন ভাষায় একই অভিপ্রায় নিয়ে আবার লিখুন, একই শব্দে না। আপনার ইংরেজি "I'm a passionate developer based in Kushtia" বাংলায় হয়ে যায় "কুষ্টিয়ায় থাকি আর দিনরাত ওয়েব নিয়ে কাজ করি।" অর্থ একই। কণ্ঠস্বর — স্থানীয়।

নিজে যদি সেই ভাষায় লিখতে না পারেন — এমন কাউকে নিয়োগ দিন যিনি সেই ভাষায় বাঁচেন। অনুবাদক না — লেখক।

সাইটম্যাপের জন্য যা করতে হবে

এই অংশ নিয়ে কেউ লেখে না।

আপনার সাইটম্যাপে প্রতিটা লোকেলের প্রতিটা URL-এর জন্য একটা এন্ট্রি দরকার — প্রতিটাতে অন্য সংস্করণগুলোর দিকে xhtml:link alternate:

<url>
  <loc>https://yoursite.com/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://yoursite.com/" />
  <xhtml:link rel="alternate" hreflang="bn" href="https://yoursite.com/bn" />
  <xhtml:link rel="alternate" hreflang="x-default" href="https://yoursite.com/" />
</url>

Next.js-এ sitemap.ts রুট হ্যান্ডলার প্রতিটা এন্ট্রিতে alternates ফিল্ড দেয়। সেটা ব্যবহার করুন। সাইটম্যাপে alternates না থাকলে — Google-কে চুপিচুপি বলছেন, এই দুটো লোকেল আলাদা সম্পর্কহীন পেজ।

বোনাস: একটা llms.txt লিখুন

ChatGPT, Claude, Perplexity আর Google-এর AI Overviews-এ সাইট সাইটেশন পেতে চাইলে — ২০২৬-এ আপনার চাওয়া উচিত — সাইট রুটে একটা llms.txt ফাইল রাখুন।

এটা AI সার্চের জন্য robots.txt-এর সমতুল্য। আপনি কে, কী করেন, ক্যানোনিকাল পেজ কোথায়, ভাষায় আপনার নাম কীভাবে ম্যাপ করে — একটা গঠনবদ্ধ প্রোফাইল। আমার জন্য ছয় লাইনে এমন দেখায়:

- Brand name (English): M H Tawfik
- Brand name (Bangla): এম এইচ তাওফিক
- Full name (English): Mojakkar Hossain Tawfik
- Full name (Bangla): মোজাক্কার হোসেন তওফিক
- Location: Kushtia, Bangladesh
- Site (EN): /  •  Site (BN): /bn

যেসব AI ইঞ্জিন llms.txt পার্স করতে জানে — তারা এটা তুলে নেয়, আপনার সম্পর্কে hallucinate করা বন্ধ করে। ১৫ মিনিটের মূল্য আছে।

কেন আমি ভাবি এটা ২০২৬-এর অবশ্যকর্তব্য

অনেকদিন পর্যন্ত পোর্টফোলিও থাকাটাই ছিল পার্থক্যকারী। সেই দরজা বন্ধ। এখন প্রতিটা জুনিয়র ডেভের একটা Next.js সাইট আছে।

নতুন এজ — আপনি কার সাথে কথা বলেন

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

আপনি যদি বাংলাদেশি ডেভেলপার হন, বা যেকোনো ডেভেলপার যার প্রথম ভাষা ইংরেজি না — এই মাসে সম্ভবত এটাই সবচেয়ে বড় লেভারেজের SEO পদক্ষেপ।

আমার একটা সপ্তাহান্তে শেষ। আপনিও পারেন।


নিজের সংস্করণ বানাতে গিয়ে আটকে গেলে — কোথায় আটকেছেন বলুন। যে লাইনে ভাঙছে — সেটা দেখিয়ে দেব।