Advance HTML শিখুন বাংলায় (পর্ব ৫) — Meta Tags ও SEO Optimization শিখুন

আগের পর্বে আমরা Accessibility শিখেছিলাম — সাইটকে ব্যবহারকারীর জন্য সহজবোধ্য করা। এই পর্বে আমরা দেখব সাইটকে সার্চ ইঞ্জিন আর সোশ্যাল মিডিয়ার জন্য কীভাবে অপ্টিমাইজ করা যায় — Meta Tags, Open Graph, আর Structured Data দিয়ে।

বেসিক SEO Meta Tags

প্রতিটা পেজের <head>-এ কিছু জরুরি ট্যাগ থাকা উচিত, যেগুলো সার্চ ইঞ্জিনকে পেজ সম্পর্কে জানায়।

<head>
  <meta charset="UTF-8" />
  <title>বাংলায় ওয়েব ডেভেলপমেন্ট শিখুন - ArifLogs</title>
  <meta name="description" content="বাংলা ভাষায় সহজ ও প্র্যাকটিক্যাল HTML, CSS, JavaScript টিউটোরিয়াল।" />
  <meta name="keywords" content="html বাংলা, css বাংলা, javascript বাংলা" />
  <meta name="author" content="Arif" />
  <link href="https://arifstack.blogspot.com/2026/08/post.html" rel="canonical" />
</head>

ট্যাগ	কাজ
`<title>`	সার্চ রেজাল্টে বড় হয়ে দেখানো শিরোনাম (৫০-৬০ অক্ষর ভালো)
`meta description`	শিরোনামের নিচে দেখানো সংক্ষিপ্ত বর্ণনা (~১৪০-১৬০ অক্ষর)
`canonical`	একই কন্টেন্টের একাধিক URL থাকলে "আসল" URL কোনটা বলে দেয়
`meta keywords`	আজকাল Google এটা প্রায় উপেক্ষা করে, তবু কিছু সার্চ ইঞ্জিনে সাহায্য করে

Open Graph — সোশ্যাল মিডিয়ার জন্য

Facebook, WhatsApp, LinkedIn-এ লিংক শেয়ার করলে যে ছবি-শিরোনাম-বর্ণনা দেখা যায়, সেটা নিয়ন্ত্রণ করে Open Graph (OG) ট্যাগ। এগুলো না থাকলে সোশ্যাল মিডিয়া নিজে থেকে যা পায় তাই দেখিয়ে দেয় — যা প্রায়ই এলোমেলো হয়।

<meta property="og:title" content="Advanced HTML শিখুন বাংলায় (পর্ব ৫)" />
<meta property="og:description" content="Meta tags ও SEO অপ্টিমাইজেশন বাংলায় শিখুন।" />
<meta property="og:image" content="https://arifstack.blogspot.com/cover.jpg" />
<meta property="og:url" content="https://arifstack.blogspot.com/2026/08/post.html" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ArifLogs" />

প্রপার্টি	কাজ
`og:title`	শেয়ার করলে যে শিরোনাম দেখাবে
`og:image`	প্রিভিউ ছবি (কমপক্ষে ১২০০x৬৩০px রাখা ভালো)
`og:type`	কন্টেন্টের ধরন (article, website, product ইত্যাদি)

Twitter/X-এর জন্য আলাদা ট্যাগও যোগ করা যায় (নাহলে OG ট্যাগ থেকেই ফলব্যাক নেয়):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Advanced HTML শিখুন বাংলায় (পর্ব ৫)" />
<meta name="twitter:description" content="Meta tags ও SEO অপ্টিমাইজেশন বাংলায় শিখুন।" />
<meta name="twitter:image" content="https://arifstack.blogspot.com/cover.jpg" />

Structured Data (JSON-LD)

Structured Data সার্চ ইঞ্জিনকে পেজের কন্টেন্ট আরও গভীরভাবে বুঝতে সাহায্য করে — এর ফলে Google-এ "rich results" (তারা রেটিং, লেখকের নাম, পাবলিশ ডেট ইত্যাদি) দেখা যেতে পারে। সবচেয়ে সহজ ফরম্যাট হলো JSON-LD, যেটা <script> ট্যাগে বসানো হয়।

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Advanced HTML শিখুন বাংলায় (পর্ব ৫)",
  "description": "Meta tags ও SEO অপ্টিমাইজেশন বাংলায় শিখুন।",
  "author": {
    "@type": "Person",
    "name": "Arif"
  },
  "datePublished": "2026-08-10",
  "image": "https://arifstack.blogspot.com/cover.jpg"
}
</script>

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

লাইভ ডেমো — সোশ্যাল প্রিভিউ কার্ড

নিচেরটা দেখতে অনেকটা তেমনই হবে যেমন Facebook বা WhatsApp-এ Open Graph ট্যাগসহ একটা লিংক শেয়ার করলে দেখায়:

og:image এখানে দেখাবে

arifstack.blogspot.com

Advanced HTML শিখুন বাংলায় (পর্ব ৫)

Meta tags ও SEO অপ্টিমাইজেশন বাংলায় শিখুন — Open Graph ও Structured Data সহ।

এই পুরো কার্ডটাই og:title, og:description, আর og:image থেকে বানানো — এগুলো ঠিকমতো সেট না করলে সোশ্যাল মিডিয়া নিজে থেকে যা খুঁজে পায় (হয়তো এলোমেলো টেক্সট বা প্রথম ছবি) তাই দেখাবে।

Blogger-এ কীভাবে বসাবে

Blogger-এর থিমে সরাসরি <head> এডিট করা যায় — Theme → Edit HTML গিয়ে </head>-এর ঠিক আগে এই ট্যাগগুলো বসাতে হয়। প্রতিটা পোস্টের জন্য আলাদা মেটা ডেটা দিতে চাইলে Blogger-এর data:blog.pageTitle আর data:blog.metaDescription-এর মতো টেমপ্লেট ভ্যারিয়েবল ব্যবহার করতে হয়:

<b:if cond='data:blog.pageType == "item"'>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
</b:if>

এভাবে প্রতিটা পোস্টে ম্যানুয়ালি না লিখেও, Blogger নিজে থেকেই প্রতিটা পোস্টের জন্য সঠিক শিরোনাম ও বর্ণনা বসিয়ে দেবে।

নিজে চেষ্টা করো

Exercise:

তোমার ArifLogs ব্লগের যেকোনো একটা পোস্ট খুলে দেখো তাতে og:title আর og:image ঠিকমতো সেট আছে কিনা (ব্রাউজারে View Source করে চেক করো)।
একটা নমুনা পেজের জন্য নিজে meta description লিখো, ১৪০-১৬০ অক্ষরের মধ্যে রেখে।
একটা JSON-LD স্ক্রিপ্ট লিখো তোমার কোনো একটা পোস্টের জন্য (BlogPosting টাইপ দিয়ে)।
Facebook-এর Sharing Debugger টুল দিয়ে তোমার ব্লগের একটা লিংক টেস্ট করো, প্রিভিউ কার্ড কেমন দেখায় দেখো।

পরের পর্বে যা থাকছে

এটাই ছিল Advanced HTML সিরিজের শেষ থিওরি পর্ব। পরের পর্বে (পর্ব ৬, সিরিজের শেষ পর্ব) আমরা এই সিরিজে শেখা সবকিছু — Web Storage, Accessibility — মিলিয়ে একটা Mini Project: নোট-অ্যাপ বানাব।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