What are Meta Tags?
Meta tags are like a "business card" for your webpage. They tell Google what your page is about.
Complete Meta Tags Setup:
1<head>
2 <!-- MUST HAVE: Character set -->
3 -< meta charset="UTF-8">
4
5 <!-- MUST HAVE: Mobile responsive -->
6 -< meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- SEO: Title -->
9 -<title>HTML5 Complete Course | Learn HTML Easily 2026</title>
10
11 <!-- SEO: Description -->
12 -< meta name="description" content="Free HTML5 tutorial for beginners to advanced. Learn HTML with examples, practice exercises, and build your first website.">
13
14 <!-- SEO: Keywords -->
15 -< meta name="keywords" content="HTML, HTML5, web development, learn coding, frontend">
16
17 <!-- SEO: Author -->
18 -< meta name="author" content="Deepak Verma">
19
20 <!-- SEO: Robots -->
21 -< meta name="robots" content="index, follow">
22
23 <!-- Open Graph -->
24 -< meta property="og:title" content="HTML5 Complete Course">
25 -< meta property="og:description" content="Free HTML tutorial for beginners">
26 -< meta property="og:image" content="https://mysite.com/course-thumbnail.jpg">
27 -< meta property="og:url" content="https://mysite.com/html-course">
28 -< meta property="og:type" content="website">
29
30 <!-- Twitter Cards -->
31 -< meta name="twitter:card" content="summary_large_image">
32 -< meta name="twitter:title" content="HTML5 Complete Course">
33 -< meta name="twitter:description" content="Free HTML tutorial">
34 -< meta name="twitter:image" content="https://mysite.com/thumb.jpg">
35</head>Title vs Description Strategy (Very Important for SEO):
Element | Where it appears | Ideal Length | Best Practice |
|---|---|---|---|
| Browser tab, Google result title | 50-60 characters | Include main keyword + brand name |
| Google result subtitle (snippet) | 150-160 characters | Summarize page + call to action |
Good Title Examples:
1<!-- Good: Keyword first, brand last -->
2<title>HTML5 Course - Learn HTML Online | Deepak Verma</title>
3
4<!-- Good: Clear and descriptive -->
5<title>Complete HTML5 Tutorial for Beginners | Free 2026 Guide</title>
6
7<!-- Bad: Too short (wastes space) -->
8<title>HTML</title>
9
10<!-- Bad: Too long (gets cut off in Google) -->
11<title>This is a very very long title that will get cut off in Google search results</title>Good Description Examples:
1<!-- Good: Clear summary + call to action -->
2-< meta name="description" content="Learn HTML5 from scratch with this free complete course. Includes examples, exercises, and a final project. Start coding today!">
3
4<!-- Good: Includes keywords naturally -->
5-< meta name="description" content="Master HTML5 with our beginner-friendly tutorial. Covers all tags, forms, semantic layout, and responsive design. No prior experience needed.">
6
7<!-- Bad: Too short -->
8-< meta name="description" content="Learn HTML">
9
10<!-- Bad: Just keywords (Google ignores this) -->
11-< meta name="description" content="HTML, CSS, web, coding, tutorial, learn, free">Why Open Graph (og:) tags matter:
When you share your link on Facebook, WhatsApp, or LinkedIn:
Without Open Graph: Social media picks random text and images from your page (often looks bad)
With Open Graph: You control exactly how it looks (title, description, image)