Lesson 14: Meta Tags & SEO Basics
What are Meta Tags?
Meta tags provide information about the HTML document. They go in the <head> section and are not visible on the page but help search engines and browsers understand your content.
Essential Meta Tags
1. Charset
Defines character encoding:
<meta charset="UTF-8">
2. Viewport
Essential for mobile responsiveness:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Description
Appears in search results:
<meta name="description" content="Learn HTML basics for beginners">
4. Keywords (less important now)
<meta name="keywords" content="HTML, tutorial, web development">
5. Author
<meta name="author" content="John Doe">
SEO-Friendly HTML Structure
<!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="Your page description">
<title>Page Title - Keep it under 60 characters</title>
</head>
<body>
Content...
</body>
</html>
Open Graph Tags (Social Media)
Control how your page looks when shared on Facebook, LinkedIn, etc.
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.example.com">
SEO Best Practices
Important for SEO:
- Use one <h1> per page
- Write descriptive <title> tags (50-60 characters)
- Create unique meta descriptions (150-160 characters)
- Use semantic HTML tags
- Add alt text to all images
- Create descriptive URLs
- Use internal linking
- Make site mobile-friendly
- Improve page load speed
💡 Quick SEO Checklist:
- ✓ Descriptive title tag
- ✓ Meta description
- ✓ One H1 tag
- ✓ Proper heading hierarchy
- ✓ Alt text on images
- ✓ Mobile viewport meta tag
- ✓ Valid HTML
Practice Exercise
Try This:
Update your previous project with:
- Proper meta tags in <head>
- Descriptive title and description
- One clear H1 tag
- Proper heading structure (H1→H2→H3)
- Alt text on all images