Title too long

Quick win

Found on 84% of audited stores.

Shorten your page title tag to 60 characters or fewer so it displays fully — without truncation — in Google search results.

What it is

Every web page has a title tag — a short line of HTML that tells search engines and browsers what the page is about. It's the large blue (or purple) clickable headline you see in Google search results. When your title is too long, Google cuts it off mid-sentence and adds "…" at the end. Google's practical display limit is roughly 600 pixels wide, which corresponds to about 50–60 characters in a typical font. Keeping titles within that range ensures shoppers and Google see your full intended message.

Why it matters

A truncated title in search results looks incomplete and unprofessional, which directly reduces click-through rates — and fewer clicks means less organic traffic and revenue, even if you rank well. Google also uses the title as a primary signal for what the page is about; an overstuffed, cut-off title can dilute your target keywords and make it harder to rank for any single term. In some cases, Google will silently rewrite a title it considers too long or spammy, replacing it with text of its own choosing that may not align with your brand or target keywords at all. Fixing title length is a quick win that immediately improves both your rankings and the first impression shoppers have of your store.

How to fix it

  1. Identify the page's current title tag and count its characters (spaces count). Aim for 50–60 characters as your target range.
  2. Lead with the most important keyword or phrase — put your brand name or category at the front, not buried at the end.
  3. Remove filler words, repetitive phrases, legal boilerplate, and anything that doesn't help a shopper or search engine understand the page's unique topic.
  4. If your brand name must appear, add it at the end separated by a pipe or dash (e.g., 'Running Shoes for Men | YourBrand'), and count it in your character budget.
  5. Write the final title, verify the character count is ≤60, and update the title tag in your platform's SEO settings.
  6. Re-crawl or request indexing in Google Search Console and preview the result in a SERP snippet tool to confirm it displays fully.

Fix it on your platform

Pick your platform for the exact steps.

How to fix title too long on Shopify
  1. For a page: go to Online Store → Pages, open the page, scroll to the 'Search engine listing' section at the bottom, and edit the 'Page title' field.
  2. For a product: go to Products → All products, open the product, scroll to 'Search engine listing', and edit the 'Page title' field.
  3. For a collection: go to Products → Collections, open the collection, scroll to 'Search engine listing', and edit the 'Page title' field.
  4. For the homepage: go to Online Store → Preferences and edit the 'Homepage title' field.
  5. Keep every title at or under 60 characters, then click Save.
