How to Use <head> in Astro for SEO and Metadata
In Astro, you use the
<head> tag inside your component or page to add metadata like titles, descriptions, and links. Place your <head> content at the top level of your Astro file to control the document's head section easily.Syntax
The <head> tag in Astro works like the HTML head element. You put metadata tags inside it, such as <title>, <meta>, and <link>. Astro collects these tags and inserts them into the final HTML document's head.
Use it at the top level of your Astro component or page file.
astro
<head> <title>Your Page Title</title> <meta name="description" content="Page description here" /> <link rel="icon" href="/favicon.ico" /> </head>
Example
This example shows a simple Astro page that sets the page title, description, and favicon using the <head> tag. When you open this page in a browser, the tab will show the title, and search engines will see the description.
astro
--- // No frontmatter needed for this example --- <head> <title>Welcome to My Astro Site</title> <meta name="description" content="This is a simple Astro page with head metadata." /> <link rel="icon" href="/favicon.ico" /> </head> <main> <h1>Hello, Astro!</h1> <p>This page uses the <head> tag to set metadata.</p> </main>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to My Astro Site</title>
<meta name="description" content="This is a simple Astro page with head metadata." />
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<main>
<h1>Hello, Astro!</h1>
<p>This page uses the <head> tag to set metadata.</p>
</main>
</body>
</html>
Common Pitfalls
- Placing <head> inside nested components: The
<head>tag should be at the top level of your Astro page or layout, not inside child components, or it may not work as expected. - Multiple conflicting <title> tags: Avoid adding more than one
<title>tag in the same page to prevent confusion in browsers and SEO. - Forgetting to close tags: Always close your
<meta>and<link>tags properly to keep valid HTML.
astro
<!-- Wrong: head inside a component --> --- // ChildComponent.astro --- <head> <title>Wrong Place</title> </head> <!-- Right: head at page level --> --- // Page.astro --- <head> <title>Correct Place</title> </head> <ChildComponent />
Quick Reference
Use this quick guide to remember how to add common metadata in Astro's <head>:
| Tag | Purpose | Example |
|---|---|---|
| Adds metadata like description or charset | ||
| Links to resources like favicon or stylesheets | ||
| Defines character encoding |
Key Takeaways
Use the tag at the top level of your Astro page or layout to add metadata.
Include , <meta>, and <link> tags inside <head> for SEO and browser info.</span></div><div class="qna-takeaway"><div class="qna-takeaway-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg></div><span class="qna-takeaway-text">Avoid placing <head> inside nested components to ensure proper rendering.</span></div><div class="qna-takeaway"><div class="qna-takeaway-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg></div><span class="qna-takeaway-text">Do not add multiple <title> tags on the same page to prevent conflicts.</span></div><div class="qna-takeaway"><div class="qna-takeaway-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg></div><span class="qna-takeaway-text">Always close self-closing tags like <meta> and <link> for valid HTML.</span></div></div></div></div><hr class="light-hr-border mt-5 mb-0"/><div class="qna-related-mesh"><div class="qna-mesh-block"><p class="qna-mesh-label">Related by keyword</p><div class="qna-mesh-list"><a href="/codefly/learn/astro/qna/how-routing-works-in-astro" class="qna-mesh-item token-match"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How Routing Works in Astro: Simple Guide to Astro Routing</span><span class="qna-mesh-item-tag muted">Pages and Routing</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/astro-vs-eleventy-difference" class="qna-mesh-item token-match"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">Astro vs Eleventy: Key Differences and When to Use Each</span><span class="qna-mesh-item-tag muted">Getting Started</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/astro-vs-gatsby-difference" class="qna-mesh-item token-match"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">Astro vs Gatsby: Key Differences and When to Use Each</span><span class="qna-mesh-item-tag muted">Getting Started</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/astro-vs-hugo-difference" class="qna-mesh-item token-match"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">Astro vs Hugo: Key Differences and When to Use Each</span><span class="qna-mesh-item-tag muted">Getting Started</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/astro-vs-next-js-difference" class="qna-mesh-item token-match"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">Astro vs Next.js: Key Differences and When to Use Each</span><span class="qna-mesh-item-tag muted">Getting Started</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a></div></div><div class="qna-mesh-block"><p class="qna-mesh-label">Up next</p><div class="qna-mesh-list"><a href="/codefly/learn/astro/qna/what-is-astrojs-tailwind" class="qna-mesh-item neighbor"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">@astrojs/tailwind: What It Is and How to Use It in Astro</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/what-is-view-transitions-in-astro" class="qna-mesh-item neighbor"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">View Transitions in Astro: Smooth Page Changes Explained</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/how-to-build-astro-project" class="qna-mesh-item neighbor"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Build an Astro Project: Step-by-Step Guide</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/how-to-deploy-astro-to-cloudflare" class="qna-mesh-item neighbor"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Deploy Astro to Cloudflare: Step-by-Step Guide</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="green-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a></div></div><div class="qna-mesh-block same-topic-block"><p class="qna-mesh-label">More in <strong>SEO and Meta</strong></p><div class="qna-mesh-list"><a href="/codefly/learn/astro/qna/how-to-add-canonical-url-astro" class="qna-mesh-item same-topic"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Add Canonical URL in Astro for SEO</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/how-to-add-meta-tags-in-astro" class="qna-mesh-item same-topic"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Add Meta Tags in Astro for SEO and Social Sharing</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/how-to-add-og-tags-in-astro" class="qna-mesh-item same-topic"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Add OG Tags in Astro for Social Sharing</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a><a href="/codefly/learn/astro/qna/how-to-create-sitemap-in-astro" class="qna-mesh-item same-topic"><span class="qna-mesh-item-icon"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><span class="qna-mesh-item-title">How to Create Sitemap in Astro: Simple Guide</span><span class="qna-mesh-item-arrow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="purple-icon-color" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></span></a></div></div></div></article></div></div></div></main></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/caf3ca742c7945f9.css\",\"style\"]\n3:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n4:HL[\"/_next/static/css/74cd1891d522f88c.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\nc:I[61343,[],\"\"]\nd:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\ne:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\nf:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n10:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n12:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"astro\",\"d\"]\nb:[\"slug\",\"how-to-use-head-in-astro\",\"d\"]\n13:[]\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/astro/qna/how-to-use-head-in-astro\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"astro\",\"d\"],{\"children\":[\"qna\",{\"children\":[[\"slug\",\"how-to-use-head-in-astro\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"astro\",\"d\"],{\"children\":[\"qna\",{\"children\":[[\"slug\",\"how-to-use-head-in-astro\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"qna\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/74cd1891d522f88c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"qna\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",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\":[\"$\",\"$Lc\",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\":[\"$\",\"$Lc\",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\":[\"$\",\"$Lc\",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\":[\"$\",\"$Lc\",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\"}],[\"$\",\"$Ld\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Ld\",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\"}],[\"$\",\"$Ld\",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);})();\"}}],[\"$\",\"$Ld\",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\"}],[\"$\",\"$Ld\",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\":[[\"$\",\"$Le\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$Lf\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L10\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L11\"],\"globalErrorComponent\":\"$12\",\"missingSlots\":\"$W13\"}]]\n"])</script><script>self.__next_f.push([1,"14:I[56620,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6051\",\"static/chunks/795d4814-e558be540b48def1.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\",\"9212\",\"static/chunks/59650de3-e90957e3c8f68e80.js\",\"9956\",\"static/chunks/ee560e2c-91d263129af6c0b1.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8555\",\"static/chunks/8555-cc138b2fb472bbce.js\",\"6013\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/qna/%5Bslug%5D/page-16afe37dc81236b8.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://leyaa.ai/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"How to Use \u003chead\u003e in Astro for SEO and Metadata\\\"}]}\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"TechArticle\\\",\\\"headline\\\":\\\"How to Use \u003chead\u003e in Astro for SEO and Metadata\\\",\\\"description\\\":\\\"Learn how to use the \u003chead\u003e tag in Astro to add metadata, titles, and SEO tags to your pages effectively.\\\",\\\"author\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"url\\\":\\\"https://leyaa.ai\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"url\\\":\\\"https://leyaa.ai\\\"},\\\"url\\\":\\\"https://leyaa.ai/codefly/learn/astro/qna/how-to-use-head-in-astro\\\",\\\"inLanguage\\\":\\\"en\\\",\\\"proficiencyLevel\\\":\\\"beginner\\\",\\\"about\\\":{\\\"@type\\\":\\\"ComputerLanguage\\\",\\\"name\\\":\\\"Astro\\\"},\\\"datePublished\\\":\\\"2026-03-09\\\",\\\"timeRequired\\\":\\\"PT4M\\\"}\"}}],[\"$\",\"script\",\"2\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"FAQPage\\\",\\\"mainEntity\\\":[{\\\"@type\\\":\\\"Question\\\",\\\"name\\\":\\\"How to use head in astro\\\",\\\"acceptedAnswer\\\":{\\\"@type\\\":\\\"Answer\\\",\\\"text\\\":\\\"In Astro, you use the \u0026lt;head\u0026gt; tag inside your component or page to add metadata like titles, descriptions, and links. Place your \u0026lt;head\u0026gt; content at the top level of your Astro file to control the document's head section easily.\\\"}}]}\"}}]],[\"$\",\"$L14\",null,{\"data\":{\"subject\":\"astro\",\"query_slug\":\"how-to-use-head-in-astro\",\"content_type\":\"Frameworks \u0026 Libraries\",\"key_takeaways\":[\"Use the \u003chead\u003e tag at the top level of your Astro page or layout to add metadata.\",\"Include \u003ctitle\u003e, \u003cmeta\u003e, and \u003clink\u003e tags inside \u003chead\u003e for SEO and browser info.\",\"Avoid placing \u003chead\u003e inside nested components to ensure proper rendering.\",\"Do not add multiple \u003ctitle\u003e tags on the same page to prevent conflicts.\",\"Always close self-closing tags like \u003cmeta\u003e and \u003clink\u003e for valid HTML.\"],\"metadata\":{\"version\":\"1.0\",\"mode\":\"QNAS\",\"estimated_read_time\":4,\"difficulty\":\"beginner\",\"section_count\":4},\"pattern_slug\":\"using-head-in-astro\",\"query\":\"How to use head in astro\",\"query_type\":\"how_to\",\"related_queries\":[\"astro-layouts\",\"astro-seo-best-practices\",\"astro-meta-tags\"],\"sections\":[{\"heading\":\"Syntax\",\"content\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag in Astro works like the HTML head element. You put metadata tags inside it, such as \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e, and \u003ccode\u003e\u0026lt;link\u0026gt;\u003c/code\u003e. Astro collects these tags and inserts them into the final HTML document's head.\u003c/p\u003e\u003cp\u003eUse it at the top level of your Astro component or page file.\u003c/p\u003e\",\"code\":\"\u003chead\u003e\\n \u003ctitle\u003eYour Page Title\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"Page description here\\\" /\u003e\\n \u003clink rel=\\\"icon\\\" href=\\\"/favicon.ico\\\" /\u003e\\n\u003c/head\u003e\",\"code_language\":\"astro\",\"code_output\":null,\"table\":null},{\"heading\":\"Example\",\"content\":\"\u003cp\u003eThis example shows a simple Astro page that sets the page title, description, and favicon using the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag. When you open this page in a browser, the tab will show the title, and search engines will see the description.\u003c/p\u003e\",\"code\":\"---\\n// No frontmatter needed for this example\\n---\\n\\n\u003chead\u003e\\n \u003ctitle\u003eWelcome to My Astro Site\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"This is a simple Astro page with head metadata.\\\" /\u003e\\n \u003clink rel=\\\"icon\\\" href=\\\"/favicon.ico\\\" /\u003e\\n\u003c/head\u003e\\n\\n\u003cmain\u003e\\n \u003ch1\u003eHello, Astro!\u003c/h1\u003e\\n \u003cp\u003eThis page uses the \u0026lt;head\u0026gt; tag to set metadata.\u003c/p\u003e\\n\u003c/main\u003e\",\"code_language\":\"astro\",\"code_output\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eWelcome to My Astro Site\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"This is a simple Astro page with head metadata.\\\" /\u003e\\n \u003clink rel=\\\"icon\\\" href=\\\"/favicon.ico\\\" /\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cmain\u003e\\n \u003ch1\u003eHello, Astro!\u003c/h1\u003e\\n \u003cp\u003eThis page uses the \u0026lt;head\u0026gt; tag to set metadata.\u003c/p\u003e\\n \u003c/main\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"table\":null},{\"heading\":\"Common Pitfalls\",\"content\":\"\u003cul\u003e\u003cli\u003e\u003cstrong\u003ePlacing \u0026lt;head\u0026gt; inside nested components:\u003c/strong\u003e The \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag should be at the top level of your Astro page or layout, not inside child components, or it may not work as expected.\u003c/li\u003e\u003cli\u003e\u003cstrong\u003eMultiple conflicting \u0026lt;title\u0026gt; tags:\u003c/strong\u003e Avoid adding more than one \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag in the same page to prevent confusion in browsers and SEO.\u003c/li\u003e\u003cli\u003e\u003cstrong\u003eForgetting to close tags:\u003c/strong\u003e Always close your \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;link\u0026gt;\u003c/code\u003e tags properly to keep valid HTML.\u003c/li\u003e\u003c/ul\u003e\",\"code\":\"\u003c!-- Wrong: head inside a component --\u003e\\n---\\n// ChildComponent.astro\\n---\\n\u003chead\u003e\\n \u003ctitle\u003eWrong Place\u003c/title\u003e\\n\u003c/head\u003e\\n\\n\u003c!-- Right: head at page level --\u003e\\n---\\n// Page.astro\\n---\\n\u003chead\u003e\\n \u003ctitle\u003eCorrect Place\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cChildComponent /\u003e\",\"code_language\":\"astro\",\"code_output\":null,\"table\":null},{\"heading\":\"Quick Reference\",\"content\":\"\u003cp\u003eUse this quick guide to remember how to add common metadata in Astro's \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e:\u003c/p\u003e\",\"code\":null,\"code_language\":null,\"code_output\":null,\"table\":{\"headers\":[\"Tag\",\"Purpose\",\"Example\"],\"rows\":[[\"\u003ctitle\u003e\",\"Sets the page title shown in browser tabs\",\"\u003ctitle\u003eMy Site\u003c/title\u003e\"],[\"\u003cmeta\u003e\",\"Adds metadata like description or charset\",\"\u003cmeta name=\\\"description\\\" content=\\\"Site info\\\" /\u003e\"],[\"\u003clink\u003e\",\"Links to resources like favicon or stylesheets\",\"\u003clink rel=\\\"icon\\\" href=\\\"/favicon.ico\\\" /\u003e\"],[\"\u003cmeta charset\u003e\",\"Defines character encoding\",\"\u003cmeta charset=\\\"UTF-8\\\" /\u003e\"]]}}],\"seo_description\":\"Learn how to use the \u003chead\u003e tag in Astro to add metadata, titles, and SEO tags to your pages effectively.\",\"seo_title\":\"How to Use \u003chead\u003e in Astro for SEO and Metadata\",\"short_answer\":\"In Astro, you use the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag inside your component or page to add metadata like titles, descriptions, and links. Place your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e content at the top level of your Astro file to control the document's head section easily.\",\"topic_group\":\"SEO and Meta\",\"topic_order\":11,\"publishedAt\":\"2026-03-09\"},\"subject\":\"astro\",\"dbSubject\":\"astro\",\"product\":\"codefly\",\"baseUrl\":\"/codefly/learn\",\"queryList\":[{\"topic\":\"Getting Started\",\"order\":1,\"count\":12,\"queries\":[{\"slug\":\"astro-vs-eleventy-difference\",\"title\":\"Astro vs Eleventy: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-gatsby-difference\",\"title\":\"Astro vs Gatsby: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-hugo-difference\",\"title\":\"Astro vs Hugo: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-next-js-difference\",\"title\":\"Astro vs Next.js: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"how-to-create-astro-project\",\"title\":\"How to Create an Astro Project: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-install-astro\",\"title\":\"How to Install Astro: Quick Setup Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-run-astro-project\",\"title\":\"How to Run an Astro Project: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-astro-cli\",\"title\":\"How to Use Astro CLI: Commands and Examples\",\"type\":\"how_to\"},{\"slug\":\"what-is-astro-framework\",\"title\":\"Astro Framework: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-astro-island-architecture\",\"title\":\"Astro Island Architecture: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-astro-used-for\",\"title\":\"What is Astro Used For: Modern Web Development Explained\",\"type\":\"what_is\"},{\"slug\":\"what-is-partial-hydration-in-astro\",\"title\":\"Partial Hydration in Astro: What It Is and How It Works\",\"type\":\"what_is\"}]},{\"topic\":\"Pages and Routing\",\"order\":2,\"count\":9,\"queries\":[{\"slug\":\"how-routing-works-in-astro\",\"title\":\"How Routing Works in Astro: Simple Guide to Astro Routing\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-404-page-in-astro\",\"title\":\"How to Create a 404 Page in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-dynamic-route-in-astro\",\"title\":\"How to Create Dynamic Routes in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-nested-routes-astro\",\"title\":\"How to Create Nested Routes in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-page-in-astro\",\"title\":\"How to Create a Page in Astro: Simple Steps for Beginners\",\"type\":\"how_to\"},{\"slug\":\"how-to-redirect-in-astro\",\"title\":\"How to Redirect in Astro: Simple Guide with Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-getstaticpaths-in-astro\",\"title\":\"How to Use getStaticPaths in Astro for Dynamic Pages\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-params-in-astro-route\",\"title\":\"How to Use Params in Astro Route for Dynamic Pages\",\"type\":\"how_to\"},{\"slug\":\"what-is-file-based-routing-in-astro\",\"title\":\"File Based Routing in Astro: How It Works and When to Use\",\"type\":\"what_is\"}]},{\"topic\":\"Components\",\"order\":3,\"count\":16,\"queries\":[{\"slug\":\"client-load-vs-client-idle-vs-client-visible-in-astro\",\"title\":\"Client:load vs client:idle vs client:visible in Astro: Key Differences\",\"type\":\"comparison\"},{\"slug\":\"how-to-create-component-in-astro\",\"title\":\"How to Create a Component in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-import-component-in-astro\",\"title\":\"How to Import Components in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-client-directives-astro\",\"title\":\"How to Use Client Directives in Astro for Interactive Components\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-conditional-rendering-astro\",\"title\":\"How to Use Conditional Rendering in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-expressions-in-astro\",\"title\":\"How to Use Expressions in Astro: Simple Syntax and Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-loops-in-astro-template\",\"title\":\"How to Use Loops in Astro Template: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-named-slots-in-astro\",\"title\":\"How to Use Named Slots in Astro for Flexible Components\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-props-in-astro-component\",\"title\":\"How to Use Props in Astro Components: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-slots-in-astro-component\",\"title\":\"How to Use Slots in Astro Components: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"what-is-astro-component\",\"title\":\"What Is an Astro Component? Simple Explanation and Example\",\"type\":\"what_is\"},{\"slug\":\"what-is-astro-file\",\"title\":\".astro File Explained: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-client-idle-in-astro\",\"title\":\"What is client:idle in Astro: Lazy Loading Components Explained\",\"type\":\"what_is\"},{\"slug\":\"what-is-client-load-in-astro\",\"title\":\"What is client:load in Astro: Explanation and Usage\",\"type\":\"what_is\"},{\"slug\":\"what-is-client-only-in-astro\",\"title\":\"What is client:only in Astro: Explanation and Usage\",\"type\":\"what_is\"},{\"slug\":\"what-is-client-visible-in-astro\",\"title\":\"What is client:visible in Astro: Explanation and Usage\",\"type\":\"what_is\"}]},{\"topic\":\"Framework Integration\",\"order\":4,\"count\":8,\"queries\":[{\"slug\":\"how-to-add-react-integration-astro\",\"title\":\"How to Add React Integration in Astro Projects\",\"type\":\"how_to\"},{\"slug\":\"how-to-add-tailwind-to-astro\",\"title\":\"How to Add Tailwind CSS to Astro Projects Quickly\",\"type\":\"how_to\"},{\"slug\":\"how-to-mix-frameworks-in-astro\",\"title\":\"How to Mix Frameworks in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-preact-with-astro\",\"title\":\"How to Use Preact with Astro: Simple Integration Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-react-with-astro\",\"title\":\"How to Use React with Astro: Simple Integration Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-solid-with-astro\",\"title\":\"How to Use Solid with Astro: Simple Integration Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-svelte-with-astro\",\"title\":\"How to Use Svelte with Astro: Simple Integration Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-vue-with-astro\",\"title\":\"How to Use Vue with Astro: Simple Integration Guide\",\"type\":\"how_to\"}]},{\"topic\":\"Layouts\",\"order\":5,\"count\":5,\"queries\":[{\"slug\":\"how-to-create-layout-in-astro\",\"title\":\"How to Create Layout in Astro: Simple Guide with Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-pass-data-to-layout-astro\",\"title\":\"How to Pass Data to Layout in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-layout-component-astro\",\"title\":\"How to Use Layout Component in Astro for Page Structure\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-nested-layouts-astro\",\"title\":\"How to Use Nested Layouts in Astro for Structured Pages\",\"type\":\"how_to\"},{\"slug\":\"what-is-base-layout-in-astro\",\"title\":\"Base Layout in Astro: What It Is and How to Use It\",\"type\":\"what_is\"}]},{\"topic\":\"Content Collections\",\"order\":6,\"count\":11,\"queries\":[{\"slug\":\"how-to-add-frontmatter-in-astro\",\"title\":\"How to Add Frontmatter in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-content-collection-in-astro\",\"title\":\"How to Create Content Collection in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-define-collection-schema-astro\",\"title\":\"How to Define Collection Schema in Astro for Content Collections\",\"type\":\"how_to\"},{\"slug\":\"how-to-query-content-collection-in-astro\",\"title\":\"How to Query Content Collection in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-render-markdown-content-astro\",\"title\":\"How to Render Markdown Content in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-content-collection-for-blog-in-astro\",\"title\":\"How to Use Content Collection for Blog in Astro\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-getcollection-in-astro\",\"title\":\"How to Use getCollection in Astro for Content Collections\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-getentry-in-astro\",\"title\":\"How to Use getEntry in Astro: Syntax and Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-markdown-with-astro\",\"title\":\"How to Use Markdown with Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-mdx-with-astro\",\"title\":\"How to Use MDX with Astro: Simple Guide for Beginners\",\"type\":\"how_to\"},{\"slug\":\"what-is-content-collection-in-astro\",\"title\":\"Content Collection in Astro: What It Is and How It Works\",\"type\":\"what_is\"}]},{\"topic\":\"Data Fetching\",\"order\":7,\"count\":7,\"queries\":[{\"slug\":\"how-to-fetch-api-data-in-astro\",\"title\":\"How to Fetch API Data in Astro: Simple Guide with Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-fetch-data-at-build-time-in-astro\",\"title\":\"How to Fetch Data at Build Time in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-fetch-data-in-astro\",\"title\":\"How to Fetch Data in Astro: Simple Guide with Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-env-variables-in-astro\",\"title\":\"How to Use Environment Variables in Astro Projects\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-fetch-in-astro-component\",\"title\":\"How to Use Fetch in Astro Component: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-import-meta-env-astro\",\"title\":\"How to Use import.meta.env in Astro for Environment Variables\",\"type\":\"how_to\"},{\"slug\":\"server-side-vs-build-time-fetching-astro\",\"title\":\"Server Side vs Build Time Fetching in Astro: Key Differences and Usage\",\"type\":\"comparison\"}]},{\"topic\":\"Styling\",\"order\":8,\"count\":8,\"queries\":[{\"slug\":\"how-to-add-css-in-astro\",\"title\":\"How to Add CSS in Astro: Simple Methods Explained\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-css-modules-in-astro\",\"title\":\"How to Use CSS Modules in Astro for Scoped Styling\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-define-vars-in-astro-style\",\"title\":\"How to Use define:vars in Astro Style for Scoped CSS Variables\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-global-styles-in-astro\",\"title\":\"How to Use Global Styles in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-is-global-in-astro\",\"title\":\"How to Use is:global in Astro for Global CSS Styling\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-sass-in-astro\",\"title\":\"How to Use Sass in Astro: Simple Setup and Example\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-scoped-styles-in-astro\",\"title\":\"How to Use Scoped Styles in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-tailwind-in-astro\",\"title\":\"How to Use Tailwind CSS in Astro: Setup and Example\",\"type\":\"how_to\"}]},{\"topic\":\"SSR and Rendering\",\"order\":9,\"count\":9,\"queries\":[{\"slug\":\"how-to-enable-ssr-in-astro\",\"title\":\"How to Enable SSR in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-prerender-page-in-astro\",\"title\":\"How to Prerender a Page in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-adapter-for-ssr-astro\",\"title\":\"How to Use Adapter for SSR in Astro: Setup and Example\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-output-hybrid-in-astro\",\"title\":\"How to Use Output Hybrid in Astro: Syntax and Example\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-output-server-in-astro\",\"title\":\"How to Use Output Server in Astro for Development\",\"type\":\"how_to\"},{\"slug\":\"static-vs-ssr-vs-hybrid-in-astro\",\"title\":\"Static vs SSR vs Hybrid in Astro: Key Differences and Usage\",\"type\":\"comparison\"},{\"slug\":\"what-is-hybrid-rendering-in-astro\",\"title\":\"Hybrid Rendering in Astro: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-server-rendering-in-astro\",\"title\":\"What is Server Rendering in Astro: Explained Simply\",\"type\":\"what_is\"},{\"slug\":\"what-is-static-rendering-in-astro\",\"title\":\"Static Rendering in Astro: What It Is and How It Works\",\"type\":\"what_is\"}]},{\"topic\":\"Integrations\",\"order\":10,\"count\":12,\"queries\":[{\"slug\":\"how-to-add-page-transitions-astro\",\"title\":\"How to Add Page Transitions in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-install-integration-in-astro\",\"title\":\"How to Install Integration in Astro: Simple Steps\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-astro-actions\",\"title\":\"How to Use Astro Actions: Simple Guide with Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-astro-db\",\"title\":\"How to Use Astro DB: Simple Guide for Beginners\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-integrations-in-astro\",\"title\":\"How to Use Integrations in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-view-transitions-astro\",\"title\":\"How to Use View Transitions in Astro for Smooth Page Changes\",\"type\":\"how_to\"},{\"slug\":\"what-is-astrojs-image\",\"title\":\"@astrojs/image: What It Is and How to Use It\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-mdx\",\"title\":\"@astrojs/mdx: What It Is and How It Works in Astro\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-react\",\"title\":\"@astrojs/react: React Integration for Astro Projects\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-sitemap\",\"title\":\"@astrojs/sitemap: What It Is and How to Use It\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-tailwind\",\"title\":\"@astrojs/tailwind: What It Is and How to Use It in Astro\",\"type\":\"what_is\"},{\"slug\":\"what-is-view-transitions-in-astro\",\"title\":\"View Transitions in Astro: Smooth Page Changes Explained\",\"type\":\"what_is\"}]},{\"topic\":\"SEO and Meta\",\"order\":11,\"count\":7,\"queries\":[{\"slug\":\"how-to-add-canonical-url-astro\",\"title\":\"How to Add Canonical URL in Astro for SEO\",\"type\":\"how_to\"},{\"slug\":\"how-to-add-meta-tags-in-astro\",\"title\":\"How to Add Meta Tags in Astro for SEO and Social Sharing\",\"type\":\"how_to\"},{\"slug\":\"how-to-add-og-tags-in-astro\",\"title\":\"How to Add OG Tags in Astro for Social Sharing\",\"type\":\"how_to\"},{\"slug\":\"how-to-create-sitemap-in-astro\",\"title\":\"How to Create Sitemap in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-optimize-astro-for-seo\",\"title\":\"How to Optimize Astro for SEO: Best Practices and Examples\",\"type\":\"how_to\"},{\"slug\":\"how-to-set-page-title-in-astro\",\"title\":\"How to Set Page Title in Astro: Simple Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-head-in-astro\",\"title\":\"How to Use \u003chead\u003e in Astro for SEO and Metadata\",\"type\":\"how_to\"}]},{\"topic\":\"Deployment\",\"order\":12,\"count\":9,\"queries\":[{\"slug\":\"how-to-build-astro-project\",\"title\":\"How to Build an Astro Project: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-deploy-astro-to-cloudflare\",\"title\":\"How to Deploy Astro to Cloudflare: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-deploy-astro-to-github-pages\",\"title\":\"How to Deploy Astro to GitHub Pages Easily\",\"type\":\"how_to\"},{\"slug\":\"how-to-deploy-astro-to-netlify\",\"title\":\"How to Deploy Astro to Netlify: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-deploy-astro-to-vercel\",\"title\":\"How to Deploy Astro to Vercel: Step-by-Step Guide\",\"type\":\"how_to\"},{\"slug\":\"how-to-use-adapter-for-deployment-in-astro\",\"title\":\"How to Use Adapter for Deployment in Astro\",\"type\":\"how_to\"},{\"slug\":\"what-is-astrojs-netlify-adapter\",\"title\":\"@astrojs/netlify Adapter: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-node-adapter\",\"title\":\"@astrojs/node Adapter: What It Is and How It Works\",\"type\":\"what_is\"},{\"slug\":\"what-is-astrojs-vercel-adapter\",\"title\":\"@astrojs/vercel Adapter: What It Is and How It Works\",\"type\":\"what_is\"}]},{\"topic\":\"Common Errors\",\"order\":13,\"count\":5,\"queries\":[{\"slug\":\"how-to-fix-build-error-in-astro\",\"title\":\"How to Fix Build Error in Astro: Simple Steps to Resolve\",\"type\":\"debug_fix\"},{\"slug\":\"how-to-fix-client-directive-not-working-in-astro\",\"title\":\"Fix Client Directive Not Working in Astro: Simple Solutions\",\"type\":\"debug_fix\"},{\"slug\":\"how-to-fix-component-not-rendering-astro\",\"title\":\"How to Fix Component Not Rendering in Astro\",\"type\":\"debug_fix\"},{\"slug\":\"how-to-fix-content-collection-error-in-astro\",\"title\":\"How to Fix Content Collection Error in Astro Quickly\",\"type\":\"debug_fix\"},{\"slug\":\"how-to-fix-hydration-error-astro\",\"title\":\"How to Fix Hydration Error in Astro: Simple Steps\",\"type\":\"debug_fix\"}]},{\"topic\":\"Astro vs Other\",\"order\":14,\"count\":6,\"queries\":[{\"slug\":\"astro-vs-eleventy\",\"title\":\"Astro vs Eleventy: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-gatsby\",\"title\":\"Astro vs Gatsby: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-hugo\",\"title\":\"Astro vs Hugo: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-next-js\",\"title\":\"Astro vs Next.js: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"astro-vs-sveltekit\",\"title\":\"Astro vs SvelteKit: Key Differences and When to Use Each\",\"type\":\"comparison\"},{\"slug\":\"when-to-use-astro-vs-next-js\",\"title\":\"Astro vs Next.js: Key Differences and When to Use Each\",\"type\":\"comparison\"}]}],\"activeSlug\":\"how-to-use-head-in-astro\"}]]\n"])</script><script>self.__next_f.push([1,"11:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"How to Use \u003chead\u003e in Astro for SEO and Metadata | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Learn how to use the \u003chead\u003e tag in Astro to add metadata, titles, and SEO tags to your pages effectively.\"}],[\"$\",\"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\"}],[\"$\",\"link\",\"11\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/astro/qna/how-to-use-head-in-astro\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"How to Use \u003chead\u003e in Astro for SEO and Metadata | Leyaa.ai\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"Learn how to use the \u003chead\u003e tag in Astro to add metadata, titles, and SEO tags to your pages effectively.\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/astro/qna/how-to-use-head-in-astro\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:site_name\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"How to Use \u003chead\u003e in Astro for SEO and Metadata | Leyaa.ai\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Learn how to use the \u003chead\u003e tag in Astro to add metadata, titles, and SEO tags to your pages effectively.\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"21\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"22\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>