Title Tags & Meta Tags: A Friendly, Complete Tutorial for Students

Learn how to write every important HTML title and meta tag step by step. We’ll cover what each tag does, show good vs. bad examples, and give you a quick checklist to master all your pages!

Beginner student learning how to write HTML meta tags and title tags for better SEO ranking.

1. Title Tag

What it does

Defines the page’s title. Displays as the clickable blue headline in search results and the browser tab label.

HTML

<title>Your Page Title Here</title>

Good Practice

  • Length: 50–60 characters
  • Keyword placement: Main keyword in first 3–5 words
  • Unique: Every page must have its own title
  • Format suggestion: Keyword | Benefit – Brand/Location
Example (Good) 
<title>Python Course in Sikar | Beginner to Advanced – TMS Computer Class</title>
Example (Bad) 
<title>Home</title>

Too generic, no keyword.

2. Meta Description

What it does

Summarizes the page under the title in search results—a “movie trailer” for your content.

HTML

<meta name="description" content="Your summary here" />

Good Practice

  • Length: 120–160 characters
  • Include keyword naturally
  • Highlight benefits and a call to action
  • Unique for each page
Example (Good) 
<meta name="description" content="Learn Python programming with hands-on projects. Beginner to advanced course in Sikar. Enroll now for job assistance!" />
Example (Bad) 
<meta name="description" content="We teach Python." />

Too short, no benefit or CTA.

3. Meta Keywords (Optional / Deprecated)

What it does
Lists keywords for search engines (mostly ignored today).

HTML

<meta name="keywords" content="python, programming, course, sikar" />

Tip: Skip this unless a specific tool requires it.

4. Meta Robots

What it does
Instructs search engines how to index and follow links on the page.

HTML

<meta name="robots" content="index, follow" />

Options

  • index, follow (default)
  • noindex, nofollow (hide page and links)
  • noindex, follow (hide page but follow links)

5. Meta Charset

What it does
Sets the character encoding for your page.

<meta charset="UTF-8" />

Always include at the top of <head>.

6. Meta Viewport

What it does
Ensures responsive layout on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Always include for mobile-friendly design.

7. Canonical Link

What it does
Prevents duplicate-content issues by specifying the preferred URL.

<link rel="canonical" href="https://example.com/your-page" />

5. Open Graph Tags (Social Previews)

What they do
Enhance how your page looks when shared on Facebook, LinkedIn, etc.

HTML

<meta property="og:title" content="Python Course in Sikar" />
<meta property="og:description" content="Hands-on Python projects from beginner to advanced." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/python-course" />
<meta property="og:type" content="website" />

Twitter Card Tags

What they do
Optimize your page’s appearance on Twitter.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Python Course in Sikar" />
<meta name="twitter:description" content="Hands-on Python projects from beginner to advanced." />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Google Site Verification

What it does
Verifies your site ownership in Google Search Console.

<meta name="google-site-verification" content="your_verification_token" />

Author Tag

What it does
Specifies the page’s author.

<meta name="author" content="TMS Computer Class" />

Refresh / Redirect Meta

What it does
Automatically redirects or refreshes a page after a set time (use sparingly).

<meta http-equiv="refresh" content="5;url=https://example.com/new-page" />

6. Putting It All Together

Here is a complete <head> example you can copy into your pages:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Python Course in Sikar | Beginner to Advanced – TMS Computer Class</title>
  <meta name="description" content="Learn Python programming with hands-on projects. Beginner to advanced course in Sikar. Enroll now for job assistance!" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://tmscomputersikar.com/python-course" />

  <!-- Open Graph -->
  <meta property="og:title" content="Python Course in Sikar" />
  <meta property="og:description" content="Hands-on Python projects from beginner to advanced." />
  <meta property="og:image" content="https://tmscomputersikar.com/image.jpg" />
  <meta property="og:url" content="https://tmscomputersikar.com/python-course" />
  <meta property="og:type" content="website" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Python Course in Sikar" />
  <meta name="twitter:description" content="Hands-on Python projects from beginner to advanced." />
  <meta name="twitter:image" content="https://tmscomputersikar.com/image.jpg" />

  <meta name="google-site-verification" content="your_verification_token" />
  <meta name="author" content="TMS Computer Class" />
</head>

7. Quick Reference Checklist

  • Title Tag: 50–60 chars, keyword first, unique
  • Meta Description: 120–160 chars, benefit + CTA, unique
  • Meta Robots: correct crawl/index instructions
  • Meta Charset: UTF-8 at top
  • Meta Viewport: for mobile layout
  • Canonical: prevent duplicates
  • OG Tags: title, description, image, URL, type
  • Twitter Tags: card, title, description, image
  • Site Verification & Author: as needed
Use this guide to teach students:
  1. Explain what each tag does with one example
  2. Show a Good vs Bad example (use the .good / .bad styles)
  3. Practice writing 5 title/meta pairs for different pages
  4. Run quick tests in the browser (view-source / Inspect)

Happy blogging and teaching! If you want, I can convert this into a downloadable PDF or create a 1-page cheat sheet for students.