如何在Astro.js布局的<head>中注入页面SEO元标签？

核心问题是HTML不允许<head>标签嵌套，你在页面中用<head slot='head'>包裹SEO内容的写法违反了这个规范，导致浏览器和Astro编译时自动修正结构，最终插槽内容无法正确注入到布局的<head>区域。

解决步骤： #

1. 移除页面中嵌套的<head>标签，直接将需要注入到<head>的内容（组件或标签）通过slot='head'属性绑定到插槽。

修改后的页面代码示例：

---
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}>
  <!-- 直接给SEO组件添加slot属性，无需head标签包裹 -->
  <PageSeo page={info} slot='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>

2. 如果需要注入多个元素到head插槽，可以使用Astro支持的Fragment语法（<>和</>）包裹，或者给每个元素单独添加slot='head'属性：

<!-- 方式1：用Fragment包裹多个元素 -->
<>
  <meta name="keywords" content="404, page not found" slot='head' />
  <PageSeo page={info} slot='head' />
</>

<!-- 方式2：给每个元素单独设置slot -->
<meta name="keywords" content="404, page not found" slot='head' />
<PageSeo page={info} slot='head' />

原理说明： #

布局文件中的<slot name='head' />已经处于<head>标签内部，页面只需传入需要插入的内容即可，不需要额外嵌套<head>标签。Astro会识别带有slot='head'的元素，并将其正确渲染到布局的对应插槽位置，同时符合HTML规范。

内容的提问来源于stack exchange，提问作者Costa Michailidis