Meta Title

Name: Meta Title
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Verifies each page has a unique title tag of 50 to 60 characters with the primary keyword near the start, and fixes ones that are missing or duplicated.

About

Audits the title tag on every page for uniqueness, length, and keyword placement since it is a confirmed Google ranking signal and drives click-through. A developer uses it when auditing page metadata or generating SEO titles.

Target 50-60 characters to avoid SERP truncation
Put the primary keyword near the start, avoid duplicates

Meta Title by the numbers

1 all-time installs (skills.sh)
Ranked #1,710 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill meta-title

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/meta-title.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/meta-title)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Verifies each page has a unique title tag of 50 to 60 characters with the primary keyword near the start, and fixes ones that are missing or duplicated.

Files

SKILL.mdMarkdownGitHub ↗

Write a descriptive page title

The <title> tag is the most prominent element in search result listings and browser tabs—it directly influences click-through rates and is a confirmed Google ranking signal.

Quick Reference

Every page must have a unique <title> tag inside <head>
Target 50–60 characters to avoid truncation in SERPs
Put the primary keyword near the beginning of the title
Avoid duplicate titles across pages

Check

Check the <head> section for a <title> tag. Verify it is unique (not duplicated on other pages), between 10 and 60 characters, and contains the page's primary keyword.

Fix

Add or update the <title> tag in <head>. Write a descriptive title of 50–60 characters that includes the primary keyword near the start and is unique across the site. Do not stuff keywords.

Explain

The <title> tag appears as the clickable headline in search results and browser tabs. It is a primary on-page SEO factor—Google uses it to understand what the page is about and displays it to users deciding whether to click.

Code Review

Check the <head> for a <title> element. Verify: (1) exactly one <title> tag exists, (2) text content is between 10 and 60 characters, (3) the title is not identical to other pages' titles, (4) the primary keyword appears in the first half of the title, (5) the title is not empty or contains only a brand name.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/seo/meta-title

Write a descriptive page title

Validates page title presence and length

Priority: high · Difficulty: beginner · Time: 10 min

--- The <title> tag is the single most important on-page SEO element. It appears in browser tabs, bookmarks, and as the headline in search result listings.

Code Examples

<!-- ✅ Good: Descriptive, ~55 chars, keyword-first -->
<head>
  <title>Sourdough Bread Recipe — Step-by-Step Guide | BakeCo</title>
</head>

<!-- ❌ Bad: Too short and non-descriptive -->
<head>
  <title>Page</title>
</head>

<!-- ❌ Bad: Keyword-stuffed -->
<head>
  <title>Bread Bread Recipes Bread Baking Best Bread</title>
</head>

Why It Matters

The <title> tag is the most prominent element in search result listings and browser tabs—it directly influences click-through rates and is a confirmed Google ranking signal.

Character Length Guidelines

Length	Result
< 10 characters	Too short — not descriptive
10–60 characters	Ideal — displays fully in SERPs
61–70 characters	May be truncated
> 70 characters	Truncated in most search results

Note: Google measures in pixels (~600px max), so exact character count varies with the characters used.

Title Patterns by Page Type

Page Type	Pattern	Example
Homepage	Brand name + tagline	`BakeCo – Artisan Bread Recipes`
Blog post	Topic + Brand	`How to Score Sourdough
Product page	Product name + key attribute	`Cast Iron Dutch Oven 5.5 Qt – BakeCo`
Category	Category name + Brand	`Sourdough Recipes

Next.js Implementation

// app/blog/[slug]/page.tsx

  const post = await getPost(params.slug)
  return {
    title: `${post.title} | BakeCo`,
  }
}

// app/layout.tsx — default title template

  title: {
    template: '%s | BakeCo',
    default: 'BakeCo – Artisan Bread Recipes',
  },
}

Common Mistakes

<!-- ❌ Bad: Missing title entirely -->
<head>
  <meta charset="UTF-8" />
  <!-- no <title> -->
</head>

<!-- ✅ Good: Unique title per page -->
<head>
  <title>Sourdough Starter Guide | BakeCo</title>
</head>

<!-- ❌ Bad: Same title on every page -->
<head>
  <title>BakeCo</title>  <!-- used on every page -->
</head>

Exceptions

Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.