Menu
Use when auditing page metadata or generating SEO-optimized titles. Applies to every HTML page that should appear in search results.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | meta-title |
| description | Use when auditing page metadata or generating SEO-optimized titles. Applies to every HTML page that should appear in search results. |
| metadata | {"category":"seo","priority":"high","difficulty":"beginner","estimatedTime":"10","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/seo/meta-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.
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.
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.
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.
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
Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList schema. Verify the rendered HTML and HTTP response rather than relying only on source files.
Use when reviewing templates, rendered HTML, or shared components related to Declare UTF-8 character encoding. Validate the final browser-facing markup, not just the source framework abstraction.
Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.
Use when auditing a site's meta tag uniqueness, generating page-specific meta descriptions, or reviewing CMS templates that inject the same description globally.
Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.
