Vuepress Plugin SEO 使用教程

Vuepress Plugin SEO 使用教程

项目介绍

vuepress-plugin-seo 是一个用于 Vuepress 的开源插件，旨在为每个页面生成 SEO 友好的元数据头部信息。通过使用该插件，可以显著提升网站在搜索引擎中的排名和可见性。

项目快速启动

安装

首先，通过 npm 安装 vuepress-plugin-seo：

npm install vuepress-plugin-seo -D

配置

在 Vuepress 项目的 config.js 文件中添加插件配置：

module.exports = {
  plugins: [
    ['seo', {
      /* 选项 */
    }]
  ]
}

示例

以下是一个简单的配置示例：

module.exports = {
  plugins: [
    ['seo', {
      siteTitle: ($site) => $site.title,
      title: ($page) => $page.title,
      description: ($page) => $page.frontmatter.description,
      author: ($page) => ({
        name: $page.frontmatter.author,
        twitter: $page.frontmatter.twitter
      }),
      tags: ($page) => $page.frontmatter.tags,
      twitterCard: 'summary_large_image',
      type: 'article',
      url: ($site, $page) => $site.themeConfig.domain + $page.path,
      image: ($page) => $page.frontmatter.image,
      publishedAt: ($page) => $page.frontmatter.date,
      modifiedAt: ($page) => $page.frontmatter.updated
    }]
  ]
}

应用案例和最佳实践

应用案例

假设你有一个博客网站，使用 vuepress-plugin-seo 可以为每个博客文章生成 SEO 友好的元数据，从而提高文章在搜索引擎中的排名。

最佳实践

1. 确保图片路径正确：在 frontmatter 中定义图片时，确保路径已经解析。例如，使用 /assets/img/my_image.jpg 而不是相对路径。
2. 包含时区信息：在定义 publishedAt 时，包含时区信息，例如 date: 2018-06-07 23:46 UTC。
3. 使用 @vuepress/last-updated 插件：确保 modifiedAt 默认值能够自动工作。

典型生态项目

vuepress-plugin-seo 可以与其他 Vuepress 插件和工具结合使用，例如：

1. @vuepress/plugin-google-analytics：用于集成 Google Analytics。
2. @vuepress/plugin-pwa：用于实现渐进式 Web 应用。
3. @vuepress/plugin-active-header-links：用于自动更新侧边栏的激活链接。

通过这些插件的组合使用，可以构建一个功能丰富且 SEO 友好的 Vuepress 网站。