docs(start/framework/route-module): clarify the behaviour of multiple meta functions (#13642)

WoodyWoodsta · web-flow · commit d2bffdf48a7c · 2025-05-20T12:24:29.000-04:00
diff --git a/contributors.yml b/contributors.yml
@@ -382,6 +382,7 @@
 - willsawyerrrr
 - willsmithte
 - wkovacs64
+- woodywoodsta
 - xavier-lc
 - xcsnowcity
 - xdaxer
diff --git a/docs/start/framework/route-module.md b/docs/start/framework/route-module.md
@@ -309,9 +309,9 @@ export default function Root() {
 
 ## `meta`
 
-Route meta defines meta tags to be rendered in the `<head>` of the document.
+Route meta defines meta tags to be rendered in the `<Meta />` component, usually placed in the `<head>`.
 
-```tsx
+```tsx filename=app/product.tsx
 export function meta() {
   return [
     { title: "Very cool app" },
@@ -326,10 +326,7 @@ export function meta() {
   ];
 }
 ```
-
-All routes' meta will be aggregated and rendered through the `<Meta />` component, usually rendered in your app root:
-
-```tsx
+```tsx filename=app/root.tsx
 import { Meta } from "react-router";
 
 export default function Root() {
@@ -345,6 +342,8 @@ export default function Root() {
 }
 ```
 
+The meta of the last matching route is used, allowing you to override parent routes' meta. It's important to note that the entire meta descriptor array is replaced, not merged. This gives you the flexibility to build your own meta composition logic across pages at different levels.
+
 **See also**
 
 - [`meta` params][meta-params]
