Every Remix fix we catalog

SEOLZ catalogs 12 fixes for Remix across 1 areas — SEO, answer-engine readiness, accessibility, security and site-health. Each lists the exact steps for Remix, with a link to the official docs.

Scan my Remix store free

SEO · 12 fixes

Images missing altModerate effort

Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.

On Remix

Locate every `<img>` tag and Remix/React component that renders images across your routes and components (e.g. `app/routes/`, `app/components/`). Run a project-wide search for `<img` and for any image component (e.g. Shopify Hydrogen's `<Image>`) to build a complete inventory.
For each `<img>` tag, add a meaningful `alt` attribute that describes the image content — e.g. `<img src={product.featuredImage.url} alt={product.featuredImage.altText || product.title} />`. Never leave `alt` undefined or empty unless the image is purely decorative (in which case use `alt=""`).
For Shopify Hydrogen/Remix storefronts using the `<Image>` component from `@shopify/hydrogen`, pass the `alt` prop explicitly: `<Image data={image} alt={image.altText ?? product.title} />`. The `data` prop alone does not guarantee a non-empty alt if the Storefront API returns a null `altText`.
Update your GraphQL fragments (e.g. in `app/lib/fragments.ts` or inline in loaders) to always request the `altText` field alongside `url` and `width`/`height` for every image connection — product images, collection images, metafield images, and content/blog images.
Add a fallback guard in your loader or component so that if `altText` is null/empty, a descriptive string (product title, collection name, or article title) is used instead: `const resolvedAlt = image.altText?.trim() || product.title;`.
Run `grep -r 'alt=""' app/` and `grep -r "alt={''" app/` to catch any remaining empty alt attributes that are not intentionally decorative, then review and populate them. Commit the changes and verify rendered HTML with browser DevTools to confirm every `<img>` in the DOM has a non-empty `alt` attribute.

Code · Generic HTML (html)

<!-- BEFORE (missing alt — bad) -->
<img src="/images/red-leather-bag.jpg">

<!-- AFTER (descriptive alt — correct) -->
<img src="/images/red-leather-bag.jpg" alt="Red leather crossbody bag with gold buckle clasp">

<!-- Decorative image (intentionally empty alt — correct) -->
<img src="/images/divider-line.png" alt="">

Place this wherever an <img> tag appears in your HTML. Replace the placeholder text with your real description.

Full guide →Official Remix docs ↗

Meta description too longQuick win

Shorten your meta description to 150–160 characters so Google displays it in full instead of cutting it off with "…" in search results.

On Remix

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.
Locate the exported `meta` function in that route file. It will look like: `export const meta: MetaFunction = ({ data }) => { return [ ... ]; };`
Find the object in the returned array where `name: 'description'` is set, for example: `{ name: 'description', content: 'Your current long description here…' }`.
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.
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.
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.

Code · Generic HTML (html)

<meta name="description" content="Award-winning Bang & Olufsen headphones, speakers and TVs. Visit our Malaysia showroom at The Gardens Mall, Level 2. Free shipping on orders over RM500.">

Place this inside the <head> element of every page. Replace the content value with your page-specific description (max 160 characters).

Full guide →Official Remix docs ↗

Meta description too shortModerate effort

Expand your meta description to 120–160 characters so Google displays a compelling, complete snippet in search results that drives more clicks to your store.

On Remix

[
"
L
o
c
a
t
e
t
h
e
r
o
u
t
e
f
i
l
e
r
e
s
p
o
n
s
i
b
l
e
f
o
r
t
h
e
p
a
g
e
w
i
t
h
t
h
e
s
h
o
r
t
m
e
t
a
d
e
s
c
r
i
p
t
i
o
n
(
e
.
g
.
a
p
p
/
r
o
u
t
e
s
/
p
r
o
d
u
c
t
s
.
$
h
a
n
d
l
e
.
t
s
x
o
r
a
p
p
/
r
o
u
t
e
s
/
_
i
n
d
e
x
.
t
s
x
)
i
n
s
i
d
e
y
o
u
r
R
e
m
i
x
p
r
o
j
e
c
t
.
"
,
"
F
i
n
d
o
r
a
d
d
t
h
e
e
x
p
o
r
t
e
d
`
m
e
t
a
`
f
u
n
c
t
i
o
n
i
n
t
h
a
t
r
o
u
t
e
f
i
l
e
.
I
t
s
h
o
u
l
d
l
o
o
k
l
i
k
e
:
`
e
x
p
o
r
t
c
o
n
s
t
m
e
t
a
:
M
e
t
a
F
u
n
c
t
i
o
n
=
(
{
d
a
t
a
}
)
=
>
{
r
e
t
u
r
n
[
.
.
.
]
;
}
;
`
"
,
"
I
n
s
i
d
e
t
h
e
`
m
e
t
a
`
f
u
n
c
t
i
o
n
'
s
r
e
t
u
r
n
a
r
r
a
y
,
f
i
n
d
t
h
e
o
b
j
e
c
t
w
i
t
h
`
n
a
m
e
:
'
d
e
s
c
r
i
p
t
i
o
n
'
`
(
e
.
g
.
`
{
n
a
m
e
:
'
d
e
s
c
r
i
p
t
i
o
n
'
,
c
o
n
t
e
n
t
:
'
.
.
.
'
}
`
)
.
I
f
i
t
d
o
e
s
n
o
t
e
x
i
s
t
,
a
d
d
i
t
a
s
a
n
e
w
o
b
j
e
c
t
i
n
t
h
e
a
r
r
a
y
.
"
,
"
U
p
d
a
t
e
t
h
e
`
c
o
n
t
e
n
t
`
v
a
l
u
e
t
o
a
c
o
m
p
e
l
l
i
n
g
d
e
s
c
r
i
p
t
i
o
n
b
e
t
w
e
e
n
1
2
0
a
n
d
1
6
0
c
h
a
r
a
c
t
e
r
s
.
F
o
r
d
y
n
a
m
i
c
p
a
g
e
s
(
e
.
g
.
p
r
o
d
u
c
t
p
a
g
e
s
)
,
i
n
t
e
r
p
o
l
a
t
e
d
a
t
a
f
r
o
m
t
h
e
l
o
a
d
e
r
—
f
o
r
e
x
a
m
p
l
e
:
`
c
o
n
t
e
n
t
:
\
`
$
{
d
a
t
a
.
p
r
o
d
u
c
t
.
t
i
t
l
e
}
—
$
{
d
a
t
a
.
p
r
o
d
u
c
t
.
s
e
o
.
d
e
s
c
r
i
p
t
i
o
n
?
?
d
a
t
a
.
p
r
o
d
u
c
t
.
d
e
s
c
r
i
p
t
i
o
n
.
s
l
i
c
e
(
0
,
1
4
0
)
}
\
`
`
"
,
"
I
f
m
u
l
t
i
p
l
e
r
o
u
t
e
s
s
h
a
r
e
t
h
e
s
a
m
e
s
h
o
r
t
d
e
s
c
r
i
p
t
i
o
n
,
u
p
d
a
t
e
e
a
c
h
r
o
u
t
e
'
s
`
m
e
t
a
`
f
u
n
c
t
i
o
n
i
n
d
i
v
i
d
u
a
l
l
y
,
o
r
c
r
e
a
t
e
a
s
h
a
r
e
d
u
t
i
l
i
t
y
(
e
.
g
.
a
p
p
/
u
t
i
l
s
/
s
e
o
.
t
s
)
t
h
a
t
b
u
i
l
d
s
t
h
e
d
e
s
c
r
i
p
t
i
o
n
s
t
r
i
n
g
a
n
d
i
m
p
o
r
t
i
t
i
n
t
o
e
a
c
h
r
o
u
t
e
.
"
,
"
R
u
n
`
n
p
m
r
u
n
d
e
v
`
l
o
c
a
l
l
y
a
n
d
i
n
s
p
e
c
t
t
h
e
r
e
n
d
e
r
e
d
`
<
m
e
t
a
n
a
m
e
=
\
"
d
e
s
c
r
i
p
t
i
o
n
\
"
>
`
t
a
g
i
n
t
h
e
p
a
g
e
s
o
u
r
c
e
(
C
t
r
l
+
U
)
t
o
c
o
n
f
i
r
m
t
h
e
d
e
s
c
r
i
p
t
i
o
n
i
s
b
e
t
w
e
e
n
1
2
0
–
1
6
0
c
h
a
r
a
c
t
e
r
s
b
e
f
o
r
e
d
e
p
l
o
y
i
n
g
.
"
]

Code · Generic HTML (html)

<meta name="description" content="Shop the official Nike national team jerseys — advanced Dri-FIT heat tech meets bold heritage design. Free shipping on orders over $75. Explore the full collection now.">

Place this inside the <head> element of your HTML page. Replace the content value with your 120–160 character description.

Full guide →Official Remix docs ↗

Missing canonicalModerate effort

Add a self-referencing canonical tag to every page so Google knows which URL is the definitive version of that content.

On Remix

In each route file (e.g. app/routes/products.$handle.tsx, app/routes/collections.$handle.tsx, app/routes/_index.tsx), export a `meta` function if one doesn't already exist. Inside it, construct the canonical URL by combining your store's base URL with the current route path — for example: `const canonical = new URL(params.handle ? `/products/${params.handle}` : '/', 'https://www.yourstore.com').href;`
Return a `<link>` descriptor from the `meta` function array for the canonical tag: `return [ { tagName: 'link', rel: 'canonical', href: canonical } ];` — Remix's `meta` export supports arbitrary tag descriptors including `<link>` elements via the `tagName` field.
To avoid repeating this in every route, create a shared utility in app/utils/seo.ts that accepts a `request: Request` object and returns the canonical link descriptor: `export function canonicalLink(request: Request) { const url = new URL(request.url); url.search = ''; return { tagName: 'link', rel: 'canonical', href: url.toString() }; }` — stripping query params ensures tracking/filter params don't pollute the canonical.
In each route's `loader`, pass the `request` object through to the returned data (e.g. `return json({ ..., canonicalUrl: canonicalLink(request).href })`), then reference it in the `meta` function via the `data` argument: `export const meta: MetaFunction<typeof loader> = ({ data }) => [ { tagName: 'link', rel: 'canonical', href: data.canonicalUrl } ];`
For the root layout (app/root.tsx), ensure no conflicting or duplicate `<link rel='canonical'>` tags are rendered inside the `<Links />` component or hardcoded in the `<head>`. Remix's `<Links />` component automatically renders all link descriptors returned by route `meta`/`links` exports — confirm only one canonical appears per page by inspecting View Source.
Deploy and validate by loading a product or collection page, viewing page source, and confirming exactly one `<link rel='canonical' href='https://www.yourstore.com/...'>` tag appears in the `<head>` with the correct, query-string-free self-referencing URL.

Code · Generic HTML (html)

<link rel="canonical" href="https://www.yourstore.com/your-page/" />

Paste this inside the <head> element of every page. Replace the href value with the full, absolute preferred URL of that specific page.

Full guide →Official Remix docs ↗

Missing og descriptionModerate effort

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

On Remix

In your Remix project, locate the route file(s) missing the tag (e.g. app/routes/products.$handle.tsx, app/routes/index.tsx, etc.). Every route that renders a full page needs its own meta export.
Add or update the `meta` export function in each route file. Use the `MetaFunction` type and return an array of descriptor objects — include one with `{ property: 'og:description', content: '...' }`. Example: ```ts import type { MetaFunction } from '@remix-run/node'; export const meta: MetaFunction<typeof loader> = ({ data }) => [ { title: data?.product?.title ?? 'Store' }, { name: 'description', content: data?.product?.description ?? '' }, { property: 'og:description', content: data?.product?.description ?? '' }, ]; ```
Pull the description text from your `loader` via the `data` argument so the content is dynamic and page-specific (e.g. product description, collection description, or a static string for fixed pages like /about). Never hard-code the same string across all routes.
For a site-wide fallback, update app/root.tsx's `meta` export to include a default `og:description` so that any route without its own meta export still emits the tag.
Run `npm run dev` (or `yarn dev`) and inspect the `<head>` of each page type in browser DevTools to confirm `<meta property="og:description" content="...">` is present and contains the correct, page-specific text.
Deploy the changes and validate using the LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) or Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) to confirm social platforms read the new tag correctly.

