Fix: Title tag too long

Google truncates title tags exceeding 60 characters (or roughly 580 pixels) with an ellipsis. A truncated title cuts off your primary value proposition or brand name right when users decide what to click in search results. Titles over 70 characters drop click-through rates because users see an incomplete thought. Indxel enforces a strict limit: titles between 61-70 characters trigger a warning, and anything above 70 characters fails as a critical error. The title-length rule (weight: 8/100) requires you to keep titles within the 50-60 character boundary, ensuring your exact text renders predictably on both mobile and desktop screens.

Missing this limit means you surrender your messaging to Google's rendering engine. When you ship a 96-character title, the trailing 36 characters are dead weight in the DOM. They consume payload size, dilute keyword density, and never reach the user's retina.

How do you detect title tags that are too long?

Run npx indxel check in your terminal to scan your project. The CLI outputs warnings for titles over 60 characters and errors for titles over 70 characters, formatted exactly like ESLint output.

The Indxel CLI parses your built HTML and evaluates the exact string length of the <title> node. It strips HTML entities and whitespace to calculate the true visible character count.

$ npx indxel check
 
Checking 47 routes for SEO regressions...
 
/blog/how-to-configure-redis-caching-in-nodejs
  Warning: title-length  Title is 68 characters. Google truncates at ~60.
 
/enterprise/contact-sales-and-support-team
  Error:   title-length  Title is 82 characters. Must be under 70.
 
✖ 1 error, 1 warning found.

How to fix long title tags in Next.js and HTML?

Move primary keywords to the front, remove filler words, and utilize template strings to automatically manage brand suffix length across your application.

The most common mistake developers make is hardcoding the brand name into every individual page title, leading to inconsistent lengths and guaranteed truncation.

Next.js App Router

Next.js 13+ provides a built-in title.template property in the Metadata API. Define your brand suffix once in the root layout.tsx. In your individual page.tsx files, define only the specific page title. Next.js handles the string concatenation.

Bad pattern: Hardcoding the full string (96 characters).

// app/pricing/page.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  // 96 characters — Fails Indxel validation.
  // Renders as: "The Ultimate Guide to Enterprise Pricing Plans and Feature Matrices | Acme Corp Solutions"
  title: 'The Ultimate Guide to Enterprise Pricing Plans and Feature Matrices | Acme Corp Solutions',
}

Good pattern: Using title.template (48 characters total).

// app/layout.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme | Cloud Infrastructure',
  },
}
 
// app/pricing/page.tsx
import { Metadata } from 'next'
 
export const metadata: Metadata = {
  // 39 characters. Combined with layout template: 48 characters.
  // Renders as: "Enterprise Pricing and Feature Matrices | Acme"
  title: 'Enterprise Pricing and Feature Matrices',
}

When writing the page-level title, you must account for the length of your template string. If your template is | Acme (7 characters), your page title string cannot exceed 53 characters.

Next.js Pages Router

If you maintain a legacy Next.js Pages Router application, you lack the Metadata API. You must construct the title string manually and inject it into the next/head component.

Create a standard SEO component to enforce length constraints programmatically before the tag renders.

// components/Seo.tsx
import Head from 'next/head'
 
interface SeoProps {
  title: string;
}
 
export function Seo({ title }: SeoProps) {
  const brand = ' | Acme'
  const fullTitle = `${title}${brand}`
  
  if (fullTitle.length > 70 && process.env.NODE_ENV === 'development') {
    console.error(`Title length exceeds 70 characters: ${fullTitle}`)
  }
 
  return (
    <Head>
      <title>{fullTitle}</title>
    </Head>
  )
}

Plain HTML

For static sites, locate the <title> tag inside the <head> document. Manually count the characters and trim filler words like "complete", "ultimate", or "comprehensive".

Bad HTML:

<head>
  <title>Our Company Offers the Best Cloud Hosting Solutions for Small Businesses</title>
</head>

Fixed HTML:

<head>
  <title>Cloud Hosting Solutions for Small Business</title>
</head>

The Indxel SDK Approach

If you use the Indxel SDK to manage metadata, use the defineSEO method. This method includes built-in runtime validation that catches length violations during local development before you even run the CLI.

import { defineSEO } from '@indxel/core'
 
export const metadata = defineSEO({
  // Throws a dev-time warning in your terminal if length > 60
  title: 'Serverless Database Infrastructure',
  siteName: 'Indxel',
  titleSeparator: ' | '
})

How do you prevent long titles in CI?

Add npx indxel check --ci to your build pipeline. This command fails the build automatically if any page exceeds the 70-character title error threshold.

