📘 Lesson  ·  Lesson 27

Meta Tags and Viewport

Meta Tags और Viewport

What Meta Tags Are

Meta tags are information ABOUT the page, not content ON the page. They live in the <head>, are invisible to visitors, but are read by browsers, Google and social media. Remember the envelope analogy from the structure chapter? Meta tags are the details written on the envelope — who it's for, how to handle it, what's inside — essential for correct delivery even though the reader never sees them.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free HTML tutorials in Hindi.">
     │         │                    │
   always     name = which meta     content = its value
   in <head>

The pattern is almost always name="..." content="..." — a label and its value. (charset is the one special short form.)

charset — the Encoding (you have met this)

<meta charset="UTF-8">

The character encoding, from your very first structure chapter. UTF-8 supports every language on earth — without it, Hindi text and symbols like ₹ turn into ह garbage. It should be the FIRST thing in <head>, so the browser knows how to read everything that follows. One line, absolutely non-negotiable.

viewport — the Mobile Must-Have

<meta name="viewport" content="width=device-width, initial-scale=1.0">
WITHOUT it on a phone: the page loads zoomed-out and tiny, like a desktop site squeezed onto the screen - unreadable. WITH it: the page fits the phone's width perfectly.
The single most important tag for mobile. width=device-width tells the page "be as wide as THIS device's screen" (not a fixed 980px desktop width); initial-scale=1.0 sets the starting zoom to normal. Without this line, all your responsive CSS is ignored on phones — the #1 reason a "responsive" site still looks broken on mobile. Every modern page must include it. (This connects directly to the responsive design chapters in our CSS course.)

description — Your Google Snippet

<meta name="description"
      content="Learn HTML free with examples in Hindi and English. Complete
               tutorial from basics to HTML5, forms and SEO.">
In Google results, under the blue title, this text often appears: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML Tutorial | CodeKaFunda Learn HTML free with examples in Hindi and English... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • Keep it ~150-160 characters — Google truncates longer ones.
  • Write it for HUMANS: it's your ad in search results; a good description gets more clicks.
  • name="keywords" also exists but Google ignores it now — old SEO spam killed it. Don't waste effort there.

Open Graph — Social Media Previews

<meta property="og:title" content="Free HTML Tutorial">
<meta property="og:description" content="Learn HTML in Hindi with examples">
<meta property="og:image" content="https://codekafunda.in/preview.jpg">
<meta property="og:url" content="https://codekafunda.in/tutorial/html/">
When someone pastes your link on WhatsApp, Facebook or LinkedIn, that nice preview card — title, description and thumbnail — comes from these Open Graph (og:) tags. Without them, your shared link looks like a bare naked URL with no image. Note they use property= not name=. This is why professional pages always share beautifully — it's not automatic, it's these four tags.

Exam Corner

Q: Where do meta tags go and are they visible? In <head>; invisible to visitors, read by browsers/search engines.

Q: What does the viewport meta tag do? Makes the page fit the device width so it's readable on mobile; without it responsive CSS fails on phones.

Q: Ideal meta description length? About 150-160 characters.

Q: Does Google use the keywords meta tag? No — it's ignored today.

Q: Which tags create WhatsApp/Facebook link previews? Open Graph tags (og:title, og:description, og:image, og:url).

Meta Tags क्या हैं

Meta tags page के BAARE में जानकारी हैं, page PAR content नहीं. ये <head> में रहते हैं, visitors को अदृश्य, पर browsers, Google और social media पढ़ते हैं. Structure chapter की लिफाफे वाली analogy याद है? Meta tags लिफाफे पर लिखी details हैं — किसके लिए, कैसे handle करना, अंदर क्या — सही delivery के लिए ज़रूरी भले पढ़ने वाला न देखे.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free HTML tutorials in Hindi.">
     │         │                    │
   hamesha    name = kaunsa meta    content = uski value
   <head> me

Pattern लगभग हमेशा name="..." content="..." है — एक label और उसकी value. (charset अकेला special short form है.)

charset — Encoding (यह मिल चुका है)

<meta charset="UTF-8">

Character encoding, आपके पहले ही structure chapter से. UTF-8 धरती की हर language support करता है — इसके बिना Hindi text और ₹ जैसे symbols ह कचरा बन जाते हैं. यह <head> में PEHLI चीज़ होनी चाहिए, ताकि browser जान ले आगे सब कैसे पढ़ना है. एक line, बिल्कुल non-negotiable.

viewport — Mobile की ज़रूरत

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Phone par ISKE BINA: page zoom-out aur chhota load hota hai, jaise desktop site ko screen par thoos diya ho - padhne layak nahi. ISKE SAATH: page phone ki width me perfect fit hota hai.
Mobile के लिए सबसे ज़रूरी अकेला tag. width=device-width page से कहता है "IS device की screen जितनी चौड़ी बनो" (fixed 980px desktop width नहीं); initial-scale=1.0 शुरुआती zoom normal रखता है. इस line के बिना आपकी सारी responsive CSS phones पर ignore हो जाती है — "responsive" site का mobile पर टूटा दिखने का #1 कारण. हर modern page में ज़रूरी. (यह हमारे CSS course के responsive design chapters से सीधे जुड़ता है.)

description — आपका Google Snippet

<meta name="description"
      content="Learn HTML free with examples in Hindi and English. Complete
               tutorial from basics to HTML5, forms and SEO.">
Google results me, neeli title ke neeche, yeh text aksar dikhta hai: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML Tutorial | CodeKaFunda Learn HTML free with examples in Hindi and English... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • ~150-160 characters रखिए — Google लंबी को काट देता है.
  • INSAANON के लिए लिखिए: यह search results में आपका ad है; अच्छी description ज़्यादा clicks लाती है.
  • name="keywords" भी होता है पर Google अब ignore करता है — पुराने SEO spam ने मार दिया. वहां मेहनत बर्बाद मत कीजिए.

Open Graph — Social Media Previews

<meta property="og:title" content="Free HTML Tutorial">
<meta property="og:description" content="Learn HTML in Hindi with examples">
<meta property="og:image" content="https://codekafunda.in/preview.jpg">
<meta property="og:url" content="https://codekafunda.in/tutorial/html/">
कोई आपका link WhatsApp, Facebook या LinkedIn पर paste करे तो वह सुंदर preview card — title, description और thumbnail — इन्हीं Open Graph (og:) tags से आता है. इनके बिना आपका shared link बिना image के नंगे URL जैसा दिखता है. ध्यान दीजिए ये name= नहीं property= use करते हैं. इसीलिए professional pages हमेशा खूबसूरती से share होते हैं — यह अपने आप नहीं, इन्हीं चार tags से है.

Exam Corner

Q: Meta tags कहां जाते हैं और क्या दिखते हैं? <head> में; visitors को अदृश्य, browsers/search engines पढ़ते हैं.

Q: viewport meta tag क्या करता है? Page को device width में fit करता है ताकि mobile पर पढ़ने लायक हो; इसके बिना responsive CSS phones पर fail.

Q: आदर्श meta description लंबाई? लगभग 150-160 characters.

Q: क्या Google keywords meta tag use करता है? नहीं — आज ignore होता है.

Q: WhatsApp/Facebook link preview कौन-से tags बनाते हैं? Open Graph tags (og:title, og:description, og:image, og:url).
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.