使用 @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 列表 |