feat(routes): set useful meta title tags

This patch updates our routes to export useful meta functions that assign user friendly titles. Many of these titles were copied from existing websites that have good SEO (e.g. Vogue).
nicholaschiang · Jul 24, 2023 · 014eb93 · 014eb93
1 parent a7e3521
commit 014eb93
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -158,11 +158,7 @@ export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: tailwindStylesheetUrl },
 ]
 
-export const meta: V2_MetaFunction = () => [
-  { charSet: 'utf-8' },
-  { title: 'nicholas engineering' },
-  { name: 'viewport', content: 'width=device-width,initial-scale=1' },
-]
+export const meta: V2_MetaFunction = () => [{ title: 'Nicholas Chiang' }]
 
 type Env = { VERCEL_ANALYTICS_ID?: string }
 
@@ -193,6 +189,8 @@ function App({ data, children }: { data?: LoaderData; children: ReactNode }) {
   return (
     <html lang='en' className={cn('h-full', theme)}>
       <head>
+        <meta charSet='utf-8' />
+        <meta name='viewport' content='width=device-width,initial-scale=1' />
         <Meta />
         <Links />
         <ThemeHead ssrTheme={Boolean(data?.theme)} />

diff --git a/app/routes/_layout.products.$productId.tsx b/app/routes/_layout.products.$productId.tsx
@@ -6,7 +6,11 @@ import {
 } from '@radix-ui/react-icons'
 import * as Popover from '@radix-ui/react-popover'
 import { Link, useLoaderData, useLocation, useNavigate } from '@remix-run/react'
-import { type LoaderArgs, type SerializeFrom } from '@vercel/remix'
+import {
+  type LoaderArgs,
+  type SerializeFrom,
+  type V2_MetaFunction,
+} from '@vercel/remix'
 import { type PropsWithChildren, type ReactNode } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import invariant from 'tiny-invariant'
@@ -21,6 +25,10 @@ import { prisma } from 'db.server'
 import { type Handle } from 'root'
 import { useData } from 'utils'
 
+export const meta: V2_MetaFunction<typeof loader> = ({ data }) => [
+  { title: `${data?.name ?? '404'} | Nicholas Chiang` },
+]
+
 export const handle: Handle = {
   breadcrumb: (match) => (
     <Link to={`/products/${match.params.productId as string}`}>

diff --git a/app/routes/_layout.products.tsx b/app/routes/_layout.products.tsx
@@ -8,7 +8,7 @@ import {
   useNavigate,
   useSearchParams,
 } from '@remix-run/react'
-import { type LoaderArgs } from '@vercel/remix'
+import { type LoaderArgs, type V2_MetaFunction } from '@vercel/remix'
 import {
   type Dispatch,
   type SetStateAction,
@@ -36,6 +36,10 @@ import {
 import { log } from 'log.server'
 import { type Handle } from 'root'
 
+export const meta: V2_MetaFunction = () => [
+  { title: 'Products | Nicholas Chiang' },
+]
+
 export const handle: Handle = {
   breadcrumb: () => <Link to='/products'>products</Link>,
 }

diff --git a/app/routes/shows.$showId/route.tsx b/app/routes/shows.$showId/route.tsx
@@ -1,5 +1,9 @@
 import { Link, useLoaderData } from '@remix-run/react'
-import { type LoaderArgs, type SerializeFrom } from '@vercel/remix'
+import {
+  type LoaderArgs,
+  type SerializeFrom,
+  type V2_MetaFunction,
+} from '@vercel/remix'
 
 import { prisma } from 'db.server'
 import { log } from 'log.server'
@@ -17,6 +21,10 @@ import { WhereToBuy } from './where-to-buy'
 
 export { action } from './rate-and-review'
 
+export const meta: V2_MetaFunction<typeof loader> = ({ data }) => [
+  { title: `${data?.name ?? '404'} Collection | Nicholas Chiang` },
+]
+
 export const handle: Handle = {
   breadcrumb: (match) => (
     <Link to={`/shows/${match.params.showId as string}`}>

diff --git a/app/routes/shows._index.tsx b/app/routes/shows._index.tsx
@@ -1,10 +1,15 @@
 import { Link, useLoaderData } from '@remix-run/react'
+import { type V2_MetaFunction } from '@vercel/remix'
 
 import { Empty } from 'components/empty'
 
 import { prisma } from 'db.server'
 import { log } from 'log.server'
 
+export const meta: V2_MetaFunction = () => [
+  { title: 'Fashion Shows: Fashion Week, Runway, Designer Collections | Nicholas Chiang' },
+]
+
 export async function loader() {
   log.debug('getting shows...')
   const shows = await prisma.show.findMany({