HTML मेटा टैग्स
In this page:
<meta name="name" content="value">
<meta charset="UTF-8">
<meta http-equiv="header" content="value">बेसिक मेटा टैग्स
description meta tag सर्च इंजनों को बताता है कि आपका page किस बारे में है। यह Google search results में आपके page title के नीचे snippet के रूप में दिखता है। description को लगभग 160 characters के अंदर रखने से यह search results में कटने से बचता है।
- search results में सबसे अच्छे display के लिए meta descriptions को 150-160 characters के बीच रखें।
- Accepted attributes:
- name — description | keywords | author | robots | viewport | theme-color
- content — value for that name
- charset — utf-8
- http-equiv — refresh | content-security-policy | content-type
उदाहरण: Basic Meta Tags
<meta name="description" content="Learn HTML basics with simple examples.">ओपन ग्राफ मेटा टैग्स
Open Graph tags यह control करते हैं कि आपका page Facebook, LinkedIn, या WhatsApp पर share होने पर कैसा दिखे। इनके बिना platforms अंदाज़ा लगाकर कुछ दिखाते हैं और अक्सर गलत हो जाता है।
publish करने से पहले link debugger से अपने Open Graph tags test करने से किसी शर्मनाक टूटे हुए preview card से बचा जा सकता है।
- हमेशा og:image शामिल करें — images वाले posts पर काफी ज़्यादा engagement मिलता है।
- Accepted attributes:
- property — og:title | og:description | og:image | og:url | og:type
- content — value for that property
उदाहरण: Open Graph Meta Tags
<meta property="og:title" content="My Page">
<meta property="og:image" content="https://example.com/preview.jpg">व्यूपोर्ट मेटा टैग
viewport meta tag यह control करता है कि mobile devices पर page कैसे scale हो -- इसके बिना, phones page को fixed desktop width पर render करके फिर उसे छोटा कर देते हैं, जिससे text और buttons इस्तेमाल करने में बहुत छोटे हो जाते हैं।
- Accepted attributes:
- name — viewport
- content — width=device-width | initial-scale=1 | minimum-scale | maximum-scale | user-scalable=yes|no
उदाहरण: Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">कैरेक्टर एनकोडिंग मेटा टैग
charset meta tag browser को बताता है कि page का text decode करते समय कौन-सा character encoding इस्तेमाल करना है, और UTF-8 standard choice है क्योंकि यह लगभग हर भाषा के letters और symbols सही तरीके से display करता है।
- Accepted attributes:
- charset — utf-8
उदाहरण: Character Encoding Meta Tag
<meta charset="UTF-8">Author और Keywords मेटा टैग्स
author meta tag बताता है कि किसी page को किसने लिखा या maintain किया है, और keywords meta tag कभी शुरुआती सर्च इंजनों द्वारा इस्तेमाल होता था, लेकिन Google जैसे आधुनिक इंजन अब इसे पूरी तरह ignore करते हैं और असल page content पर निर्भर रहते हैं।
- Accepted attributes:
- name — author | keywords
- content — free text (comma-separated for keywords)
उदाहरण: Author and Keywords Meta Tags
<meta name="author" content="Jane Doe">
<meta name="keywords" content="html, tutorial, web">Chapter Quiz — Complete all 20 topics to unlock
0/20 topics done
Complete these topics first:
- HTML Keyboard Shortcuts
- HTML Browser Support
- HTML Character Sets
- HTML Doctypes
- HTML Audio/Video Reference
- HTML Meta Tags
- HTML ARIA Roles
- HTML Input Validation
- HTML Iframe Security
- HTML Responsive Images
- HTML Web Fonts
- HTML Icon Fonts
- HTML Progress & Meter
- HTML Output Element
- HTML Datalist
- HTML Image Maps
- HTML Browser DevTools
- HTML Validation
- HTML Quiz
- HTML Interview Prep