#How would I add additional elements to the head section, but only for the home page?

1 messages · Page 1 of 1 (latest)

fierce ridge
#

I have an existing layout that is used by the home page and other pages. eg.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

What's the easiest way to add additional elements in the 'head' section, but only for the home page (not any other pages that use that layout)?

bitter pikeBOT
#

Hi @fierce ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To add additional elements to the <head> section only for the home page in Astro, you have a few options:

Option 1: Use conditional rendering in your layout

You can modify your layout to conditionally render additional head elements based on the current page path:

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
// Get the current page path
const currentPath = Astro.url.pathname;
const isHomePage = currentPath === "/";
const { pageTitle } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    
    {isHomePage && (
      <>
        <!-- Additional head elements for home page only -->
        <meta name="description" content="Welcome to my homepage" />
        <link rel="stylesheet" href="/styles/home.css" />
      </>
    )}
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

You can get the current page's path using Astro.url as shown in the example above Migrating from Gatsby.

Option 2: Use a named slot for head content

Another approach is to use a named slot in your layout that allows pages to inject additional head content:

# 
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const { pageTitle } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    <slot name="head" />
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Then in your home page, you can pass the additional head elements:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <meta name="description" content="Welcome to my homepage" slot="head" />
  <link rel="stylesheet" href="/styles/home.css" slot="head" />
  
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

This approach using named slots is documented in Transferring slots in the Astro documentation.

Remember that in Astro, using a <head> tag works like any other HTML tag and doesn't get automatically moved to the top of the page, so it's best to include it in your layout component as shown above Troubleshooting.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: