Lesson 15.1: Page Title () and Meta Description</h2>
<p>
The <code><title></code> element and the <code><meta name='description'></code> tag are two of the most critical pieces of metadata in the <code><head></code> section of an HTML document. They affect search engine optimization (SEO), browser display, accessibility, and how your page appears when shared on social networks.
</p>
<h3>1. The Title Element (<title>)</h3>
<ul>
<li><strong>Purpose</strong>: Defines the page’s title, shown in browser tabs, bookmarks, and search engine results as the clickable headline.</li>
<li><strong>Location</strong>: Mandatory child of <code><head></code>. Only one per document.</li>
<li><strong>Best Practices</strong>:
<ul>
<li>Keep it around 50–60 characters to avoid truncation in search results.</li>
<li>Place important keywords near the beginning.</li>
<li>Make it descriptive, unique per page.</li>
</ul>
</li>
</ul>
<h3>Example 1: Basic Title and Meta Description</h3>
<pre class='EnlighterJSRAW' data-enlighter-language='html'>
<!-- Basic head with title and meta description -->
<head>
<title>My Awesome Product Page – Widgets Co.
2. Meta Description
The <meta name='description'> tag provides a short summary of the page’s content. Search engines often display this summary under the title in search results.
- Location: Child of
<head>. You can only use onedescriptionmeta tag. - Length: Aim for 150–160 characters. Too short may be uninformative; too long gets truncated.
- Content:
- Include important keywords naturally.
- Use an active voice and a call-to-action if appropriate.
- Avoid duplicate descriptions across multiple pages.
Example 2: Meta Description Length and Special Characters
Ultimate Travel Guide: Paris in 7 Days
3. SEO and Accessibility Impact
- SEO:
- Search engines use the title and description to rank and display your page.
- Well-crafted metadata can improve click-through rates (CTR).
- Accessibility:
- Screen readers announce the page title when users open a tab.
- Clear titles help users navigate between multiple open documents or tabs.
4. Social Media and Open Graph
While <title> and meta description cover basics, social platforms often look for Open Graph or Twitter Card meta tags. However, if those are missing, they fall back to standard metadata.
5. Common Pitfalls
| Issue | Consequence | Solution |
|---|---|---|
| Too long title | Truncation in search results | Shorten to 50–60 characters |
| No meta description | Search engines auto-generate snippet (may be suboptimal) | Write a concise custom description |
| Duplicate descriptions | Confuses search engines, dilutes SEO | Create unique description per page |
Missing <title> |
Browser may display URL, accessibility suffers | Always include a <title> element |
6. Advanced Example: Dynamic Title and Description
{{ product.name }} – ShopCo
In summary, the <title> and meta description are small in code size but large in impact. Use precise, descriptive text, stick to recommended lengths, and ensure uniqueness across your site to maximize SEO, accessibility, and user engagement.
Leave a Reply
You must be logged in to post a comment.