Code · Generic HTML (html)

<head>
  <!-- Open Graph / Social Sharing -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://www.example.com/page-url/" />
  <meta property="og:title"       content="Page Title – Brand Name" />
  <meta property="og:description" content="A concise, compelling summary of this page in 100–160 characters that encourages clicks." />
  <meta property="og:image"       content="https://www.example.com/images/social-preview.jpg" />
</head>

Place all Open Graph tags inside the <head> element of every page.

Full guide →Official Remix docs ↗

Missing og imageModerate effort

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

On Remix

Upload your OG image (e.g. og-image.jpg, recommended size 1200×630 px) to your project's public/ directory so it is served as a static asset at a stable, absolute URL (e.g. https://yourstore.com/og-image.jpg).
Open the root route file (typically app/root.tsx or app/root.jsx). Export a meta function if one does not already exist: `export const meta: MetaFunction = () => { return [...]; };`
Inside the meta function's return array, add the og:image entries — include both the standard Open Graph tag and the Twitter/X card tag: ```ts { property: 'og:image', content: 'https://yourstore.com/og-image.jpg' }, { property: 'og:image:width', content: '1200' }, { property: 'og:image:height', content: '630' }, { name: 'twitter:image', content: 'https://yourstore.com/og-image.jpg' }, ``` This sets a global fallback OG image for every page that does not override it.
For product, collection, or blog route files (e.g. app/routes/products.$handle.tsx), export their own meta function and use the loader data to set a page-specific og:image, for example: ```ts export const meta: MetaFunction<typeof loader> = ({ data }) => [ { property: 'og:image', content: data?.product?.featuredImage?.url ?? 'https://yourstore.com/og-image.jpg' }, ]; ``` This ensures product images appear when those URLs are shared.
Confirm that app/root.tsx renders the <Meta /> component (from `@remix-run/react`) inside the <head> of the HTML document — this is what actually outputs all meta tags to the page: `import { Meta } from '@remix-run/react'; ... <head><Meta />...</head>`
Deploy the changes, then validate each key page type (home, product, collection) using the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and Twitter Card Validator (cards-dev.twitter.com/validator) to confirm the og:image tag is detected and the image renders correctly.

