How to fix meta description too long on Remix

Steps for Remix

1. Identify the route file(s) responsible for the page(s) with the too-long meta description — e.g. `app/routes/products.$handle.tsx` or `app/routes/_index.tsx` — inside your Remix project.
2. Locate the exported `meta` function in that route file. It will look like: `export const meta: MetaFunction = ({ data }) => { return [ ... ]; };`
3. Find the object in the returned array where `name: 'description'` is set, for example: `{ name: 'description', content: 'Your current long description here…' }`.
4. Edit the `content` value so it is between 150 and 160 characters (inclusive). Use a character-counting tool or your editor's status bar to verify the exact length before saving.
5. If the meta description is dynamically generated from a loader (e.g. pulled from a CMS or `data.product.seo.description`), truncate it safely in the `meta` function: `content: data.product.seo.description.slice(0, 155) + (data.product.seo.description.length > 155 ? '…' : '')` — but prefer crafting a meaningful description rather than a hard cut.
6. Run `npm run dev` (or `remix dev`) locally, inspect the `<meta name="description">` tag in the browser's DevTools under the `<head>` element to confirm the rendered length, then deploy the updated route file.

What is meta description too long?

A meta description is the short paragraph of text that appears beneath your page title in Google search results (the "snippet"). It is written in your page's HTML and is meant to entice searchers to click your link. Google recommends keeping it under roughly 160 characters — including spaces and punctuation. When it is longer than that, Google truncates it mid-sentence and replaces the end with an ellipsis (…), which can make your listing look incomplete or unprofessional. Note that Google may also rewrite your description entirely if it decides another passage on the page is more relevant, but providing a well-crafted, correctly-sized description gives you the best chance of controlling what shoppers see.

Your meta description is your free advertising copy in search results — it is often the deciding factor in whether a shopper clicks your link or a competitor's. A truncated description cuts off your call to action, hides key selling points (such as a store location, a brand name, or a promotion), and signals a lack of attention to detail that can erode trust before the visitor even lands on your site. Pages with compelling, complete meta descriptions consistently achieve higher click-through rates (CTR), and higher CTR sends a positive engagement signal that can reinforce your rankings over time. For multilingual and multibyte character sets (Japanese, Chinese, Korean, Arabic, etc.) the character budget can effectively be even shorter because each character is wider — aim for 70–80 characters to be safe, or test rendered pixel width with Google's Rich Results tools.

See the complete Meta description too long guide for every platform and the full background.