HTML Meta Tags ও SEO

Meta Tags কী?

Meta tag <head> এর ভিতরে থাকে এবং পেজ সম্পর্কে তথ্য প্রদান করে। দেখা যায় না কিন্তু browser, search engine ও social media এগুলো ব্যবহার করে।

অত্যাবশ্যক Meta Tags

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>পেজের শিরোনাম (৬০ অক্ষরের কম)</title>
    <meta name="description" content="১৫০-১৬০ অক্ষরে পেজের সংক্ষিপ্ত বিবরণ">
    <meta name="keywords" content="web design, html, css, বাংলা">
    <meta name="author" content="আপনার নাম">
</head>

Open Graph (Facebook/LinkedIn share)

<meta property="og:title" content="পেজের শিরোনাম">
<meta property="og:description" content="বিবরণ">
<meta property="og:image" content="https://example.com/share.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="শিরোনাম">
<meta name="twitter:description" content="বিবরণ">
<meta name="twitter:image" content="https://example.com/img.jpg">

Favicon (ট্যাবের আইকন)

<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" href="icon.png">
<link rel="apple-touch-icon" href="apple-icon.png">

CSS ও JavaScript যুক্ত করা

<!-- External CSS -->
<link rel="stylesheet" href="style.css">

<!-- External JS -->
<script src="app.js" defer></script>
<script src="app.js" async></script>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

SEO Best Practices

• প্রতিটি পেজে ইউনিক <title> ও description
• Heading hierarchy ঠিক রাখুন (h1 → h2 → h3)
• সব ছবিতে alt দিন
• Semantic HTML ব্যবহার করুন
• Mobile-friendly (responsive)
• Fast loading (image optimize, lazy loading)
• HTTPS ব্যবহার করুন