Full guide →Official Remix docs ↗

Missing og titleQuick win

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

On Remix

In your Remix project, open the root route file (typically `app/root.tsx` or `app/root.jsx`). This is where global meta tags should live so they apply to every page by default.
Locate or add the exported `meta` function at the top level of the file. If it doesn't exist, add it: `export const meta: MetaFunction = () => { return []; };`
Inside the `meta` function's return array, add an og:title entry: `{ property: 'og:title', content: 'Your Store Name' }`. Use a meaningful, brand-consistent title (e.g. your store's actual name). Example full export: ```ts export const meta: MetaFunction = () => [ { property: 'og:title', content: 'Your Store Name' }, ]; ```
For individual routes (product pages, collection pages, etc.) that need unique og:title values, open each route file under `app/routes/` and add or update its own `meta` export. Use loader data to make it dynamic, for example: ```ts export const meta: MetaFunction<typeof loader> = ({ data }) => [ { property: 'og:title', content: data?.product?.title ?? 'Your Store Name' }, ]; ```
Ensure your `app/root.tsx` renders the `<Meta />` component inside the `<head>` of its `Layout` or `default` export (e.g. `<head><Meta /><Links />...</head>`). This is what actually outputs the meta tags into the HTML — without it, the `meta` function exports have no effect.
Run `npm run dev` (or `yarn dev`) to preview locally. Open DevTools → Elements and confirm `<meta property="og:title" content="...">` appears in `<head>` on both the root page and any route-specific pages you updated. Then deploy your changes.

