Title tag too long

Where a long title gets cut

The <title> element shows up in more places than the search result. Browser tabs show the first couple of dozen characters, less when many tabs are open. Bookmarks, history entries, and the window switcher use it. Screen readers announce it when the page loads, so a visitor using one hears the full string every time they land on a new page.

Google Search truncates titles by pixel width rather than a fixed character count, and adds an ellipsis where it cuts. It may also replace a title it considers too long, stuffed with keywords, or out of step with the page, using a heading or anchor text instead. Either way, you lose control over the words people read before they click.

Who loses out

Searchers scanning a results page compare the first few words of each title. If every page on a site starts with "Welcome to Example Bakery |", the words that set one page apart from another fall into the truncated zone, and the results all look the same.

This is often a template problem rather than a copywriting one. A CMS theme or a framework layout appends " | Company Name - Tagline Here" to every page, and every page title goes over the limit at once. On an agency handover, that shows up as the same warning on every URL the client audits.

How Skewcheck measures length

Skewcheck reads the text of the <title> element and counts characters. Over 60 characters, the check warns with medium severity and subtracts 4 points from the audit score. A page with no title at all fails instead, with high severity and 8 points deducted, because there is nothing for any browser or search engine to show. A title of 60 characters or fewer passes.

Characters are a proxy for display width, not an exact match. A 58-character title written in wide capital letters can still be truncated, while a 64-character one full of narrow letters might fit. Treat 60 as a ceiling and aim a little under it.

Rewriting the title

Put the words that identify this specific page first and the brand last. Drop "Welcome to", "Home", and "Official Site", which carry no information. Use one short separator such as a pipe or an en dash, and do not list three keyword variations of the same phrase. The home page is the exception: there, the brand name can lead.

In the Next.js App Router, a title template in the root layout adds the brand suffix to every child page. That is convenient, but the suffix counts against every title, so a 16-character suffix leaves 44 characters for the page-specific part. Set a shorter absolute title on pages where the template would push the total over.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "Example Bakery",
    template: "%s | Example Bakery",
  },
};

import type { Metadata } from "next";

export const metadata: Metadata = {
  // Rendered as "Custom Cakes for Weddings and Birthdays | Example Bakery" (56 characters)
  title: "Custom Cakes for Weddings and Birthdays",
};

Edge cases

Titles generated from database fields, such as product names or blog post headlines, need a length budget in the template. Truncate the dynamic part at a word boundary before adding the suffix, rather than letting a 90-character product name through. A title set by JavaScript after the page loads is not what crawlers that skip scripts will see, so render it on the server. Keep exactly one <title> in the document head; if a plugin and a theme both write one, check which one the browser actually uses.

Before and after

<head>
  <title>Welcome to Example Bakery | Artisan Bread, Pastries and Custom Cakes in Portland, Oregon</title>
</head>

<head>
  <title>Custom Cakes for Weddings and Birthdays | Example Bakery</title>
</head>