Full Shopify guide →Official Shopify docs ↗
How to fix title too long on Shopify Plus
  1. Follow the same path as Shopify (Online Store → Pages / Products / Collections → Search engine listing section).
  2. For bulk updates across many products or pages, use a CSV export (Products → Export), edit the 'SEO Title' column in a spreadsheet to ≤60 characters, then re-import via Products → Import.
  3. Alternatively, use the Shopify Admin API or a Shopify Plus automation to update metafields in bulk.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix title too long on WooCommerce
  1. Install and activate the Yoast SEO or Rank Math plugin if not already present.
  2. For a product/page: open the edit screen, scroll to the Yoast SEO / Rank Math meta box at the bottom, click on the 'SEO title' field, and type your new title (the plugin's traffic-light indicator turns green at the right length).
  3. For site-wide title templates: in Yoast go to SEO → Search Appearance → Content Types and edit the title template for Products, Pages, etc. In Rank Math go to Rank Math → Titles & Meta → Products.
  4. Keep the template under 60 characters including any appended brand tokens (%sep% %sitename%).
  5. Click Update/Publish to save.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix title too long on BigCommerce
  1. For a product: go to Products → View, open the product, click the 'SEO' tab, and edit the 'Page Title' field.
  2. For a category: go to Products → Product Categories, open the category, and edit the 'Page Title' field in the 'SEO' section.
  3. For static pages: go to Storefront → Web Pages, open the page, and edit the 'Page Title' field.
  4. For the homepage: go to Storefront → My Theme → Edit Theme Files (or Store Setup → Store Settings → Display) and look for the homepage SEO title field in Storefront → SEO.
  5. Save changes and keep all titles ≤60 characters.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix title too long on Wix
  1. Open the Wix Editor for your site.
  2. Click on the page you want to edit in the Pages & Menu panel, then click the three-dot menu (⋮) next to the page name and select 'SEO Basics' (or 'SEO Settings').
  3. Edit the 'Title tag' field directly, keeping it ≤60 characters.
  4. For product pages in Wix eCommerce: go to your Wix Dashboard → Store Products, open the product, scroll to the 'SEO' section, and edit the 'Page title'.
  5. Click Save/Publish to apply changes.
Full Wix guide →Official Wix docs ↗
How to fix title too long on Wix eCommerce
  1. In your Wix Dashboard go to Store Products, open the product.
  2. Scroll down to the 'SEO' panel and click 'Edit SEO settings'.
  3. Update the 'Title tag' to 60 characters or fewer.
  4. Click Save.
Full Wix eCommerce guide →Official Wix eCommerce docs ↗
How to fix title too long on Squarespace
  1. For regular pages: in the Pages panel, hover over the page, click the gear icon (⚙) to open Page Settings, select the 'SEO' tab, and edit the 'SEO Title' field.
  2. For products (Squarespace Commerce): go to Commerce → Inventory (or your Products page), open the product, click the 'SEO' tab in the product editor, and edit 'SEO Title'.
  3. For the homepage: go to Pages → Homepage → gear icon → SEO tab → SEO Title.
  4. Keep titles ≤60 characters and click Save.
Full Squarespace guide →Official Squarespace docs ↗
How to fix title too long on Squarespace Commerce
  1. Go to Commerce → Inventory in your Squarespace dashboard.
  2. Open the product, select the 'SEO' tab, and update the 'SEO Title' to ≤60 characters.
  3. Click Save.
Full Squarespace Commerce guide →Official Squarespace Commerce docs ↗
How to fix title too long on Webflow
  1. Open the Webflow Designer and select the page from the Pages panel (the page icon on the left sidebar).
  2. Click the gear icon next to the page name to open Page Settings.
  3. Under 'SEO Settings', edit the 'Title Tag' field to 60 characters or fewer.
  4. For CMS collection items (products, blog posts): open the CMS Collection, edit the item, and update the 'Title Tag' field in the item's settings, or update the title template in the Collection's settings to use a shorter dynamic field.
  5. Click Save and publish the site.
Full Webflow guide →Official Webflow docs ↗
How to fix title too long on Adobe Commerce (Magento)
  1. For a product: go to Catalog → Products, open the product, expand the 'Search Engine Optimization' section, and edit the 'Meta Title' field (≤60 characters). Leave it blank to let Magento use the product name — ensure the product name itself is short enough.
  2. For a category: go to Catalog → Categories, open the category, expand 'Search Engine Optimization', and edit 'Meta Title'.
  3. For CMS pages: go to Content → Pages, open the page, select the 'Meta Data' tab (or 'Search Engine Optimization' in newer versions), and edit 'Meta Title'.
  4. For global title suffix/prefix: go to Stores → Configuration → Catalog → Catalog → Product Listings in Search Results / Search Engine Optimization and adjust the title suffix so the total remains ≤60 characters.
  5. Save the configuration and flush the cache (System → Cache Management → Flush Magento Cache).
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix title too long on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento): Catalog → Products / Categories, expand 'Search Engine Optimization', edit 'Meta Title' to ≤60 characters.
  2. Flush the cache via System → Cache Management after saving.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix title too long on WordPress.org
  1. Install and activate Yoast SEO or Rank Math if not already present.
  2. Open any post or page for editing, scroll to the SEO meta box below the editor, and click the 'SEO title' field.
  3. Rewrite the title to ≤60 characters; the character/pixel meter in the plugin will confirm it's within range.
  4. For global templates: in Yoast go to SEO → Search Appearance → Content Types and set a short template. In Rank Math go to Rank Math → Titles & Meta.
  5. Click Update/Publish.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix title too long on PrestaShop
  1. For a product: go to Catalog → Products, open the product, click the 'SEO' tab, and edit the 'Meta title' field (≤60 characters).
  2. For a category: go to Catalog → Categories, open the category, select the 'SEO' tab, and edit 'Meta title'.
  3. For CMS pages: go to Design → Pages, open the page, and edit 'Meta title' in the SEO section.
  4. Save changes.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix title too long on OpenCart
  1. For a product: go to Catalog → Products, edit the product, open the 'SEO' tab (or 'Data' tab in older versions), and edit the 'Meta Tag Title' to ≤60 characters.
  2. For a category: go to Catalog → Categories, edit the category, open the 'SEO' tab, and edit 'Meta Tag Title'.
  3. Save changes and clear the store cache.
