Techie BabajiLearn to Code. Build Real Skills.
SEO · On-Page SEO

Title Tags and Meta Descriptions

The title and description are your page’s advert in search results. Good ones increase clicks without changing rankings.

Beginner 5 min Lesson 5 of 22
Before you start:Search Intent
0/22 in SEO
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write effective title tags
  • Write useful meta descriptions
  • Keep them unique across pages
  • Set them per route in a React app

Explanation#

Title: unique, descriptive, main topic near the start, roughly 50–60 characters before it gets cut off. Add the brand at the end.

Meta description: around 150–160 characters summarising the page and why to click. It is not a direct ranking factor, but affects click-through.

Google may rewrite titles and descriptions when they do not match the page or the query.

The meta keywords tag is ignored by Google — skip it.

Code example: Good head tags#

HTMLindex.html Illustrative
<head>
  <title>SQL INNER JOIN with Examples – SQL Server Tutorial | Techie Babaji</title>
  <meta name="description" content="Learn SQL Server INNER JOIN step by step: syntax, joining two and three tables, common mistakes and practice queries with answers." />
  <link rel="canonical" href="https://techiebabaji.com/tutorials/sql-server/inner-join" />
  <meta property="og:title" content="SQL INNER JOIN with Examples" />
  <meta property="og:description" content="Join tables in SQL Server with clear examples and practice queries." />
</head>
Expected output
Search: “SQL INNER JOIN with Examples – SQL Server Tutorial | Techie…” followed by the description snippet.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. The topic leads the title; the brand comes last.
  2. The description promises specific value.
  3. The canonical names the preferred URL.
  4. Open Graph tags control social sharing previews.

Real-world use case#

Rewriting vague titles (“Lesson 12”) into descriptive ones raised click-through rate from search noticeably for a tutorial site.

Common mistakes#

The same title on every page

Search engines cannot tell pages apart. Generate unique titles per route.

Keyword-stuffed titles

“SQL Join, SQL Joins, Join SQL…” looks spammy and gets rewritten.

Best practices#

  • Unique title + description per page
  • Topic first, brand last
  • Describe the real content
  • Set them server-side or prerender for SPAs

Remember this#

Title ≈ 50–60 chars, unique, topic first.

Description ≈ 150–160 chars, sells the click.

Meta keywords are ignored.

Practice exercise#

Your task: Write a title for a lesson on React useEffect.

Show solution
HTML Illustrative
<title>React useEffect Hook Explained with Examples | Techie Babaji</title>

Mini quiz#

Title Tags and Meta Descriptions quizTrue or false Question 1 of 1

Google uses the meta keywords tag for ranking.

Score so far: 0/0

Want more? Practise all SEO MCQs · SEO interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.