Building your application

Head 和 metadata

编辑此页面

SolidStart 没有内置元数据库。如果你想自定义 head 中 document 的内容，你可以使用 @solidjs/meta 库。

head 中常用的元素有：

  • title: 指定页面标题，用于浏览器标签和搜索结果标题。
  • meta: 通过 name 指定页面的各种元数据，范围从网站图标、字符集到用于SEO的 OG 标签。
  • link: 添加浏览器为页面加载的资源，如样式表或脚本。
  • style: 向页面添加内联样式。

在路由组件内部

在将元数据应用于特定路由时，可以使用 Title：

import { Title } from "@solidjs/meta";


export default function About() {
  return (
    <>
      <Title>About</Title>
      <h1>About</h1>
    </>
  );
}

这些标签将仅应用于特定路由，一旦用户离开该页面，它们将从 document.head 中移除。routeData 也可以在此处用于创建特定于路由动态部分的标题和 SEO 元数据。

在标题中添加站点后缀

可以创建自定义组件来包装 Title 组件，为所有标题添加特定于站点的前缀：

export default function MySiteTitle(props) {
  return <Title>{props.children} | My Site</Title>;
}
import MySiteTitle from "~/components/MySiteTitle";


export default function About() {
  return (
    <>
      <MySiteTitle>About</MySiteTitle>
      <h1>About</h1>
    </>
  );
}

在 Title 中使用异步数据

Resources 可用于创建基于路由动态部分的标题：

import { Title } from "@solidjs/meta";
import { RouteSectionProps } from "@solidjs/router";
import { createResource, Show } from "solid-js";


export default function User(props: RouteSectionProps) {
  const [user] = createResource(() => fetchUser(props.params.id));


  return (
    <Show when={user()}>
      <Title>{user()?.name}</Title>
      <h1>{user()?.name}</h1>
    </Show>
  );
}

在这个例子中，可以使用 routeData 从 /users/:id 中的 id 获取用户名，并在 Title 组件中使用它。同样，其他信息也可以用来构建其他SEO标签。

添加 SEO 标签

SEO 标签如 og:title、og:description、og:image，使用 Meta 组件。由于这些标签可能需要在多个路由中使用，它们可以添加在 Head 的 root.tsx 文件中。

export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Meta
          property="og:image"
          content="https://example.com/image.jpg"
        />
        <Meta
          property="og:image:alt"
          content="Welcome to my site"
        />
        <Meta property="og:image:width" content="1200" />
        <Meta property="og:image:height" content="600" />
        <Meta property="og:site_name" content="GitHub" />
      </Head>
    </Html>
  );
}

如果你需要在路由中添加基于路由的信息，就像 Title 组件一样，你可以在所需的路由中使用 Meta 组件。这将覆盖在 Head 组件中使用的 Meta 标签。

import MySiteTitle from "~/components/MySiteTitle";


export default function About() {
  return (
    <>
      <MySiteTitle>About</MySiteTitle>
      <Meta name="description" content="This is my content tag." />
      <Meta
        property="og:title"
        content="Welcome to my site!"
      />
      <Meta
        property="og:description"
        content="A website"
      />
      <h1>About</h1>
    </>
  );
}
报告此页面问题