Full OpenCart guide →Official OpenCart docs ↗
How to fix title too long on Ghost
  1. Open the post or page in the Ghost editor.
  2. Click the settings gear icon (top right), scroll to 'Meta data', and edit the 'Meta title' field to ≤60 characters.
  3. For the homepage/global title: go to Ghost Admin → Settings → General and update the site title; also check Settings → Code injection for any custom title overrides.
  4. Save the post/page.
Full Ghost guide →Official Ghost docs ↗
How to fix title too long on HubSpot CMS
  1. Go to Marketing → Website → Website Pages (or Landing Pages / Blog).
  2. Open the page editor, click 'Settings' at the top, and edit the 'Page title' field to ≤60 characters.
  3. Click Publish or Update to save.
Full HubSpot CMS guide →Official HubSpot CMS docs ↗
How to fix title too long on Next.js
  1. Audit every page's title: search your codebase for `title:` inside `generateMetadata` (App Router) or `<title>` inside `<Head>` (Pages Router) and list any that exceed 60 characters.
  2. Create a shared utility helper `lib/seo.ts` that trims any title to ≤60 characters at the nearest word boundary — use this everywhere titles are composed.
  3. App Router (`app/**/page.tsx`): update each `generateMetadata` export to pipe its title string through the helper before returning it.
  4. Pages Router (`pages/*/.tsx`): update each `<Head><title>` or `defaultTitle` in `next/head` to pipe through the same helper.
  5. For dynamic routes (e.g. product/category pages), ensure the fetched name/brand combination is truncated before interpolation so the full string — including separators like ` | Brand` — still fits within 60 chars.
  6. Run `next build` and spot-check titles in the generated HTML (`curl` the page or open DevTools) to confirm no title exceeds 60 characters.
