For Astro.js, how do I inject page content (seo meta tags) into <head> section of an Astro layout?
Question
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?
2 answers
solution1
1 2022-12-21 16:36:34
Ah... figured it out:
<PageSeo slot='head' page={info} />
While the wrapper cannot receive a slot name, embedded components can. Cool.
solution2
1 ACCPTED 2022-12-21 16:52:34
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.