⬅ Previous TopicHTML Headings Best Practices
Next Topic ⮕HTML Linking Structure
Title and Description Tags in HTML
SEO Optimization Guide
Title and Description Tags: Your First Impression in Search Results
The <title> and <meta name="description"> tags are the gateway to your content. They don’t appear on the visible page, but search engines use them to display your site in search results. That makes them powerful tools for visibility, engagement, and click-throughs.
1. The <title> Tag
The <title> tag defines the title of your web page. It appears:
- In the browser tab
- As the blue link in Google search results
- When bookmarking or sharing links
Example:
<title>Cherry vs Banana: Which Fruit Is Healthier?</title>
[ Appears at the top of the browser tab and as the search result headline ]
Best Practices:
- Keep it under 60 characters
- Use your most important keyword early
- Make it specific, unique, and compelling
2. The <meta name="description"> Tag
This tag provides a summary of the page content for search engine snippets. While not a direct ranking factor, it strongly affects click-through rate.
Example:
<meta name="description" content="Compare the nutritional benefits of bananas and cherries. Learn which fruit fits your diet and boosts your health.">
[ Appears as the search snippet below the title ]
Best Practices:
- Keep it under 160 characters
- Make it a call to curiosity — like an ad preview
- Use action phrases: “Learn how”, “Discover”, “Compare”
- Include target keywords naturally
3. Combined Example: Full Head Setup
<head>
<meta charset="UTF-8">
<title>Apple, Banana & Cherry Facts - A Delicious Comparison</title>
<meta name="description" content="Explore the flavors and benefits of apples, bananas, and cherries. Which one will win your heart — and your health?">
</head>
[ Search engines display the title and description in the search results ]
4. SEO Impact of Titles and Descriptions
While the <title> tag is a direct ranking factor, the meta description helps improve click-through rates (CTR), which indirectly boosts rankings.
What Search Engines Do:
- Title: Helps search engines understand page topic and intent
- Description: Summarizes what users can expect if they click
- May rewrite both if your tags are missing, duplicated, or irrelevant
5. Tips for Beginners
Here are some quick tips when writing titles and descriptions:
- Match your page content — avoid clickbait
- Each page should have a unique title and description
- Put your brand name last in the title (if needed)
- A/B test meta tags using analytics to find what works
Summary
Title and description tags are the front door of your HTML page — and your brand. You now know how to:
- Write concise, compelling
<title>tags - Create optimized
<meta name="description">snippets - Understand their impact on search results and click-throughs
What’s Next?
Next up, we’ll dive into building a fully optimized <head> section — including social sharing tags, viewport settings, and performance-oriented meta configurations.