Manual checks fail. Developers copy-paste boilerplate, marketers request verbose titles, and CMS content editors push long strings. The only reliable prevention is a CI guard that blocks merges.

GitHub Actions Integration

Create a dedicated workflow that runs Indxel against your built application. The --diff flag ensures you only scan routes modified in the current Pull Request, keeping CI times under 10 seconds.

name: SEO Guard
on: [pull_request]
 
jobs:
  indxel-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build Next.js app
        run: npm run build
        
      - name: Run Indxel SEO validation
        run: npx indxel check --ci --diff origin/main

Vercel Build Command

If you deploy on Vercel, intercept the build process directly. Modify your build command in the Vercel dashboard or vercel.json to run Indxel immediately after the Next.js build completes.

{
  "buildCommand": "next build && npx indxel check --ci"
}

What are the edge cases for title length calculation?

Dynamic routes fetching external data often inject strings of unpredictable length. You must truncate database fields before passing them to the metadata API.

Dynamic Route Truncation

When generating titles from a headless CMS or database, you cannot trust the input length. A content editor will eventually publish a 100-character blog post title. If you pipe that directly into generateMetadata, your site will fail the Indxel check and render poorly in SERPs.

Implement a smart truncation utility that cuts the string at the nearest word boundary, rather than splitting a word in half.

// utils/truncate.ts
export function truncateTitle(text: string, maxLength: number = 50): string {
  if (text.length <= maxLength) return text;
  
  // Cut string at max length
  const truncated = text.slice(0, maxLength);
  
  // Find the last space to avoid cutting words in half
  const lastSpace = truncated.lastIndexOf(' ');
  
  // If no space found, just return the hard cut. Otherwise, cut at the space.
  return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}

Use this utility inside your dynamic metadata generation:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'
import { truncateTitle } from '@/utils/truncate'
import { getPost } from '@/lib/cms'
 
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)
  
  // Truncate to 50 chars to leave 10 chars for the " | Brand" template
  const safeTitle = truncateTitle(post.title, 50)
  
  return {
    title: safeTitle,
  }
}

Absolute Titles overriding Templates

In Next.js, setting title.absolute bypasses the title.template entirely. Developers often use this for the homepage, where they want "Brand | Slogan" instead of "Home | Brand".

When using absolute, you are responsible for the entire string length. Indxel evaluates the final rendered HTML, so it will accurately flag an absolute title that exceeds 60 characters.

// app/page.tsx
export const metadata: Metadata = {
  title: {
    // This ignores the layout template. Total length: 39 characters.
    absolute: 'Acme | High-Performance Cloud Computing',
  },
}

HTML Entity Expansion

Characters like & are often written as & in HTML. While & is 5 characters in the source code, it renders as 1 character visually.

Indxel's parsing engine automatically decodes HTML entities before calculating string length. You do not need to artificially shorten your titles to account for entity encoding. A title containing Jack & Jill is evaluated as 11 characters, not 15.

What related rules check title integrity?

The missing-title rule ensures the tag exists, while meta-description-too-long enforces the 155-character limit on descriptions.

• missing-title: Fails the build if the <title> tag is entirely absent or empty. Google will generate its own title based on H1s or random text on the page, which is universally worse for CTR.
• meta-description-too-long: Validates the <meta name="description"> tag against a 155-character threshold. Like titles, descriptions truncate, but they offer more runway.
• duplicate-title: Scans your entire sitemap and flags pages that share the exact same title string. Every indexable page requires a unique title.

FAQ

What is the ideal title tag length?

50-60 characters. Google displays up to ~60 characters (or 580 pixels wide). Titles between 30-49 or 61-70 characters trigger an Indxel warning. Below 30 or above 70 is flagged as a critical error.

Does title length directly affect rankings?

Title length itself is not a direct ranking factor, but truncated titles get fewer clicks. Lower click-through rates signal to search engines that your page fails to satisfy user intent, which indirectly depresses your ranking position over time.

Why does Indxel use character counts instead of pixel width?

Character counting provides deterministic, instant validation in CI environments without requiring a headless browser. Calculating exact pixel width requires rendering the specific font stack (usually Arial) in a DOM environment, which adds 2-3 seconds per page to your build time. The 60-character limit is a mathematically safe heuristic that prevents 99% of truncation issues.

How do I handle user-generated content titles?

Truncate the string programmatically before passing it to the metadata API. Never trust user input to adhere to SEO constraints. Use a utility function to slice the string at the nearest word boundary under 50 characters, leaving room for your brand template.