Code · Generic HTML (html)

<head>
  <!-- Other head tags -->
  <meta property="og:title" content="Amazing Product Name | Your Store Name" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.yourstore.com/page-url" />
  <meta property="og:description" content="Short description of this page for social sharing." />
  <!-- Other head tags -->
</head>

Place inside the <head> section of every HTML page. Replace the content value with your actual page title.

Full guide →Official Remix docs ↗

Multiple h1Moderate effort

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

On Remix

Identify all Remix route files that render H1 tags — check every file under `app/routes/` (e.g. `app/routes/_index.tsx`, `app/routes/products.$handle.tsx`, `app/routes/collections.$handle.tsx`) and any shared layout components in `app/components/` or `app/root.tsx`. Search the codebase for `<h1` to get a full list.
For each route, audit the full render tree: open the route file, trace through every component it imports (including shared headers, hero banners, page-title components, or CMS-driven content blocks), and list every `<h1>` that could be rendered simultaneously on a single page. Pay special attention to `app/root.tsx` — any `<h1>` placed there will appear on every page.
Decide on the single, authoritative `<h1>` per page — typically the main page title (product name, collection name, blog post title, or homepage headline). Demote all other `<h1>` tags to the appropriate heading level (`<h2>`, `<h3>`, etc.) to preserve visual hierarchy without duplicating the primary heading signal.
If a shared layout component (e.g. a `<PageHeader>` or `<Hero>` component) renders an `<h1>`, and individual route files also render their own `<h1>`, refactor so only one source of truth exists — for example, pass a `level` prop to the shared component (`level={2}` from routes that supply their own `<h1>`) or remove the `<h1>` from the layout and always render it inside the route-level component.
For dynamic routes (e.g. `products.$handle.tsx`), confirm the `<h1>` is populated from the route's `loader` data (e.g. `product.title`, `collection.title`) and is rendered exactly once in the JSX — not both inside a hero section and again in a product-detail section within the same route.
After making changes, run `npm run dev` and visit each page type in the browser. Use DevTools (Elements panel → Ctrl+F `h1`) or a browser extension to verify exactly one `<h1>` exists in the DOM per page, including pages rendered via Remix's nested layouts (`<Outlet>` chains), then deploy and re-crawl to confirm the fix.

