<head> Deep Dive

meta Tags Ka Poora Role

💡 <head> ek book ka "inside cover page" hai — reader (user) isse directly nahi padhta, lekin isme ISBN, publisher, edition jaisi zaroori metadata hoti hai jo library (search engines), doosre systems (social media) use karte hain.

<head> ke andar bahut saari meta tags hoti hain, har ek ka specific purpose: <title> (browser tab + search result heading), <meta name="description"> (search result snippet), <meta name="keywords"> (largely obsolete aajkal, Google ignore karta hai), <link rel="stylesheet"> (CSS attach karna).

Social media sharing ke liye Open Graph tags (<meta property="og:...">) important hain — jab tum koi link WhatsApp/Facebook/Twitter par share karte ho, wahi preview card (image, title, description) inhi tags se generate hota hai.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best HTML Tutorial - Code10x</title>
  <meta name="description" content="HTML seekho ekdum shuru se, real examples ke saath.">

  <!-- Open Graph — social media previews ke liye: -->
  <meta property="og:title" content="Best HTML Tutorial">
  <meta property="og:description" content="HTML seekho ekdum shuru se.">
  <meta property="og:image" content="https://example.com/preview.jpg">

  <link rel="stylesheet" href="style.css">
</head>

🔍

<head> ek book ka "inside cover page" hai — reader (user) isse directly nahi padhta, lekin isme ISBN, publisher, edition jaisi zaroori metadata hoti hai jo library (search engines), doosre systems (social media) use karte hain.

1 / 6

⚡ Quick Recap

title = tab + search result heading, description = search snippet
Open Graph tags (og:*) = social media share previews
<head> content user ko directly nahi dikhta, systems use karte hain

Is page mein (2 subtopics)

Open Graph tags Facebook/LinkedIn ke liye kaam karte hain, lekin Twitter apna khud ka set bhi prefer karta hai (twitter:card, twitter:title) — dono ek saath rakhna best coverage deta hai across platforms.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Best HTML Tutorial">
<meta name="twitter:description" content="Seekho HTML ekdum shuru se.">
<meta name="twitter:image" content="https://example.com/preview.jpg">

💡Tip: Agar twitter:* tags missing hain, Twitter usually og:* tags ko hi fallback ke roop mein use kar leta hai — lekin explicit twitter tags zyada reliable/customizable hain.

<link rel="canonical" href="https://example.com/html-tutorial">
<!-- Chahe user /html-tutorial?ref=twitter se aaye,
     ye batata hai "asli" URL kya hai -->

💡Tip: Canonical tags especially e-commerce sites (same product, multiple filter/sort URLs) aur content jo syndicate hota hai (multiple sites par same article) ke liye zaroori hain.

← Previous🖇️ Embedding External Content Next →📈 SEO Basics

Code10x

<head> Deep Dive

Twitter Card Tags

canonical Link — Duplicate Content Handling