Full Next.js guide →Official Next.js docs ↗
How to fix title too long on Nuxt.js
  1. Create a reusable title-truncation utility (e.g. utils/seo.ts) that hard-caps any title at 60 characters, appending an ellipsis only when the raw string exceeds the limit.
  2. In every page component (pages/*.vue) or layout that sets a title, replace the raw title string with the truncated version produced by that utility.
  3. Use useSeoMeta() (preferred in Nuxt 3) or useHead() to set the processed title — both are auto-imported composables; no import statement is needed.
  4. For site-wide / fallback titles defined in nuxt.config.ts (app.head.title / app.head.titleTemplate), apply the same 60-character rule directly in the config string.
  5. After updating, run `nuxi build && nuxi preview` and inspect <title> in page source, or use a browser extension, to confirm no title exceeds 60 characters.
  6. Optionally add a CI lint rule or a Vitest unit test that calls truncateTitle() with a >60-char string and asserts the output length is ≤ 60.
Full Nuxt.js guide →Official Nuxt.js docs ↗
How to fix title too long on Gatsby
  1. Identify every page/template file that sets a <title> — check both the modern Gatsby Head API exports (export function Head()) and any legacy react-helmet <Helmet> components across src/pages/, src/templates/, and shared layout/SEO components (e.g. src/components/Seo.jsx).
  2. Create (or update) a shared utility helper — e.g. src/utils/truncateTitle.js — that enforces a ≤60-character hard limit, preserving the most meaningful part of the title (typically the product/page name) and appending a short brand suffix only when space allows.
  3. In every page/template that uses the Gatsby Head API, import the helper and pass the truncated string to the <title> tag and the og:title <meta> tag inside the exported Head() function.
  4. For any remaining legacy react-helmet usage, apply the same helper inside the <Helmet> component's title prop and the og:title meta content prop.
  5. For programmatic pages (gatsby-node.js / gatsby-config.js), ensure the pageContext or GraphQL data feeding titles is also passed through the truncator so SSR-rendered HTML is already correct at build time.
  6. Run gatsby build && gatsby serve and use browser DevTools → Elements to verify <title> is ≤60 chars on product, collection, blog, and home pages; also confirm og:title matches.
Full Gatsby guide →Official Gatsby docs ↗
How to fix title too long on Next.js (Headless)
  1. Locate every page that sets a `<title>` — in the App Router this means any `generateMetadata()` export or a static `metadata` object; in the Pages Router it means any `<Head>` block using `next/head`.
  2. Create a shared utility (e.g. `lib/seo.ts`) that accepts a raw title string and hard-truncates it to 60 characters, appending an ellipsis only when the string is actually trimmed, so you never silently lose context.
  3. Replace every raw title string in `generateMetadata()` / static `metadata` objects (App Router) or `<title>` tags (Pages Router) with a call to `truncateTitle()`.
  4. For dynamic pages (products, collections, blog posts) that derive their title from an API/CMS, pipe the fetched title through `truncateTitle()` before passing it to `metadata.title`.
  5. Run `next build` and verify via the build output or a `<head>` inspection that no rendered `<title>` exceeds 60 characters.
  6. Optionally write a Jest/Vitest unit test for `truncateTitle()` to prevent regressions when copy is updated.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix title too long on Elementor
  1. In your WordPress dashboard, open the page with the too-long title in the Elementor editor (Pages / Posts → Edit with Elementor).
  2. Scroll down below the Elementor canvas to the document settings panel. If you have Yoast SEO or Rank Math installed, locate the SEO meta box (labeled 'Yoast SEO' or 'Rank Math SEO') directly beneath the editor — do NOT edit the WordPress 'Title' field, as that may differ from the SEO title tag.
  3. In the SEO meta box, click the 'Edit snippet' button (Yoast) or expand the 'General' tab (Rank Math) to reveal the SEO Title field.
  4. Rewrite the SEO Title so it is 60 characters or fewer (use the character counter shown in the meta box — Yoast shows a green bar when the length is optimal; Rank Math displays a live character count).
  5. Keep the most important keyword near the beginning of the title, and remove filler words, redundant brand repetition, or overly verbose descriptors to reach the target length.
  6. Click 'Update' (Yoast / Rank Math snippet editor) and then publish/update the page in Elementor to save all changes. Verify the truncation is resolved by pasting the new title into a SERP snippet preview tool.
Full Elementor guide →Official Elementor docs ↗
How to fix title too long on Remix
  1. Identify the route file responsible for the page with the too-long title (e.g. app/routes/products.$handle.tsx or app/routes/_index.tsx) inside your Remix project.
  2. Open that route file and locate the exported `meta` function — it will look like: `export const meta: MetaFunction = () => [ { title: '...' }, ... ];`
  3. Count the characters in the current title string. Rewrite it to be 60 characters or fewer, keeping the most important keyword(s) near the front (e.g. 'Keyword-Rich Product Name | Brand' instead of a verbose sentence).
  4. If a shared/global title is set in app/root.tsx via its own `meta` export or an `<Links>` / `<Meta>` component, check that file too and shorten any default or fallback title template to stay within 60 characters including the brand suffix.
  5. If you use a title template pattern (e.g. `${pageTitle} | ${siteName}`), calculate the worst-case length: `pageTitle` max chars = 60 minus separator and brand name length, then enforce that limit when generating `pageTitle` dynamically.
  6. Run `npm run dev`, open the page in a browser, inspect the `<title>` tag in DevTools to confirm the rendered title is 60 characters or fewer, then deploy the change.
Full Remix guide →Official Remix docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find title too long — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Title too long?

Every web page has a title tag — a short line of HTML that tells search engines and browsers what the page is about. It's the large blue (or purple) clickable headline you see in Google search results. When your title is too long, Google cuts it off mid-sentence and adds "…" at the end. Google's practical display limit is roughly 600 pixels wide, which corresponds to about 50–60 characters in a typical font. Keeping titles within that range ensures shoppers and Google see your full intended message.

Why does title too long matter?

A truncated title in search results looks incomplete and unprofessional, which directly reduces click-through rates — and fewer clicks means less organic traffic and revenue, even if you rank well. Google also uses the title as a primary signal for what the page is about; an overstuffed, cut-off title can dilute your target keywords and make it harder to rank for any single term. In some cases, Google will silently rewrite a title it considers too long or spammy, replacing it with text of its own choosing that may not align with your brand or target keywords at all. Fixing title length is a quick win that immediately improves both your rankings and the first impression shoppers have of your store.

How do I fix title too long?

Shorten your page title tag to 60 characters or fewer so it displays fully — without truncation — in Google search results.

Authoritative references

Related SEO issues