Code · Generic HTML (html)

<!-- CORRECT: One H1 per page -->
<h1>Blue Running Shoes – Men's Lightweight Trainers</h1>

<!-- Major sections use H2 -->
<h2>Product Details</h2>
<p>Breathable mesh upper, responsive foam midsole...</p>

<h2>Customer Reviews</h2>
<!-- Sub-sections within a major section use H3 -->
<h3>Top Review: 5 Stars</h3>
<p>Best shoes I've ever bought!</p>

<!-- WRONG: Multiple H1 tags — do NOT do this -->
<!--
<h1>Blue Running Shoes</h1>
<h1>Product Details</h1>
<h1>Customer Reviews</h1>
-->

Correct semantic heading structure for an ecommerce page — one H1, everything else H2 or lower.

Full guide →Official Remix docs ↗

Seo category description missingModerate effort

Write a 100–200 word description for every category page explaining what products it contains and who they are for, so Google can rank it for category-level keywords.

On Remix

In your Remix project, locate the route file that renders category pages — typically something like `app/routes/categories.$handle.tsx` (or `.jsx`). This is where you'll add the description content.
Fetch the category description from your data source (CMS, Shopify Storefront API, custom DB, etc.) inside the route's `loader` function. If no description field exists yet, add one to your data model first. Example: `const category = await getCategoryByHandle(params.handle); return json({ category });`
In the route's page component, destructure the `category` from `useLoaderData()` and render the description in a visible `<p>` (or `<div>`) tag placed directly below the category heading — not hidden via CSS — so both users and Googlebot can read it. Example: `<p className="category-description">{category.description}</p>`
Using Remix's `meta` export, also surface the description as the page's `<meta name="description">` tag so Google can use it in SERPs. Example: `export const meta = ({ data }) => [{ name: 'description', content: data.category.description }];`
For every category that currently has no description, write a 100–200 word text in your CMS/data source explaining what products the category contains and who they are for, naturally incorporating the target category-level keyword (e.g. 'women's running shoes'). Save and redeploy if descriptions are hard-coded, or publish via the CMS if content is fetched at runtime.
After deploying, use `curl -A Googlebot <your-category-URL>` or Google Search Console's URL Inspection tool to confirm the description text appears in the server-rendered HTML (Remix SSR/SSG ensures it is present before JS executes), then request re-indexing for each updated category URL.

Code · Generic HTML (html)

<section class="category-description">
  <h1>Women's Waterproof Hiking Boots</h1>
  <p>
    Our women's waterproof hiking boots are built for trail runners, weekend
    trekkers, and serious mountaineers who refuse to let wet weather slow them
    down. Every pair in this collection features a fully sealed waterproof
    membrane, aggressive rubber outsoles for grip on loose or muddy terrain,
    and reinforced ankle support to protect against sprains on uneven ground.
    Whether you're day-hiking a local forest trail or taking on a multi-day
    alpine route, you'll find boots here rated for every conditions and
    experience level. Lightweight options keep pack weight low on fast-and-light
    adventures, while insulated models keep feet warm below freezing. Browse the
    full range below to find your perfect fit.
  </p>
</section>

Place this block near the top of your category page, above the product grid.

Full guide →Official Remix docs ↗

Seo category emptyQuick win

Either populate the empty category with products, or add a noindex tag and remove it from your navigation so Google does not waste crawl budget on a page with no content.

On Remix

Identify the empty category route file in your Remix project (e.g. app/routes/collections/$category.tsx or app/routes/category/$handle.tsx) and locate the loader function that fetches products for that category.
In the loader, detect when the category returns zero products — for example: `if (products.length === 0) { return json({ products: [], empty: true }); }`.
In the same route file, update the exported `meta` function to conditionally inject a `noindex` robots tag when the category is empty: ```ts export const meta: MetaFunction = ({ data }) => { if (data?.empty) { return [{ name: 'robots', content: 'noindex, nofollow' }]; } return [{ title: data?.category?.title }]; }; ```
Remove empty category links from your navigation by checking the `empty` flag in any nav-building loader or component (e.g. in app/root.tsx or a shared Header component) — filter out categories whose product count is 0 before rendering `<Link>` elements.
If you prefer to populate rather than noindex, seed real products into the empty category via your CMS or commerce backend (e.g. Shopify, Medusa, Commerce.js) and verify the loader now returns at least one product before removing any noindex logic.
Deploy the changes, then submit the affected URLs for recrawl in Google Search Console (Inspect URL → Request Indexing) and confirm the `noindex` header or tag appears in the page source for any remaining empty categories.

Code · Generic HTML (html)

<meta name="robots" content="noindex, follow">

Place inside the <head> element of an empty category page to prevent Google from indexing it.

Full guide →Official Remix docs ↗

Title too longQuick win

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

On Remix

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.
Open that route file and locate the exported `meta` function — it will look like: `export const meta: MetaFunction = () => [ { title: '...' }, ... ];`
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).
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.
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.
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.

