HTML <meta> ടാഗ് എന്താണ്?
HTML <meta> ടാഗ് ഒരു വെബ്ബ് പേജിന്റെ metadata, അല്ലെങ്കിൽ പുറം ലോകത്തിന് കാണാത്ത വിവരങ്ങൾ, നൽകാൻ ഉപയോഗിക്കുന്നു. Metadata ഒരു പേജിന്റെ വിവരങ്ങളെക്കുറിച്ചുള്ള ഡാറ്റയാണ്, ഇത് സെർച്ച് എഞ്ചിനുകൾ, ബ്രൗസറുകൾ, മറ്റു വെബ്ബ് സേവനങ്ങൾ എന്നിവ ഉപയോഗിക്കുന്ന പ്രധാന വിവരങ്ങളാണ്. <meta>ടാഗുകൾ തലയിലോ <head> ടാഗിനുള്ളിലാണ് ഉൾപ്പെടുത്തുന്നത്.
HTML <meta> ടാഗിന്റെ ഘടന:
<meta name="description" content="This is an example of a meta description.">
Commonly Used <meta> Tags:
- Description Meta Tag:നിങ്ങളുടെ വെബ്ബ് പേജിന്റെ ഒരു ചുരുക്കം സെർച്ച് എഞ്ചിനുകൾക്ക് നൽകുന്നു. ഇത് SEO-യ്ക്കും പ്രാധാന്യമുണ്ട്.htmlCopy code
<meta name="description" content="A detailed description of this web page."> - Keywords Meta Tag:നിങ്ങളുടെ പേജിന്റെ ഉള്ളടക്കവുമായി ബന്ധപ്പെട്ട കീവേഡുകൾ നൽകുന്നു. ഇത് SEO-യുമായി നേരിട്ട് ബന്ധമുള്ളതാണെങ്കിലും, ഇത് ഇന്ന് വളരെ പ്രാധാന്യമില്ലാതെ പോവുകയാണ്.htmlCopy code
<meta name="keywords" content="HTML, meta tags, SEO"> - Viewport Meta Tag:മൊബൈൽ പേജുകളുടെ റെസ്പോൺസിവ് ഡിസൈൻ മെച്ചപ്പെടുത്തുന്നതിനും സ്ക്രീൻ വലിപ്പം ക്രമീകരിക്കുന്നതിനുമുള്ള പ്രധാന ടാഗാണ്.htmlCopy code
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Charset Meta Tag:പേജിൽ ഉപയോഗിക്കുന്ന അക്ഷരമാലകൾ എങ്ങനെ എൻകോഡ് ചെയ്യപ്പെടണം എന്ന് വ്യക്തമാക്കുന്നു. സാധാരണയായി UTF-8 ആണ് ഉപയോഗിക്കുന്നത്.htmlCopy code
<meta charset="UTF-8"> - Author Meta Tag:പേജ് രചിച്ച വ്യക്തിയെ തിരിച്ചറിയുന്നു.htmlCopy code
<meta name="author" content="Arjun PV">
Robots Meta Tag:
Robots Meta Tag സെർച്ച് എഞ്ചിനുകൾക്ക് നിങ്ങളുടെ പേജിനെ എങ്ങനെ ക്രawl ചെയ്യണം എന്നതിനെക്കുറിച്ചുള്ള നിർദ്ദേശങ്ങൾ നൽകുന്നു.
<meta name="robots" content="index, follow">
- index, noindex: പേജ് ഇൻഡക്സുചെയ്യേണ്ടതാണോ എന്ന് തീരുമാനിക്കുന്നു.
- follow, nofollow: പേജിലെ ലിങ്കുകൾ പിന്തുടരണമോ എന്ന് സെർച്ച് എഞ്ചിനുകൾക്ക് നിർദ്ദേശിക്കുന്നു.
Open Graph Meta Tags (Social Media Integration):
Open Graph Meta Tags സോഷ്യൽ മീഡിയ പേജുകൾക്കുള്ള പ്രിവ്യൂ മെച്ചപ്പെടുത്തുന്നതിനും സമയത്ത് ഉപയോഗിക്കുന്നു. ഈ ടാഗുകൾ നിങ്ങളുടെ വെബ്ബ് പേജിന്റെ വിവരങ്ങൾ പങ്കിടുമ്പോൾ മികച്ച പ്രിവ്യൂ നൽകുന്നു.
<meta property="og:title" content="Web Page Title">
<meta property="og:description" content="A detailed description of the page.">
<meta property="og:image" content="https://example.com/image.jpg">
Twitter Card Meta Tags:
നിങ്ങളുടെ പേജ് Twitter-ൽ പങ്കിടുമ്പോൾ പ്രിവ്യൂ മെച്ചപ്പെടുത്താനും Twitter Card Meta Tags ഉപയോഗിക്കുന്നു.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Web Page Title">
<meta name="twitter:description" content="A detailed description of the page.">
<meta name="twitter:image" content="https://example.com/image.jpg">
HTTP-EQUIV Meta Tags:
HTTP-Headers സെർവറിന്റെ പകർപ്പ് നടത്തുന്നതിനും ഈ ടാഗുകൾ ഉപയോഗിക്കുന്നു.
- Refresh:പേജുകൾ ഒരു നിശ്ചിത സമയം കഴിഞ്ഞ് സ്വതന്ത്രമായി റിഫ്രഷ് ചെയ്യാൻ.htmlCopy code
<meta http-equiv="refresh" content="30"> - Content-Type:പേജിന്റെ കണ്റൻ്റ് ടൈപ്പ് നിർണ്ണയിക്കുന്നു.htmlCopy code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Importance of Meta Tags in SEO:
- Search Engine Ranking:
- Description Tag: നിങ്ങളുടെ പേജിന്റെ ഒരു ചുരുക്കം സെർച്ച് എഞ്ചിൻ ഫലങ്ങളിൽ പ്രദർശിപ്പിക്കാം.
- Keywords Tag: പരിഗണനയില്ലെങ്കിലും, അടിത്തട്ടിലെ ചില ഫലങ്ങൾക്കായി ഇത് പ്രയോജനപ്പെടാം.
- Social Media Sharing:
- Open Graph and Twitter Tags: നിങ്ങളുടെ വെബ്ബ് ലിങ്കുകൾക്ക് മികച്ച പ്രിവ്യൂ (പ്രിവ്യൂ ഇമേജ്, ടൈറ്റിൽ) നൽകുന്നു.
- Mobile Responsiveness:
- Viewport Meta Tag: മൊബൈൽ ഉപകരണങ്ങളിൽ പേജ് റെസ്പോൺസീവ് ആക്കാൻ പ്രധാന പങ്ക് വഹിക്കുന്നു.
Example of Meta Tags in a Web Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML meta tags and their importance in SEO.">
<meta name="author" content="Arjun PV">
<meta name="robots" content="index, follow">
<meta property="og:title" content="HTML Meta Tags">
<meta property="og:description" content="A detailed guide on HTML meta tags.">
<meta property="og:image" content="https://example.com/meta-image.jpg">
<title>HTML Meta Tags</title>
</head>
<body>
<h1>Understanding HTML Meta Tags</h1>
</body>
</html>
സങ്കലനം:
HTML <meta> ടാഗുകൾ വെബ്ബ് പേജിന്റെ metadata, അവയുടെ പ്രദർശനം, സേർച്ച് എഞ്ചിനുകൾ, ബ്രൗസറുകൾ, സോഷ്യൽ മീഡിയ പ്ളാറ്റ്ഫോമുകൾ എന്നിവയെന്തായിരിക്കണം എന്ന് നിർണ്ണയിക്കാൻ സഹായിക്കുന്നു. SEO-യ്ക്കും, മൊബൈൽ റെസ്പോൺസിവിനും, പ്രദർശനത്തിനും ഇവ വലിയ പങ്ക് വഹിക്കുന്നു.
