使用 @zfben/astro-head 让您的 Astro 网站的 SEO 管理变得更加轻松。这个软件包简化了向您的 Astro 组件添加必需的元标记和Open Graph / Twitter Card元数据的过程，从而提高您网站的搜索引擎可见度。
主要功能
- 简化集成: 直接在您的 Astro 组件中无缝集成 SEO 元素。 无需复杂的配置！
- 自动生成元数据: 自动生成开放图和推特元标记，节省您的时间并确保整个网站的数据一致性。
- 利用 Astro 配置: 利用 astro.config.js 中的现有站点设置在元标记中自动生成准确的 URL。
开始使用
- 安装: 使用 npm 安装软件包:
npm install @zfben/astro-head。 - 配置: 确保您的 astro.config.js 文件中定义了站点属性。 这将提供您网站的基准 URL。
- 导入和使用: 从软件包中导入 Head 组件并在您的 Astro 组件中使用它:
---
import { Head } from "@zfben/astro-head";
---
<html>
<head>
<Head
title="你好，世界"
path="/"
/>
</head>
</html>支持的属性
| 属性 | 输出 | 格式 |
|---|---|---|
title |
title, og:title, twitter:title |
字符串，必需 |
path |
canonical, url, og:url, twitter:url |
字符串，必需，必须以 / 开头 |
type |
og:type |
字符串，默认为 website |
charset |
charset |
字符串，默认为 utf-8 |
lang |
og:locale |
字符串 |
description |
description, og:description, twitter:description |
字符串 |
image |
image, og:image, twitter:image |
字符串 |
siteName |
og:site_name |
字符串 |
author |
author, article:author |
字符串 |
twitter |
twitter:site, twitter:creator |
字符串，必须以 @ 开头 |
alternates |
alternate, og:locale:alternate |
lang 和 path 列表 |