Code · Generic HTML (html)

<head>
  <meta charset="UTF-8">
  <title>Running Shoes for Men | YourBrand</title>
</head>

Place inside the <head> element of every HTML page. Keep the total character count at or under 60.

Full guide →Official Remix docs ↗

Title too shortQuick win

Expand your page title to between 30 and 60 characters so Google displays it fully in search results and shoppers can immediately understand what the page is about.

On Remix

Identify the route file responsible for the page with the short title (e.g. app/routes/products.$handle.tsx or app/routes/collections.$handle.tsx) inside your Remix project.
Open that route file and locate the exported `meta` function (or add one if it is missing). In Remix v2+ it uses the signature: `export const meta: MetaFunction = ({ data }) => { return [...]; };`
Inside the `meta` function, find or add the `{ title: '...' }` object in the returned array. Rewrite the title string so it is between 30 and 60 characters, is descriptive, and includes your primary keyword — for example: `{ title: 'Organic Arabica Coffee Beans | Free Shipping | BrandName' }`
If the title relies on dynamic data (e.g. a product name fetched in the `loader`), compose it with template literals and pad it with your store name or a value proposition to reach the 30-character minimum: e.g. `` `${data.product.title} – Shop at BrandName` ``
Run `npm run dev` (or `yarn dev`) locally and inspect the `<title>` tag in the browser's page source to confirm the rendered character count is between 30 and 60 characters.
Deploy the updated route file. Re-crawl the URL in Google Search Console (Inspect URL → Request Indexing) to prompt Google to pick up the new title.

Code · Generic HTML (html)

<head>
  <meta charset="UTF-8">
  <title>Men's Merino Wool Beanies – BrandName</title>
</head>

Place inside the <head> element of every page. Replace the example with your actual descriptive title (30–60 chars).

Full guide →Official Remix docs ↗