# @astrolib/seo 中文文档

规范地址：https://npmcn.com/package/%40astrolib/seo/

版本：1\.0\.0-beta\.8
npm 元数据更新时间：2024-10-04T07:14:27.231Z
中文译文更新时间：2026-11-07T01:10:53.657Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40astrolib/seo
原文对照：https://npmcn.com/package/%40astrolib/seo/?lang=original
项目主页：https://github.com/onwidget/astrolib/tree/main/packages/seo
源码仓库：https://github.com/onwidget/astrolib

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：49.4 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：astro ^1\.2\.1 \|\| ^2\.0\.0 \|\| ^3\.0\.0-beta\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0 \|\| ^5\.0\.0-beta\.0 \|\| ^5\.0\.0
- 首次发布：2022-09-11T09:39:23.752Z
- 最新版本发布：2024-10-04T07:14:27.021Z
- 近 30 天下载量：63169（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 0 个）

## 中文简介

在 Astro 工程中更容易管理您的 SEO

## 安装

```sh
npm install @astrolib/seo
```

也可以使用：`pnpm add @astrolib/seo`、`yarn add @astrolib/seo`、`bun add @astrolib/seo`

## README

# Astro SIO - @astrolib/seo (英语)

`Astro SEO` 在Astro项目中,它是一个集成体,它使管理你的SEO更加容易。 它完全基于优秀的 [下个 SEO](https://github.com/garmeeh/next-seo) 图书馆

## 使用量

`Astro SEO` 将它添加到您想要添加 SEO 属性的页面中。 一旦在页面中包含,您就通过一个配置对象,并带有页面的SEO属性. 可以在页面级别上动态生成,或者在某些情况下,您的 API 可以返回 SEO 对象 .

### 设置

首先,安装它:

```bash
npm install @astrolib/seo
```

或者说

```bash
yarn add @astrolib/seo
```

### 添加到页面

您需要导入 `@astrolib/seo` 并添加想要的属性。 这能证明.. `<head>` 为SEO。 只需至少增加一个标题和描述.

**仅列出标题和说明的例子:**

```astro
---
import { AstroSeo } from '@astrolib/seo';
---

<AstroSeo
  title="Simple Usage Example"
  description="A short description goes here."
/>
```

不过 `Astro SEO` 给您更多的选项,您可以添加。 以下为一页的典型例子.

**典型的页面示例 :**

```astro
---
import { AstroSeo } from '@astrolib/seo';
---

<AstroSeo
  title="Using More of Config"
  description="This example uses more of the available config options."
  canonical="https://www.canonical.ie/"
  openGraph={{
    url: 'https://www.url.ie/a',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image-01.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt',
        type: 'image/jpeg',
      },
      {
        url: 'https://www.example.ie/og-image-02.jpg',
        width: 900,
        height: 800,
        alt: 'Og Image Alt Second',
        type: 'image/jpeg',
      },
      { url: 'https://www.example.ie/og-image-03.jpg' },
      { url: 'https://www.example.ie/og-image-04.jpg' },
    ],
    site_name: 'SiteName',
  }}
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  }}
/>
```

### 选项

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `titleTemplate` | 字符串 | 允许您设置将添加到标题中的标题模板 |
| `title` | 字符串 | 设置页面的元标题 |
| `noindex` | 布尔 | 设定页面是否索引 |
| `nofollow` | 布尔 | 设定是否跟踪页面 |
| `robotsProps` | 对象 | 设置更多元信息 `X-Robots-Tag` |
| `description` | 字符串 | 设置页面元描述 |
| `canonical` | 字符串 | 设置页条 |
| `mobileAlternate.media` | 字符串 | 设定移动网站的屏幕大小 |
| `mobileAlternate.href` | 字符串 | 设置移动页面替代 URL |
| `languageAlternates` | 数组 | 设置替代 urls 的语言 。 期望形状对象的阵列 : `{ hrefLang: string, href: string }` |
| `additionalMetaTags` | 数组 | 允许您添加此处未记录的元标记 . |
| `additionalLinkTags` | 数组 | 允许您添加此处未记录的链接标签 . |
| `twitter.cardType` | 字符串 | 牌型,将是一个 `summary`, (中文(简体) ), `summary_large_image`, (中文(简体) ), `app`,或 `player` |
| `twitter.site` | 字符串 | @ 用户名用于卡脚中使用的网站 |
| `twitter.handle` | 字符串 | @ 内容创建者/ 作者的用户名( 输出为 `twitter:creator`(中文(简体) ) |
| `facebook.appId` | 字符串 | 用于Facebook Insights, 您必须在您的页面中添加 facebook app ID |
| `openGraph.url` | 字符串 | 您对象的 Canonial URL 将在图中用作永久 ID |
| `openGraph.type` | 字符串 | 您对象的类型 。 根据您指定的类型, 可能还需要其他属性 |
| `openGraph.title` | 字符串 | 打开的图表标题, 可能与您的元标题不同 . |
| `openGraph.description` | 字符串 | 开放式的图表描述,这可以不同于您的元描述. |
| `openGraph.images` | 数组 | 一系列图像(对象)被社交媒体平台所使用,放行等作为预览. 如果提供了多次, 您可以在共享时选择一次 . |
| `openGraph.videos` | 数组 | 视频阵列( 对象) |
| `openGraph.locale` | 字符串 | 打开的图表标记被标记在其中。 格式语言 TERRITORY. 默认为 en US. |
| `openGraph.site_name` | 字符串 | 如果您的对象属于一个更大的网站,则应显示整个网站的名称. |
| `openGraph.profile.firstName` | 字符串 | 人名出处. |
| `openGraph.profile.lastName` | 字符串 | 人姓为相. |
| `openGraph.profile.username` | 字符串 | 人物用户名. |
| `openGraph.profile.gender` | 字符串 | 人之性别. |
| `openGraph.book.authors` | 字符串 \[\] | 文章作家. |
| `openGraph.book.isbn` | 字符串 | 这个 [ISBN (英语)](https://en.wikipedia.org/wiki/International_Standard_Book_Number) |
| `openGraph.book.releaseDate` | 约会时间 | 该书发行日期. |
| `openGraph.book.tags` | 字符串 \[\] | 与本书相关的标记词 . |
| `openGraph.article.publishedTime` | 约会时间 | 文章首次发表时. |
| `openGraph.article.modifiedTime` | 约会时间 | 上次修改文章时. |
| `openGraph.article.expirationTime` | 约会时间 | 文章后出后出后. |
| `openGraph.article.authors` | 字符串 \[\] | 文章作家. |
| `openGraph.article.section` | 字符串 | 高档科名. 例如,技术 |
| `openGraph.article.tags` | 字符串 \[\] | 与本条相关的标记词 . |

## 常见问题

### @astrolib/seo 是什么？

在 Astro 工程中更容易管理您的 SEO

### 如何安装 @astrolib/seo？

在项目目录运行 npm install @astrolib/seo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：astro（^1\.2\.1 \|\| ^2\.0\.0 \|\| ^3\.0\.0-beta\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0 \|\| ^5\.0\.0-beta\.0 \|\| ^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @astrolib/seo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @astrolib/seo 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @astrolib/seo 可以商用吗？

@astrolib/seo 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @astrolib/seo 的下载量有多少？

根据 npm 官方下载统计，@astrolib/seo 在 2026/10/07 – 2026/11/05 这 30 天内被下载 63,169 次，日均约 2,106 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @astrolib/seo 还在维护吗？

最新版本 1\.0\.0-beta\.8 发布于 2024/10/04（2 年前）；至今共发布 27 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/09/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。