\"}),\" and \",(0,a.jsx)(e.code,{children:\"<meta>\"}),` tags into the document head for you automatically,\nwhich would produce the following HTML:`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">My Page Title</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"meta\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"name\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"description\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"content\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"My Page Description\"}),'\"',\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"head\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">Hello World</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"</\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\">\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Now that you understand how the hoisting mechanism works, let's see how we can use\nthis to our advantage by adding titles to our pages using React.`}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags\",children:\"https://react.dev/blog/2024/12/05/react-19#support-for-metadata-tags\"})]}),`\n`,(0,a.jsx)(e.h2,{children:\"Exercise Goals\"}),`\n`,(0,a.jsx)(e.p,{children:\"In this exercise, we're going to add titles to our pages using React 19 JSX metadata tags.\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Go through product routes, Kody will be there to guide you in what you need to do.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Add titles to relevant pages using React 19 JSX metadata tags.\"}),`\n`,(0,a.jsx)(e.li,{children:`Make sure to test your titles by visiting the pages and checking the document title in the\nbrowser tab and also in the document head using the browser dev tools.`}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}return w(f);})();\n;return Component;",[],{"_9":372,"_372":373},{"_9":372,"_376":397,"_139":140},6012,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/02.problem.titles-react?title=Adding+Titles+with+React+19+%28problem%29",{"_20":51,"_105":296,"_353":400,"_22":52,"_24":53,"_355":401,"_368":402,"_370":403,"_374":404,"_378":406,"_213":232,"_233":232,"_9":285,"_389":-5},"02.solution.titles-react","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var a in e)i(t,a,{get:e[a],enumerable:!0})},d=(t,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!f.call(t,o)&&o!==a&&i(t,o,{get:()=>e[o],enumerable:!(r=u(e,o))||r.enumerable});return t};var v=(t,e,a)=>(a=t!=null?p(m(t)):{},d(e||!t||!t.__esModule?i(a,\"default\",{value:t,enumerable:!0}):a,t)),w=t=>d(i({},\"__esModule\",{value:!0}),t);var h=x((L,s)=>{s.exports=_jsx_runtime});var k={};y(k,{default:()=>l,frontmatter:()=>b});var n=v(h()),b=void 0;function c(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{NextDiffLink:a}=e;return a||_(\"NextDiffLink\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Adding Titles with React 19\"}),`\n`,(0,n.jsx)(e.p,{children:\"Congratulations! You have completed the exercise. \\u{1F389}\"}),`\n`,(0,n.jsx)(e.p,{children:\"In this exercise, you have used React 19 JSX metadata tags to add titles to your pages.\"}),`\n`,(0,n.jsx)(e.p,{children:\"But we have a big problem!!\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Peter isn't happy with us!! He says we introduced a big bug in our app! Namely,\nif you go to the products pages, especially on the individual product pages, the titles\nare doubled and we have 2x titles per page! \\u{1F631}`}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} He also doesn't like the fact that we don't have a shared prefix for our titles. He\nexpected every page to start with Epic Shop - `,(0,n.jsx)(e.code,{children:\"<Page Specific Title>\"}),` instead of what we\nhave now!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let's fix this by using the \",(0,n.jsx)(e.code,{children:\"meta\"}),` export instead of React 19 JSX metadata tags to add titles\nto our pages and also add a shared prefix to all our titles!`]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F9DD}\\u200D\\u2640\\uFE0F Let's get you closer to implementing this by helping you out and adding some utilities\nfor metadata parsing and reading! You can find them in `,(0,n.jsx)(e.code,{children:\"app/utils/metadata.ts\"}),` in the\nnext exercise! I really hope this helps you out to make Peter happier!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2640\\uFE0F Also, I've removed all the \",(0,n.jsx)(e.code,{children:\"<title>\"}),` tags you added, Peter says he'd rather have no\ntitles at all, than buggy ones! So, you'll have to add them all again using the `,(0,n.jsx)(e.code,{children:\"meta\"}),`\nexport!`]}),`\n`,(0,n.jsx)(a,{children:\" Check out the changes in the next exercise \"}),`\n`,(0,n.jsx)(e.p,{children:\"Take a breather, and let's continue once you're ready! \\u{1F680}\"})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}function _(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(k);})();\n;return Component;",[],{"_9":372,"_372":373},{"_9":372,"_376":405,"_139":140},7012,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/02.solution.titles-react?title=Adding+Titles+with+React+19+%28solution%29",{"_233":214,"_231":408,"_285":416},{"_20":55,"_105":298,"_353":409,"_22":56,"_24":57,"_355":410,"_368":411,"_370":412,"_374":413,"_378":415,"_213":232,"_233":214,"_9":231,"_380":59},"03.problem.titles-with-meta","var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var a in e)o(n,a,{get:e[a],enumerable:!0})},h=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!w.call(n,i)&&i!==a&&o(n,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return n};var x=(n,e,a)=>(a=n!=null?u(f(n)):{},h(e||!n||!n.__esModule?o(a,\"default\",{value:n,enumerable:!0}):a,n)),b=n=>h(o({},\"__esModule\",{value:!0}),n);var s=g((M,r)=>{r.exports=_jsx_runtime});var T={};y(T,{default:()=>l,frontmatter:()=>v});var t=x(s()),v=void 0;function c(n){let e={code:\"code\",h1:\"h1\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Metadata with the meta export\"}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Our manager is not happy with us! We introduced a bug and we didn't add a prefix\nin the titles! He wants all our titles to start with `,(0,t.jsx)(e.code,{children:\"Epic Shop - <Page Specific Title>\"}),`.\nHe also wants us to fix the bug with the doubled titles on the product pages!`]}),`\n`,(0,t.jsx)(e.p,{children:`But, before we do that let's first understand how the React 19 JSX metadata tags work and\nwhy the bug happened in the first place.`}),`\n`,(0,t.jsx)(e.h2,{children:\"The Hoisting Mechanism\"}),`\n`,(0,t.jsxs)(e.p,{children:[`React 19 hoisting mechanism automatically moves certain elements from the body of your document\nto the head of your document. This includes elements like `,(0,t.jsx)(e.code,{children:\"<title>\"}),`, but the issue is it doesn't\nde-duplicate them if you already have a title in the head, which is what happened in our case.`]}),`\n`,(0,t.jsx)(e.p,{children:`When we added titles using React 19 JSX metadata tags, they were hoisted to the head of the document,\nbut since we already had titles defined in the head (defined by a route above the specific product route),\nwe ended up with two titles in the head, which is not valid HTML and can cause issues with SEO and\naccessibility.`}),`\n`,(0,t.jsxs)(e.p,{children:[\"To fix this, we need to use the \",(0,t.jsx)(e.code,{children:\"meta\"}),` export provided by React Router, which allows us to define\nmetadata for our routes in a more structured way. This way, we can ensure that we only have one title\nper page and we can also easily add a prefix to all our titles.`]}),`\n`,(0,t.jsxs)(e.h2,{children:[(0,t.jsx)(e.code,{children:\"meta\"}),\" export\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export is a function that returns an object containing metadata for the route.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The cool thing about the \",(0,t.jsx)(e.code,{children:\"meta\"}),` export is that it allows us to define metadata for our routes\nin a more structured way by giving us the data returned from loaders, and also the parent\nroutes metadata, which allows us to easily create dynamic titles and other metadata based on the\ndata returned from our loaders.`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In this exercise, we're going to use the \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export to add titles to our pages.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Exercise Goals\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Go to the \",(0,t.jsx)(e.code,{children:\"root.tsx\"}),\" file and find Kody there, he will help you add the first SEO title in the root.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Once you have that in place visit the landing page route, and then the product routes and add the \",(0,t.jsx)(e.code,{children:\"meta\"}),\" export to add titles to each page.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Make sure to include the root meta in the title to have \",(0,t.jsx)(e.code,{children:\"Epic Shop - <Page Specific Title>\"}),\".\"]}),`\n`,(0,t.jsxs)(e.li,{children:[`Kelly has helped us with utilities for metadata parsing and reading! You can find them in\n`,(0,t.jsx)(e.code,{children:\"app/utils/metadata.ts\"}),\". Feel free to check their implementation first!\"]}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(c,{...n})}):c(n)}return b(T);})();\n;return Component;",[],{"_9":372,"_372":373},{"_9":372,"_376":414,"_139":140},6013,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/03.problem.titles-with-meta?title=Metadata+with+the+meta+export+%28problem%29",{"_20":59,"_105":298,"_353":417,"_22":60,"_24":61,"_355":418,"_368":419,"_370":420,"_374":421,"_378":423,"_213":232,"_233":214,"_9":285,"_389":-5},"03.solution.titles-with-meta","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},h=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!x.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(r=p(e,a))||r.enumerable});return t};var w=(t,e,o)=>(o=t!=null?u(m(t)):{},h(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>h(i({},\"__esModule\",{value:!0}),t);var d=y((I,s)=>{s.exports=_jsx_runtime});var j={};g(j,{default:()=>l,frontmatter:()=>v});var n=w(d()),v=void 0;function c(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{NextDiffLink:o}=e;return o||_(\"NextDiffLink\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Metadata with the meta export\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Well done! You have successfully added metadata to your routes using the \",(0,n.jsx)(e.code,{children:\"meta\"}),` export.\nThis allows you to set dynamic titles for each page in your application by merging\nthe parent route's metadata with the current route's metadata.`]}),`\n`,(0,n.jsx)(e.p,{children:`You have also ensured that all titles have a consistent prefix, \"Epic Shop -\", which\nimproves the branding and recognition of your application.`}),`\n`,(0,n.jsx)(e.p,{children:`Another benefit of the approach we just implemented is that if you add a new route\nand you forget to add a title there, it will fallback to the closest parent route's title,\nwhich is a nice safety net to have.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"Now that you fully understand the \",(0,n.jsx)(e.code,{children:\"meta\"}),` export and how to use it effectively, let's\nmove onto the next module when you're ready!`]}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F9DD}\\u200D\\u2640\\uFE0F I'm going to fill in the rest of the routes with metadata as you already have a hang of it\nand how it works!`}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F9DD}\\u200D\\u2640\\uFE0F I'm going to help you out for the next exercise, from what I understand it's all about\ndata fetching and loaders, so I'm going to set up a database for you to use in the next exercise\nand also add some utilities to help you out with fetching data from the database! I hope\nthis helps you out!`}),`\n`,(0,n.jsx)(o,{children:\" Check out the changes in the next exercise \"}),`\n`,(0,n.jsx)(e.p,{children:\"You're doing great! \\u{1F680}\"})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}function _(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(j);})();\n;return Component;",[],{"_9":372,"_372":373},{"_9":372,"_376":422,"_139":140},7013,"https://stackblitz.com/github/epicweb-dev/react-router-fundamentals-pt-1/tree/main/exercises/02.metadata/03.solution.titles-with-meta?title=Metadata+with+the+meta+export+%28solution%29",[425,429,433],{"_20":39,"_105":294,"_353":366,"_22":40,"_24":41,"_355":367,"_368":426,"_370":427,"_374":428,"_378":379,"_213":232,"_233":269,"_9":231,"_380":43},[],{"_9":372,"_372":373},{"_9":372,"_376":377,"_139":140},{"_20":47,"_105":296,"_353":392,"_22":48,"_24":49,"_355":393,"_368":430,"_370":431,"_374":432,"_378":398,"_213":232,"_233":232,"_9":231,"_380":51},[],{"_9":372,"_372":373},{"_9":372,"_376":397,"_139":140},{"_20":55,"_105":298,"_353":409,"_22":56,"_24":57,"_355":410,"_368":434,"_370":435,"_374":436,"_378":415,"_213":232,"_233":214,"_9":231,"_380":59},[],{"_9":372,"_372":373},{"_9":372,"_376":414,"_139":140},[438,442,446],{"_20":43,"_105":294,"_353":382,"_22":44,"_24":45,"_355":383,"_368":439,"_370":440,"_374":441,"_378":388,"_213":232,"_233":269,"_9":285,"_389":-5},[],{"_9":372,"_372":373},{"_9":372,"_376":387,"_139":140},{"_20":51,"_105":296,"_353":400,"_22":52,"_24":53,"_355":401,"_368":443,"_370":444,"_374":445,"_378":406,"_213":232,"_233":232,"_9":285,"_389":-5},[],{"_9":372,"_372":373},{"_9":372,"_376":405,"_139":140},{"_20":59,"_105":298,"_353":417,"_22":60,"_24":61,"_355":418,"_368":447,"_370":448,"_374":449,"_378":423,"_213":232,"_233":214,"_9":285,"_389":-5},[],{"_9":372,"_372":373},{"_9":372,"_376":422,"_139":140},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Router%20Fundamentals%20part%201%20%E2%9B%93%EF%B8%8F&entry.428900931=Metadata","epicVideoInfosPromise",["P",453],"exerciseFinished",{"_456":457,"_24":458},"file","/myapp/workshop-content/exercises/02.metadata/FINISHED.mdx","exercises/02.metadata/FINISHED.mdx","prevStepLink",{"_461":462,"_463":464},"to","/exercise/02/03/solution","aria-label","Metadata with the meta export (solution)","nextStepLink",{"_461":467,"_463":314},"/exercise/03","actionData","errors"] </article></body></html>

02. Metadata/Elaboration

You just finished the metadata module! 🎉