The Metadata API in Next.js lets you define static information about your web pages, like titles and descriptions, in a simple way. This metadata helps browsers and search engines understand your page better. You write this data once, and Next.js uses it to build your pages with the right information included. It makes your site more discoverable and user-friendly without extra work.
Why it matters
Without static metadata, web pages might miss important details that help search engines rank them or browsers display them nicely. This can hurt your site's visibility and user experience. The Metadata API solves this by letting you declare metadata clearly and consistently, improving SEO and how your pages appear when shared or bookmarked. It saves time and reduces errors compared to manually adding metadata in HTML.
Where it fits
Before learning this, you should understand basic Next.js page creation and React components. After mastering static metadata, you can explore dynamic metadata for pages that change based on data or user input. This fits into the broader journey of building SEO-friendly and accessible web applications with Next.js.
Mental Model
Core Idea
Static metadata is like a label on a book cover that tells browsers and search engines what your page is about before they open it.
Think of it like...
Imagine a library where every book has a clear label on its cover showing the title, author, and summary. This label helps readers find the book quickly without opening it. Static metadata in Next.js works the same way for web pages.
┌─────────────────────────────┐
│ Next.js Page │
│ ┌─────────────────────────┐ │
│ │ Static Metadata Object │ │
│ │ - title │ │
│ │ - description │ │
│ │ - icons │ │
│ └─────────────────────────┘ │
│ ↓ │
│ Metadata added to <head> │
│ for SEO and browser use │
└─────────────────────────────┘
Build-Up - 6 Steps
1
FoundationWhat is Static Metadata
🤔
Concept:Introduce the idea of metadata as fixed information about a page.
Static metadata is data you write once for a page that doesn't change. It includes things like the page title, description, and icons. In Next.js, you define this metadata by exporting a 'metadata' object from your page or layout file so the framework can use it when building your site.
Result
You understand that static metadata is fixed page info used for SEO and display.
Understanding static metadata as fixed page info helps you see why it's important for search engines and browsers.
2
FoundationHow to Define Metadata in Next.js
🤔
Concept:Learn the syntax and location for static metadata in Next.js.
In Next.js 13+, you export a 'metadata' object from your page or layout file. This object includes properties like 'title', 'description', and 'icons'. Next.js reads this during build time to add metadata to the HTML head.
Result
You can write a metadata object that Next.js uses to set page metadata.
Knowing where and how to define metadata is key to using the Metadata API effectively.
3
IntermediateCommon Metadata Properties Explained
🤔Before reading on: Do you think 'title' and 'description' are the only metadata properties you can set? Commit to your answer.
Concept:Explore the typical properties you can set in static metadata and their roles.
Besides 'title' and 'description', you can set 'icons' for favicons, 'openGraph' for social sharing info, 'twitter' card data, and 'robots' for search engine instructions. Each property helps browsers and services show your page correctly.
Result
You know multiple metadata properties and their purposes.
Understanding the variety of metadata properties lets you optimize your page for different platforms and uses.
4
IntermediateMetadata in Layouts vs Pages
🤔Before reading on: Do you think metadata defined in a layout overrides page metadata or combines with it? Commit to your answer.
Concept:Learn how metadata inheritance works between layouts and pages in Next.js.
Metadata defined in a layout applies to all nested pages unless a page defines its own metadata, which overrides the layout's. This lets you set common metadata once and customize per page as needed.
Result
You understand metadata inheritance and overriding between layouts and pages.
Knowing metadata inheritance helps you avoid repetition and manage metadata efficiently across your app.
5
AdvancedStatic Metadata and SEO Impact
🤔Before reading on: Do you think missing metadata affects SEO ranking or just user experience? Commit to your answer.
Concept:Understand how static metadata influences search engine optimization and page ranking.
Search engines use metadata like titles and descriptions to understand page content and show snippets in search results. Proper static metadata improves your site's visibility and click rates. Missing or poor metadata can hurt SEO and user trust.
Result
You see the direct link between static metadata and SEO performance.
Recognizing metadata's SEO role motivates careful metadata crafting for better site success.
6
ExpertStatic Metadata Internals in Next.js
🤔Before reading on: Do you think Next.js injects metadata at runtime or during build time? Commit to your answer.
Concept:Dive into how Next.js processes static metadata internally during build and rendering.
Next.js reads the static metadata object at build time and generates HTML with metadata tags in the . This static injection means metadata is ready immediately on page load, improving performance and SEO. It avoids runtime overhead and ensures consistent metadata across environments.
Result
You understand Next.js's build-time metadata injection mechanism.
Knowing build-time injection explains why static metadata is fast and reliable for SEO.
Under the Hood
Next.js scans your page or layout files for exported static metadata objects during the build process. It then generates corresponding HTML , , and <link> tags and inserts them into the server-rendered HTML head. This static insertion means browsers and crawlers get metadata immediately without waiting for JavaScript. The metadata is merged hierarchically from layouts to pages, with pages overriding layouts when conflicts occur.</div><div class="dlm-design-reason "><div class="dlm-design-reason-label">Why designed this way?</div><div>Static metadata was designed to improve SEO and performance by avoiding runtime metadata generation. Early web pages had metadata hardcoded in HTML, which was simple and fast. Next.js preserves this by generating metadata at build time, ensuring fast page loads and consistent metadata across environments. Dynamic metadata is more complex and slower, so static metadata covers most common use cases efficiently.</div></div><div class="dlm-ascii-visual mechanism-diagram "><pre>┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ Page/Layout │──────▶│ Build Time │──────▶│ HTML Output │
│ metadata.ts │ │ Metadata │ │ with <head> │
│ exports obj │ │ Extraction │ │ tags added │
└───────────────┘ └───────────────┘ └───────────────┘</pre></div></div></article><article class="content-card dlm-card"><div class="code-articles-card-header"><span class="card-icon project"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="M193.33-80q-30.25 0-51.79-21.54T120-153.33v-173.34q0-30.25 21.54-51.79T193.33-400h573.34q30.25 0 51.79 21.54T840-326.67v173.34q0 30.25-21.54 51.79T766.67-80H193.33Zm-6.66-66.67h586.66v-186.66H186.67v186.66Zm252-558.66 86-153.34q4.33-7.66 11.33-11 7-3.33 14.67-1.33 7.66 2 13.3 6.5 5.63 4.5 7.36 13.5L600-677.33 768-724q9-2.33 16.17.67 7.16 3 11.5 9 4.33 6 4.66 13.33.34 7.33-5 15L694-541.33l43 25q12 7.33 15.17 20.66 3.16 13.34-4.17 25.34t-21 15.16q-13.67 3.17-25.67-4.16l-71.33-44q-12.67-7.67-15.33-21.5-2.67-13.84 5.66-25.84l51-75.33-124.66 29-22-123.33-65.34 113-106.66-77.34L387-557.33l-129.33 22.66L288-516.33q12 6.66 15.5 19.66t-3.17 25q-6.66 12-20 15.5-13.33 3.5-25.33-3.16l-132.67-76q-7.66-4.34-10.83-11.34t-1.17-14.66q2-7.67 6.84-12.84 4.83-5.16 13.83-7.16l172.33-29.34-46-170q-2.33-9 .34-15.83 2.66-6.83 8.66-11.17 6-4.33 13.67-4.66 7.67-.34 15.33 5l143.34 102Zm41 246ZM480-240Z"></path></svg></span></span><span class="codefly-card-title">Myth Busters - <!-- -->4<!-- --> Common Misconceptions</span></div><div class="code-articles-card-body"><div class="dlm-myths-grid"><div class="dlm-myth-card "><div class="dlm-myth-front "><div class="dlm-myth-self-check">Quick: Does static metadata update automatically when page data changes? Commit to yes or no.</div><div class="dlm-myth-belief"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Common Belief:</span><span>Static metadata changes dynamically when page content changes at runtime.</span></div><div class="dlm-myth-tap">Tap to reveal reality <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="yellow-icon-color ms-1 mb-1" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716q.113.137.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0"></path></svg></div></div><div class="dlm-myth-back d-none"><div class="dlm-myth-reality"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="m422-395.33-94-94q-9.67-9.67-24-9.67t-24.67 10.33q-9.66 9.67-9.66 24 0 14.34 9.66 24l119.34 120q10 10 23.33 10 13.33 0 23.33-10L680-555.33q10.33-10.34 10.33-24.67 0-14.33-10.33-24.67-10.33-9.66-25-9.33-14.67.33-24.33 10L422-395.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Reality:</span><span>Static metadata is fixed at build time and does not update automatically with runtime data changes.</span></div><div class="dlm-myth-why"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M459-60q-10-3.33-19-10L186.67-260q-12.34-9-19.5-23.33-7.17-14.34-7.17-30v-500q0-27 19.83-46.84Q199.67-880 226.67-880h506.66q27 0 46.84 19.83Q800-840.33 800-813.33v500q0 15.66-7.17 30-7.16 14.33-19.5 23.33L520-70q-9 6.67-19 10t-21 3.33q-11 0-21-3.33Zm-21.67-394-70.66-70.67q-10-10-23.34-9.83-13.33.17-23.33 9.83-10 10-10.17 23.5-.16 13.5 9.84 23.5l95 94.34q10 10 23.33 10 13.33 0 23.33-10l179.34-179.34q10-10 9.5-23.33-.5-13.33-10.17-23.33-10-10-23.5-10.17-13.5-.17-23.5 9.83L437.33-454Z"></path></svg></span>Why it matters:</span><span>Assuming metadata updates dynamically can cause stale or incorrect metadata, hurting SEO and user experience.</span></div></div></div><div class="dlm-myth-card "><div class="dlm-myth-front "><div class="dlm-myth-self-check">Quick: Can you define metadata anywhere in your Next.js app and expect it to work? Commit to yes or no.</div><div class="dlm-myth-belief"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Common Belief:</span><span>You can put metadata anywhere in the app files and Next.js will use it.</span></div><div class="dlm-myth-tap">Tap to reveal reality <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="yellow-icon-color ms-1 mb-1" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716q.113.137.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0"></path></svg></div></div><div class="dlm-myth-back d-none"><div class="dlm-myth-reality"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="m422-395.33-94-94q-9.67-9.67-24-9.67t-24.67 10.33q-9.66 9.67-9.66 24 0 14.34 9.66 24l119.34 120q10 10 23.33 10 13.33 0 23.33-10L680-555.33q10.33-10.34 10.33-24.67 0-14.33-10.33-24.67-10.33-9.66-25-9.33-14.67.33-24.33 10L422-395.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Reality:</span><span>Metadata must be exported from specific files like page or layout files for Next.js to recognize it.</span></div><div class="dlm-myth-why"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M459-60q-10-3.33-19-10L186.67-260q-12.34-9-19.5-23.33-7.17-14.34-7.17-30v-500q0-27 19.83-46.84Q199.67-880 226.67-880h506.66q27 0 46.84 19.83Q800-840.33 800-813.33v500q0 15.66-7.17 30-7.16 14.33-19.5 23.33L520-70q-9 6.67-19 10t-21 3.33q-11 0-21-3.33Zm-21.67-394-70.66-70.67q-10-10-23.34-9.83-13.33.17-23.33 9.83-10 10-10.17 23.5-.16 13.5 9.84 23.5l95 94.34q10 10 23.33 10 13.33 0 23.33-10l179.34-179.34q10-10 9.5-23.33-.5-13.33-10.17-23.33-10-10-23.5-10.17-13.5-.17-23.5 9.83L437.33-454Z"></path></svg></span>Why it matters:</span><span>Placing metadata incorrectly means it won't be included, leading to missing metadata in the final site.</span></div></div></div><div class="dlm-myth-card "><div class="dlm-myth-front "><div class="dlm-myth-self-check">Quick: Does metadata defined in a layout always override page metadata? Commit to yes or no.</div><div class="dlm-myth-belief"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Common Belief:</span><span>Layout metadata always overrides page metadata.</span></div><div class="dlm-myth-tap">Tap to reveal reality <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="yellow-icon-color ms-1 mb-1" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716q.113.137.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0"></path></svg></div></div><div class="dlm-myth-back d-none"><div class="dlm-myth-reality"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="m422-395.33-94-94q-9.67-9.67-24-9.67t-24.67 10.33q-9.66 9.67-9.66 24 0 14.34 9.66 24l119.34 120q10 10 23.33 10 13.33 0 23.33-10L680-555.33q10.33-10.34 10.33-24.67 0-14.33-10.33-24.67-10.33-9.66-25-9.33-14.67.33-24.33 10L422-395.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Reality:</span><span>Page metadata overrides layout metadata when both define the same properties.</span></div><div class="dlm-myth-why"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M459-60q-10-3.33-19-10L186.67-260q-12.34-9-19.5-23.33-7.17-14.34-7.17-30v-500q0-27 19.83-46.84Q199.67-880 226.67-880h506.66q27 0 46.84 19.83Q800-840.33 800-813.33v500q0 15.66-7.17 30-7.16 14.33-19.5 23.33L520-70q-9 6.67-19 10t-21 3.33q-11 0-21-3.33Zm-21.67-394-70.66-70.67q-10-10-23.34-9.83-13.33.17-23.33 9.83-10 10-10.17 23.5-.16 13.5 9.84 23.5l95 94.34q10 10 23.33 10 13.33 0 23.33-10l179.34-179.34q10-10 9.5-23.33-.5-13.33-10.17-23.33-10-10-23.5-10.17-13.5-.17-23.5 9.83L437.33-454Z"></path></svg></span>Why it matters:</span><span>Misunderstanding override rules can cause unexpected metadata appearing on pages.</span></div></div></div><div class="dlm-myth-card "><div class="dlm-myth-front "><div class="dlm-myth-self-check">Quick: Is it safe to put sensitive data like API keys in static metadata? Commit to yes or no.</div><div class="dlm-myth-belief"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Common Belief:</span><span>Static metadata can hold any data, including secrets.</span></div><div class="dlm-myth-tap">Tap to reveal reality <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="yellow-icon-color ms-1 mb-1" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716q.113.137.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0"></path></svg></div></div><div class="dlm-myth-back d-none"><div class="dlm-myth-reality"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="m422-395.33-94-94q-9.67-9.67-24-9.67t-24.67 10.33q-9.66 9.67-9.66 24 0 14.34 9.66 24l119.34 120q10 10 23.33 10 13.33 0 23.33-10L680-555.33q10.33-10.34 10.33-24.67 0-14.33-10.33-24.67-10.33-9.66-25-9.33-14.67.33-24.33 10L422-395.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Reality:</span><span>Static metadata is public and visible in the HTML head; secrets must never be placed there.</span></div><div class="dlm-myth-why"><span class="dlm-myth-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="M459-60q-10-3.33-19-10L186.67-260q-12.34-9-19.5-23.33-7.17-14.34-7.17-30v-500q0-27 19.83-46.84Q199.67-880 226.67-880h506.66q27 0 46.84 19.83Q800-840.33 800-813.33v500q0 15.66-7.17 30-7.16 14.33-19.5 23.33L520-70q-9 6.67-19 10t-21 3.33q-11 0-21-3.33Zm-21.67-394-70.66-70.67q-10-10-23.34-9.83-13.33.17-23.33 9.83-10 10-10.17 23.5-.16 13.5 9.84 23.5l95 94.34q10 10 23.33 10 13.33 0 23.33-10l179.34-179.34q10-10 9.5-23.33-.5-13.33-10.17-23.33-10-10-23.5-10.17-13.5-.17-23.5 9.83L437.33-454Z"></path></svg></span>Why it matters:</span><span>Exposing secrets in metadata risks security breaches and data leaks.</span></div></div></div></div></div></article><article class="content-card dlm-card"><div class="code-articles-card-header"><span class="card-icon intro"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#3B82F6"><path d="M853.33-315.33V-562l-342 185q-15.33 8.67-32 8.33-16.66-.33-32-9L93.33-571q-9-5.33-12.83-12.67Q76.67-591 76.67-600q0-9 3.83-16.33 3.83-7.34 12.83-12.67l354-193.33q7.67-4.34 15.5-6.5 7.84-2.17 16.5-2.17 8.67 0 16.5 2.17 7.84 2.16 15.5 6.5l391 212.66q8.67 4.34 13.17 12.5Q920-589 920-580v264.67q0 14.33-9.5 23.83-9.5 9.5-23.83 9.5-14.34 0-23.84-9.5t-9.5-23.83Zm-406 177.66-220-120q-16-9-25.33-24.66-9.33-15.67-9.33-34.34v-166.66l254.66 139q15.34 8.66 32 8.66 16.67 0 32-8.66l254.67-139v166.66q0 18.67-9.33 34.34-9.34 15.66-25.34 24.66l-220 120q-7.66 4.34-15.5 6.5Q488-129 479.33-129q-8.66 0-16.5-2.17-7.83-2.16-15.5-6.5Z"></path></svg></span></span><span class="codefly-card-title">Expert Zone</span></div><div class="code-articles-card-body"><div class="dlm-expert-nuances"><div class="dlm-nuance-item"><div class="dlm-nuance-number">1</div><div class="dlm-nuance-text">Metadata merging respects deep object merging for nested properties like openGraph, allowing partial overrides without losing defaults.</div></div><div class="dlm-nuance-item"><div class="dlm-nuance-number">2</div><div class="dlm-nuance-text">Static metadata supports internationalization by allowing localized metadata objects per language segment in Next.js apps.</div></div><div class="dlm-nuance-item"><div class="dlm-nuance-number">3</div><div class="dlm-nuance-text">Next.js optimizes metadata tags by deduplicating and ordering them to avoid conflicts and improve browser parsing.</div></div></div><div class="dlm-when-not"><div class="dlm-when-not-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>When NOT to use</div><div>Static metadata is not suitable when metadata depends on user data or frequently changing content. In those cases, use dynamic metadata generation with server components or client-side updates.</div></div><div class="dlm-production"><div class="dlm-production-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#10B981"><path d="m422-395.33-94-94q-9.67-9.67-24-9.67t-24.67 10.33q-9.66 9.67-9.66 24 0 14.34 9.66 24l119.34 120q10 10 23.33 10 13.33 0 23.33-10L680-555.33q10.33-10.34 10.33-24.67 0-14.33-10.33-24.67-10.33-9.66-25-9.33-14.67.33-24.33 10L422-395.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Production Patterns</div><div>In production, developers define common metadata in root layouts and override only page-specific details. They also use openGraph and twitter metadata extensively for social sharing previews. Metadata is tested with SEO tools and browser DevTools to ensure correctness.</div></div></div></article><article class="content-card dlm-card"><div class="code-articles-card-header"><span class="card-icon intro"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#3B82F6"><path d="M602.67-120v-123.33h-156V-650H358v126.67H80V-840h278v123.33h244.67V-840H880v316.67H602.67V-650h-89.34v340h89.34v-126.67H880V-120H602.67Zm-456-653.33V-590v-183.33ZM669.33-370v183.33V-370Zm0-403.33V-590v-183.33Zm0 183.33h144v-183.33h-144V-590Zm0 403.33h144V-370h-144v183.33ZM146.67-590h144.66v-183.33H146.67V-590Z"></path></svg></span></span><span class="codefly-card-title">Connections</span></div><div class="code-articles-card-body"><div class="dlm-connections-list"><div class="dlm-connection-item"><div class="dlm-connection-to">SEO (Search Engine Optimization)</div><div class="dlm-connection-rel">Static metadata is a foundational part of SEO strategy.</div><div class="dlm-connection-insight"><span class="dlm-insight-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="yellow-icon-color" height="22" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M7.94101 18C7.64391 16.7274 6.30412 15.6857 5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.6944 15.687 16.3558 16.7276 16.059 18H7.94101ZM16 20V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V20H16ZM13 10.0048V6L8.5 12.0048H11V16.0048L15.5 10.0048H13Z"></path></svg></span><span>Understanding static metadata helps grasp how search engines read and rank pages, improving site visibility.</span></div></div><div class="dlm-connection-item"><div class="dlm-connection-to">Server-Side Rendering (SSR)</div><div class="dlm-connection-rel">Static metadata is injected during SSR to deliver ready-to-use HTML.</div><div class="dlm-connection-insight"><span class="dlm-insight-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="yellow-icon-color" height="22" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M7.94101 18C7.64391 16.7274 6.30412 15.6857 5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.6944 15.687 16.3558 16.7276 16.059 18H7.94101ZM16 20V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V20H16ZM13 10.0048V6L8.5 12.0048H11V16.0048L15.5 10.0048H13Z"></path></svg></span><span>Knowing SSR clarifies why static metadata improves performance and SEO by avoiding client-side delays.</span></div></div><div class="dlm-connection-item"><div class="dlm-connection-to">Library Cataloging Systems</div><div class="dlm-connection-rel">Both use fixed descriptive data to help users find content quickly.</div><div class="dlm-connection-insight"><span class="dlm-insight-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="yellow-icon-color" height="22" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M7.94101 18C7.64391 16.7274 6.30412 15.6857 5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.6944 15.687 16.3558 16.7276 16.059 18H7.94101ZM16 20V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V20H16ZM13 10.0048V6L8.5 12.0048H11V16.0048L15.5 10.0048H13Z"></path></svg></span><span>Seeing metadata like library labels shows how organizing info upfront aids discovery in very different fields.</span></div></div></div></div></article><article class="content-card dlm-card"><div class="code-articles-card-header"><span class="card-icon project"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-513.33 80.67 80.66Q570.33-423 584-423q13.67 0 23.33-9.67Q617-442.33 617-456q0-13.67-9.67-23.33L526.67-560l80.66-80.67Q617-650.33 617-664q0-13.67-9.67-23.33Q597.67-697 584-697q-13.67 0-23.33 9.67L480-606.67l-80.67-80.66Q389.67-697 376-697q-13.67 0-23.33 9.67Q343-677.67 343-664q0 13.67 9.67 23.33L433.33-560l-80.66 80.67Q343-469.67 343-456q0 13.67 9.67 23.33Q362.33-423 376-423q13.67 0 23.33-9.67L480-513.33ZM240-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-240H240Zm-28.67-66.67h602v-506.66H146.67v575l64.66-68.34Zm-64.66 0v-506.66 506.66Z"></path></svg></span></span><span class="codefly-card-title">Common Pitfalls</span></div><div class="code-articles-card-body"><div class="dlm-pitfalls-list"><div class="dlm-pitfall-item"><div class="dlm-pitfall-header"><span class="dlm-pitfall-number">#<!-- -->1</span><span class="dlm-pitfall-title">Defining metadata inside a React component instead of exporting a metadata object.</span></div><div class="dlm-pitfall-body"><div class="dlm-pitfall-wrong"><span class="dlm-pitfall-label"><span class="new-material-symbols icon-hw-20"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#EF4444"><path d="m480-433.33 124.67 124.66Q614.33-299 628-299q13.67 0 23.33-9.67Q661-318.33 661-332q0-13.67-9.67-23.33L526.67-480l124.66-124.67Q661-614.33 661-628q0-13.67-9.67-23.33Q641.67-661 628-661q-13.67 0-23.33 9.67L480-526.67 355.33-651.33Q345.67-661 332-661q-13.67 0-23.33 9.67Q299-641.67 299-628q0 13.67 9.67 23.33L433.33-480 308.67-355.33Q299-345.67 299-332q0 13.67 9.67 23.33Q318.33-299 332-299q13.67 0 23.33-9.67L480-433.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z"></path></svg></span>Wrong approach:</span><span>export default function Page() {
return <><title>My Page;
}
Root cause:Static metadata must be synchronous and static; dynamic data requires different APIs.
Key Takeaways
Static metadata in Next.js is fixed information about a page that improves SEO and user experience by providing clear page details to browsers and search engines.
You define static metadata by exporting a metadata object from page or layout files, which Next.js processes at build time to inject into the HTML head.
Metadata inheritance allows layouts to provide default metadata, which pages can override to customize their own metadata.
Proper use of metadata properties like title, description, openGraph, and twitter cards enhances how your pages appear in search results and social media.
Static metadata is fast and reliable because it is generated at build time, but it cannot handle dynamic or user-specific metadata, which requires other approaches.