Astro SIO - @astrolib/seo (英语)

Astro SEO 在Astro项目中,它是一个集成体,它使管理你的SEO更加容易。 它完全基于优秀的 下个 SEO 图书馆

使用量

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

设置

首先,安装它:

npm install @astrolib/seo

或者说

yarn add @astrolib/seo

添加到页面

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

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

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

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

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

典型的页面示例 :

---
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',
  }}
/>

选项