Meta Tags and SEO
Meta tags live in the <head> and are invisible to users but crucial for search engines, social sharing, and browser behavior. They are your most direct way to communicate with Google about your page.
Essential Meta Tags
Example — Complete SEO Head
<head> <!-- Always first in head --> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Google result headline --> <title>Learn HTML Free | CIWeb</title> <!-- Google result snippet text --> <meta name="description" content="22 free lessons, live editor, Shiv AI tutor."/> <!-- Tell Google to index this page --> <meta name="robots" content="index, follow"/> </head>
The title tag is your single most important SEO element. Keep it under 60 characters with your main keyword near the start.
Open Graph Tags — Social Sharing
OG tags control how your page looks when shared on WhatsApp, Facebook, and LinkedIn:
Example — Open Graph Tags
<!-- WhatsApp / Facebook / LinkedIn preview --> <meta property="og:title" content="Learn HTML Free | CIWeb"/> <meta property="og:description" content="22 free lessons and a live editor."/> <meta property="og:image" content="https://ciweb.in/preview.jpg"/> <meta property="og:url" content="https://ciweb.in/courses/learnhtml/"/>
This is how your link looks when someone shares it on WhatsApp. Without og:image you get a blank grey box.
Canonical Link
Example — Canonical URL
<!-- Tells Google which URL is the "real" one --> <link rel="canonical" href="https://ciweb.in/courses/learnhtml/"/>
If your page loads at multiple URLs (with/without www, with query strings), canonical tells Google which one to rank.
Meta Tags ReferenceEssential
meta charsetCharacter encoding. Always UTF-8. Must be first in head
meta viewportMobile display. width=device-width is standard
meta descriptionShown in Google results. 150-160 chars. Affects click rate
meta robotsControls crawling. noindex removes page from Google
og:title og:image og:urlControls social media preview card
twitter:cardsummary_large_image shows big preview on Twitter/X
link canonicalPrevents duplicate content penalty from Google
Meta Description Does NOT Rank
Google does not use meta description as a ranking factor. But it appears in search results and a compelling description increases clicks. More clicks signals relevance to Google over time.
Open Graph Protocol
Open Graph was created by Facebook in 2010 to control how URLs look when shared. It became an industry standard adopted by every social network. The og: prefix stands for Open Graph.