For Astro.js, how do I inject page content (seo meta tags) into <head> section of an Astro lay-CodePudding

I've got an Astro.js layout file with a header, footer, and all the other things I want to appear on every page on my site. There are two areas (names slots) that I want to put page content into. One area in the and one in the (between the header and footer)

Roughly, this is my layout.astro:

---
import '../styles/global.styl'
import '../styles/page.styl'
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <slot name='head' />

    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/images/favicon.ico">
  </head>
  <body>
    <header>
      <a href="/">Company Name</a>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>

    <slot name='body' />

    <footer>
      <p id="copyright">© {new Date().getFullYear()} Company Name</p>
    </footer>
  </body>
<html>

Those two slots (head and body) will receive content from my page. My page currently looks like this:

---
import Layout from '../layouts/page.astro'
import PageSeo from '../components/PageSeo.astro'

var { info = {} } = Astro.props
      info.title = '404 - Not Found'
      info.description = 'The page you requested could not be found. Please check the spelling of the URL.'
      info.image = 'image link'
      info.url = 'page url'
---

<Layout title={info.title}>

  <head slot='head'>
    <PageSeo page={info} />
  </head>

  <main slot='body'>

  <h1>404 - Not Found</h1>
  <p>Hm... You’ve arrived at a page that does not exist. Computers are a bit literal, try checking the spelling of the link you typed.</p>

  </main>

</Layout>

The body content slides in just fine, but the SEO content (or anything I try to inject in the head) does not. I can't think of a wrapper element in HTML that's acceptable in the head of the document.

Ideas?

CodePudding user response：

saw your post on the Discord.

You just need to put the slot attribute on the component, instead of creating another <head> element. Like so:

<Layout title={info.title}>

  <PageSeo slot='head' page={info} />

  <main slot='body'>

  <h1>404 - Not Found</h1>
  <p>Hm... You’ve arrived at a page that does not exist. Computers are a bit literal, try checking the spelling of the link you typed.</p>

  </main>

</Layout>

I believe the way you were doing it created another head element.

Also there are a good few integrations for SEO in Astro which may save you some time! They do very similar things (and more). Check them out here: https://astro.build/integrations/performance seo/

CodePudding user response：

Ah... figured it out:

<PageSeo slot='head' page={info} />

While the wrapper cannot receive a slot name, embedded components can. Cool.