💡 Hint
Look for the step where 'Next.js adds
and <meta> tags' in the 'Next.js Behavior' column.</div></div></div><div class="visual-quiz-card d-none "><div class="visual-quiz-question">If we remove the description from metadata, what changes in the execution table?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The page content will not render</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The <meta name="description"> tag will be missing in the HTML</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">The <title> tag will be missing</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Next.js will throw an error</span></div></div><div class="hint-box d-none"><div class="hint-box-title">💡 Hint</div><div class="hint-box-text">Refer to step 4's 'Result in HTML' column showing meta tags injected.</div></div></div></div></article><article class="content-card"><div class="code-articles-card-header"><span class="card-icon summary"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M479.67-264.67q73.33 0 123.5-50.16 50.16-50.17 50.16-123.5 0-73.34-50.16-123.17-50.17-49.83-123.5-49.83-73.34 0-123.17 49.83t-49.83 123.17q0 73.33 49.83 123.5 49.83 50.16 123.17 50.16Zm0-66.66q-45.67 0-76-30.67-30.34-30.67-30.34-76.33 0-45.67 30.34-76 30.33-30.34 76-30.34 45.66 0 76.33 30.34 30.67 30.33 30.67 76 0 45.66-30.67 76.33t-76.33 30.67ZM146.67-120q-27 0-46.84-19.83Q80-159.67 80-186.67v-502q0-26.33 19.83-46.5 19.84-20.16 46.84-20.16h140l53.33-62q9-11.34 22.17-17 13.16-5.67 28.16-5.67h179.34q15 0 28.16 5.67 13.17 5.66 22.17 17l53.33 62h140q26.34 0 46.5 20.16Q880-715 880-688.67v502q0 27-20.17 46.84Q839.67-120 813.33-120H146.67Zm0-66.67h666.66v-502H642.67l-73-84.66H390.33l-73 84.66H146.67v502ZM480-438Z"></path></svg></span></span><span class="codefly-card-title">Concept Snapshot</span></div><div class="code-articles-card-body"><pre class="vmc-snapshot-text">Next.js Metadata API for SEO:
- Export a metadata object from your page/component
- Include title, description, and other SEO tags
- Next.js injects these into the HTML <head> automatically
- Improves SEO and social sharing previews
- Metadata is separate from page content</pre></div></article><article class="content-card"><div class="code-articles-card-header"><span class="card-icon summary"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M309.17-410.83q11.5-11.5 11.5-28.5t-11.5-28.5q-11.5-11.5-28.5-11.5t-28.5 11.5q-11.5 11.5-11.5 28.5t11.5 28.5q11.5 11.5 28.5 11.5t28.5-11.5Zm0-120q11.5-11.5 11.5-28.5t-11.5-28.5q-11.5-11.5-28.5-11.5t-28.5 11.5q-11.5 11.5-11.5 28.5t11.5 28.5q11.5 11.5 28.5 11.5t28.5-11.5Zm0-120q11.5-11.5 11.5-28.5t-11.5-28.5q-11.5-11.5-28.5-11.5t-28.5 11.5q-11.5 11.5-11.5 28.5t11.5 28.5q11.5 11.5 28.5 11.5t28.5-11.5ZM433.33-406h133.34q14.16 0 23.75-9.62 9.58-9.61 9.58-23.83 0-14.22-9.58-23.72-9.59-9.5-23.75-9.5H433.33q-14.16 0-23.75 9.62-9.58 9.62-9.58 23.83 0 14.22 9.58 23.72 9.59 9.5 23.75 9.5Zm0-120h254q14.17 0 23.75-9.62 9.59-9.61 9.59-23.83 0-14.22-9.59-23.72-9.58-9.5-23.75-9.5h-254q-14.16 0-23.75 9.62-9.58 9.62-9.58 23.83 0 14.22 9.58 23.72 9.59 9.5 23.75 9.5Zm0-120h254q14.17 0 23.75-9.62 9.59-9.61 9.59-23.83 0-14.22-9.59-23.72-9.58-9.5-23.75-9.5h-254q-14.16 0-23.75 9.62-9.58 9.62-9.58 23.83 0 14.22 9.58 23.72 9.59 9.5 23.75 9.5ZM240-240 136.67-136.67Q121-121 100.5-129.6 80-138.21 80-160.33v-653q0-27 19.83-46.84Q119.67-880 146.67-880h666.66q27 0 46.84 19.83Q880-840.33 880-813.33v506.66q0 27-19.83 46.84Q840.33-240 813.33-240H240Z"></path></svg></span></span><span class="codefly-card-title">Full Transcript</span></div><div class="code-articles-card-body"><div class="visual-transcript-box">This visual execution trace shows how Next.js uses the Metadata API for SEO. First, you define a metadata object with properties like title and description. Then you export this object from your page module. Next.js detects this export during build time and prepares to inject it into the HTML head. When rendering the page, Next.js adds the appropriate <title> and <meta> tags inside the head section. Browsers and search engines then use this metadata to improve SEO and social sharing previews. The page content inside the main tag renders separately and is unaffected by metadata. This process ensures your page is SEO-friendly with minimal code.</div></div></article></div></div></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-fd24bd8e19d2841a.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/b133bdac07c7940e.css\",\"style\"]\n2:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/caf3ca742c7945f9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\n10:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n12:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"nextjs\",\"d\"]\nb:[\"part\",\"part-1\",\"d\"]\nc:[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"]\nd:[\"mode\",\"visualize\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b133bdac07c7940e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"hN8t5By7h5nzsrdSose07\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"nextjs\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"],{\"children\":[[\"mode\",\"visualize\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"nextjs\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"],{\"children\":[[\"mode\",\"visualize\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$Lf\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-506edbde2b5b3f55.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-6b3bda54d2fd2e14.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-09ee572e3d7819a2.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8935\",\"static/chunks/8935-c1c159349bf7da40.js\",\"9663\",\"static/chunks/9663-fdcd080af3916e3e.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-1fc9c577a9450e06.js\"],\"default\"]\n16:T471,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Metadata API for SEO in NextJS - Step-by-Step Execution\",\"description\":\"Visualize how Metadata API for SEO in NextJS executes step by step. Trace variables, follow the flow, and see exactly what happens at each stage with diagrams.\",\"url\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\",\"learningResourceType\":\"Visual Guide\",\"programmingLanguage\":\"NextJS\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Metadata API for SEO in NextJS - Step-by-Step Execution\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metadata API for SEO in NextJS - Step-by-Step Execution\",\"item\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Visualize\",\"item\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\"}]}}"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",null,{\"subject\":\"nextjs\",\"dbSubject\":\"nextjs\",\"part\":\"part-1\",\"pattern\":\"nextjs_metadata_api_for_seo\",\"modeSlug\":\"visualize\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\",\"active\":true},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Metadata API for SEO in NextJS - Step-by-Step Execution\",\"contentData\":{\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"VMC\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"VMC\":{\"concept\":\"Metadata API for SEO\",\"mode\":\"VMC_v5\",\"language\":\"nextjs\",\"content_type\":\"Frameworks \u0026 Libraries\",\"concept_flow\":{\"ascii\":\" [Define metadata object]\\n |\\n v\\n [Export metadata from page/component]\\n |\\n v\\n [Next.js reads metadata during build]\\n |\\n v\\n [Inject metadata into HTML \u003chead\u003e]\\n |\\n v\\n [Browser and search engines use metadata]\\n |\\n v\\n [Improved SEO and social sharing]\",\"description\":\"This flow shows how you define and export metadata in Next.js, which Next.js then injects into the HTML head for SEO benefits.\"},\"execution_sample\":{\"code\":\"export const metadata = {\\n title: 'My Page Title',\\n description: 'Page description for SEO'\\n};\\n\\nexport default function Page() {\\n return \u003cmain\u003eHello SEO\u003c/main\u003e;\\n}\",\"description\":\"This code defines metadata for a Next.js page and exports it so Next.js can add it to the HTML head.\"},\"execution_table\":{\"headers\":[\"Step\",\"Action\",\"Metadata Object State\",\"Next.js Behavior\",\"Result in HTML\"],\"rows\":[[\"1\",\"Define metadata object\",\"{ title: 'My Page Title', description: 'Page description for SEO' }\",\"Stores metadata for page\",\"No HTML yet\"],[\"2\",\"Export metadata\",\"Same as above\",\"Next.js detects exported metadata\",\"No HTML yet\"],[\"3\",\"Render Page component\",\"Metadata unchanged\",\"Next.js prepares HTML head\",\"\u003chead\u003e prepared but not yet sent\"],[\"4\",\"Inject metadata into \u003chead\u003e\",\"Metadata used\",\"Next.js adds \u003ctitle\u003e and \u003cmeta\u003e tags\",\"\u003ctitle\u003eMy Page Title\u003c/title\u003e\u003cmeta name=\\\"description\\\" content=\\\"Page description for SEO\\\"\u003e\"],[\"5\",\"Browser loads page\",\"Metadata present\",\"Browser and search engines read metadata\",\"SEO improved, social cards ready\"],[\"6\",\"Page content rendered\",\"Metadata unchanged\",\"Page body shows \u003cmain\u003eHello SEO\u003c/main\u003e\",\"User sees page content\"],[\"7\",\"End\",\"No change\",\"Process complete\",\"Page fully loaded with SEO metadata\"]],\"exit_note\":\"All metadata injected and page rendered; SEO metadata ready for browsers and search engines.\"},\"variable_tracker\":{\"headers\":[\"Variable\",\"Start\",\"After Step 1\",\"After Step 2\",\"After Step 4\",\"Final\"],\"rows\":[[\"metadata\",\"undefined\",\"{ title: 'My Page Title', description: 'Page description for SEO' }\",\"Same\",\"Same\",\"Same\"]]},\"key_moments\":[{\"question\":\"Why do we export the metadata object instead of just defining it inside the component?\",\"answer\":\"Next.js needs the metadata object exported at the module level to detect it during build and inject it into the HTML head, as shown in execution_table step 2.\"},{\"question\":\"Does the metadata object affect the page content inside the \u003cmain\u003e tag?\",\"answer\":\"No, metadata is separate from page content. The metadata only affects the HTML head, while the \u003cmain\u003e tag content is rendered as usual (see execution_table step 6).\"},{\"question\":\"What happens if we forget to include a description in the metadata?\",\"answer\":\"The page will have no meta description tag, which can hurt SEO and social sharing previews. The metadata object must include description for best results (see execution_table step 4).\"}],\"visual_quiz\":[{\"id\":\"vq1\",\"question\":\"Look at the execution table, what is the metadata object state after step 2?\",\"options\":{\"A\":\"undefined\",\"B\":\"{}\",\"C\":\"{ title: 'My Page Title', description: 'Page description for SEO' }\",\"D\":\"null\"},\"correct_answer\":[\"C\"],\"hint\":\"Check the 'Metadata Object State' column at step 2 in the execution_table.\"},{\"id\":\"vq2\",\"question\":\"At which step does Next.js inject the metadata into the HTML \u003chead\u003e?\",\"options\":{\"A\":\"Step 4\",\"B\":\"Step 3\",\"C\":\"Step 5\",\"D\":\"Step 6\"},\"correct_answer\":[\"A\"],\"hint\":\"Look for the step where 'Next.js adds \u003ctitle\u003e and \u003cmeta\u003e tags' in the 'Next.js Behavior' column.\"},{\"id\":\"vq3\",\"question\":\"If we remove the description from metadata, what changes in the execution table?\",\"options\":{\"A\":\"The page content will not render\",\"B\":\"The \u003cmeta name=\\\"description\\\"\u003e tag will be missing in the HTML\",\"C\":\"The \u003ctitle\u003e tag will be missing\",\"D\":\"Next.js will throw an error\"},\"correct_answer\":[\"B\"],\"hint\":\"Refer to step 4's 'Result in HTML' column showing meta tags injected.\"}],\"concept_snapshot\":\"Next.js Metadata API for SEO:\\n- Export a metadata object from your page/component\\n- Include title, description, and other SEO tags\\n- Next.js injects these into the HTML \u003chead\u003e automatically\\n- Improves SEO and social sharing previews\\n- Metadata is separate from page content\",\"transcript\":\"This visual execution trace shows how Next.js uses the Metadata API for SEO. First, you define a metadata object with properties like title and description. Then you export this object from your page module. Next.js detects this export during build time and prepares to inject it into the HTML head. When rendering the page, Next.js adds the appropriate \u003ctitle\u003e and \u003cmeta\u003e tags inside the head section. Browsers and search engines then use this metadata to improve SEO and social sharing previews. The page content inside the main tag renders separately and is unaffected by metadata. This process ensures your page is SEO-friendly with minimal code.\",\"metadata\":{\"version\":\"5.0\",\"content_type\":\"framework\",\"visual_type\":\"execution_trace\",\"total_table_rows\":7,\"total_key_moments\":3,\"total_quizzes\":3,\"estimated_time_minutes\":10}}},\"subject\":\"nextjs\",\"title\":\"Metadata API for SEO\"},\"syllabusData\":{\"part\":\"part-1\",\"subject\":\"nextjs\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":8,\"total_patterns\":65,\"patterns_with_content\":65,\"created_at\":\"2026-02-28T20:17:25.344558Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Foundations\",\"subjectTitle\":\"NextJS\",\"topics\":[{\"topic_id\":\"nextjs_p1_t1\",\"title\":\"Next.js Basics\",\"order\":1,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_what_is_nextjs\",\"title\":\"What is Next.js\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_why_nextjs_over_plain_react\",\"title\":\"Why Next.js over plain React\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_how_nextjs_renders_serverfirst_model\",\"title\":\"How Next.js renders (server-first model)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_create_next_app_setup\",\"title\":\"Create Next App setup\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_project_structure_overview\",\"title\":\"Project structure overview\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_app_directory_app_router\",\"title\":\"App directory (App Router)\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_development_server_and_hot_reload\",\"title\":\"Development server and hot reload\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_typescript_support_in_nextjs\",\"title\":\"TypeScript support in Next.js\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t2\",\"title\":\"File-Based Routing\",\"order\":2,\"pattern_count\":9,\"patterns\":[{\"pattern_id\":\"nextjs_why_filebased_routing_simplifies_navigation\",\"title\":\"Why file-based routing simplifies navigation\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_pagetsx_as_route_definition\",\"title\":\"Page.tsx as route definition\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_nested_routes_with_folders\",\"title\":\"Nested routes with folders\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_dynamic_routes_with_param\",\"title\":\"Dynamic routes with [param]\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_catchall_routes_with_param\",\"title\":\"Catch-all routes with [...param]\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_route_groups_with_groupname\",\"title\":\"Route groups with (groupName)\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_notfound_page_handling\",\"title\":\"Not-found page handling\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_loading_ui_with_loadingtsx\",\"title\":\"Loading UI with loading.tsx\",\"order\":8,\"has_content\":true},{\"pattern_id\":\"nextjs_error_handling_with_errortsx\",\"title\":\"Error handling with error.tsx\",\"order\":9,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t3\",\"title\":\"Layouts and Templates\",\"order\":3,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_layouts_avoid_redundant_rendering\",\"title\":\"Why layouts avoid redundant rendering\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_root_layout_required\",\"title\":\"Root layout (required)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_nested_layouts\",\"title\":\"Nested layouts\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_layout_vs_template_difference\",\"title\":\"Layout vs template difference\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_metadata_in_layouts\",\"title\":\"Metadata in layouts\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_shared_state_across_layouts\",\"title\":\"Shared state across layouts\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_layout_navigation_behavior\",\"title\":\"Layout navigation behavior\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_multiple_root_layouts_with_route_groups\",\"title\":\"Multiple root layouts with route groups\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t4\",\"title\":\"Server Components\",\"order\":4,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_server_components_are_the_default\",\"title\":\"Why server components are the default\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_server_component_execution_model\",\"title\":\"Server component execution model\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_what_can_run_in_server_components\",\"title\":\"What can run in server components\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_data_fetching_in_server_components\",\"title\":\"Data fetching in server components\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_async_server_components\",\"title\":\"Async server components\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_server_component_restrictions\",\"title\":\"Server component restrictions\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_zero_bundle_size_for_server_components\",\"title\":\"Zero bundle size for server components\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_when_to_keep_components_on_server\",\"title\":\"When to keep components on server\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t5\",\"title\":\"Client Components\",\"order\":5,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_client_components_handle_interactivity\",\"title\":\"Why client components handle interactivity\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_use_client_directive\",\"title\":\"Use client directive\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_event_handlers_in_client_components\",\"title\":\"Event handlers in client components\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_state_and_hooks_in_client_components\",\"title\":\"State and hooks in client components\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_when_to_use_client_components\",\"title\":\"When to use client components\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_client_component_boundaries\",\"title\":\"Client component boundaries\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_server_and_client_component_composition\",\"title\":\"Server and client component composition\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_interleaving_server_and_client\",\"title\":\"Interleaving server and client\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t6\",\"title\":\"Navigation and Links\",\"order\":6,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_nextjs_navigation_is_optimized\",\"title\":\"Why Next.js navigation is optimized\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_link_component_for_client_navigation\",\"title\":\"Link component for client navigation\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_active_link_detection\",\"title\":\"Active link detection\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_programmatic_navigation_userouter\",\"title\":\"Programmatic navigation (useRouter)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_route_prefetching_behavior\",\"title\":\"Route prefetching behavior\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_redirect_function\",\"title\":\"Redirect function\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_scroll_behavior_control\",\"title\":\"Scroll behavior control\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_parallel_routes_concept\",\"title\":\"Parallel routes concept\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t7\",\"title\":\"Styling in Next.js\",\"order\":7,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_styling_options_matter\",\"title\":\"Why styling options matter\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_css_modules\",\"title\":\"CSS Modules\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_global_css\",\"title\":\"Global CSS\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_tailwind_css_integration\",\"title\":\"Tailwind CSS integration\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_cssinjs_considerations\",\"title\":\"CSS-in-JS considerations\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_font_optimization_with_next_font\",\"title\":\"Font optimization with next/font\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_image_optimization_with_next_image\",\"title\":\"Image optimization with next/image\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_conditional_styling_patterns\",\"title\":\"Conditional styling patterns\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t8\",\"title\":\"Static Assets and Optimization\",\"order\":8,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_optimization_matters_for_performance\",\"title\":\"Why optimization matters for performance\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_public_directory_for_static_files\",\"title\":\"Public directory for static files\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_image_component_and_optimization\",\"title\":\"Image component and optimization\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_responsive_images\",\"title\":\"Responsive images\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_font_optimization_and_selfhosting\",\"title\":\"Font optimization and self-hosting\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_script_component_for_thirdparty_scripts\",\"title\":\"Script component for third-party scripts\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"title\":\"Metadata API for SEO\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_open_graph_metadata\",\"title\":\"Open Graph metadata\",\"order\":8,\"has_content\":true}]}]},\"modeCode\":\"VMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Metadata API for SEO in NextJS - Step-by-Step Execution Visualized | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Visualize how Metadata API for SEO in NextJS executes step by step. Trace variables, follow the flow, and see exactly what happens at each stage with diagrams.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Metadata API for SEO in NextJS - Step-by-Step Execution Visualized | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Visualize how Metadata API for SEO in NextJS executes step by step. Trace variables, follow the flow, and see exactly what happens at each stage with diagrams.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:alt\",\"content\":\"Metadata API for SEO in NextJS - Step-by-Step Execution Visualized\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:title\",\"content\":\"Metadata API for SEO in NextJS - Step-by-Step Execution Visualized | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Visualize how Metadata API for SEO in NextJS executes step by step. Trace variables, follow the flow, and see exactly what happens at each stage with diagrams.\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>