SEO

Mr.Hope ... 2021年3月1日 00:47 Feature
  • Feature
  • Seo
大约 3 分钟

vuepress-theme-hope 通过内置 @mr-hope/vuepress-plugin-seo (opens new window) 为提供 SEO 增强功能。

为了使插件能够更好的工作,可能需要查看一下 页面信息配置 并合理的配置它们。

如果不需要这个插件,请设置 themeConfig.seofalse

SEO 介绍

搜索引擎优化 (Search Engine Optimization),是一种透过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现,搜索引擎的用户往往只会留意搜索结果最前面的几个条目,所以不少网站都希望透过各种形式来影响搜索引擎的排序,让自己的网站可以有优秀的搜索排名。 所谓“针对搜索引擎作最优化的处理”,是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对,然后再由浏览器将这些内容以最快速且接近最完整的方式,呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化,为用户打造更好的用户体验,最终的目的就是做好用户体验。

# 开箱即用

插件会向网页的 <head> 注入一些 <meta> 标签,使的网页对搜索引擎和社交媒体更加友好。

默认情况下,插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动为生成 <meta> 标签。诸如站点名称,页面标题,页面类型,写作日期,最后更新日期,文章标签均会自动生成。

以下是会被默认注入到 <head> 中的 <meta> 标签及其值:

属性名称
og:url themeConfig.hostname + path
og:site_name $site.title
og:title page.title
og:description page.frontmatter.description
og:type 'article'
og:image themeConfig.hostname + page.frontmatter.image
og:updated_time page.updateTimeStamp
og:locale page._computed.$lang
og:locale:alternate $themeConfig.locales 包含的其他语言
twitter:card 'summary_large_image'
twitter:image:alt $site.title
article:author page.frontmatter.author || themeConfig.author
article:tag page.frontmatter.tags || page.frontmatter.tag
article:published_time page.frontmatter.time || page.frontmatter.date || page.createTimeStamp
article:modified_time page.updateTimeStamp

# 自由定制

你可以在页面的 frontmatter 中配置 meta 选项,自主定制特定页面用于 SEO 的 <meta> 标签内容。

如:

---
meta:
  - name: keywords
    content: SEO plugin
---
1
2
3
4
5

会自动注入 <meta name="keywords" content="SEO plugin" />

# 自定义生成过程

你可以向 themeConfig.seo.seo 传入一个函数来注入新的 <meta> 标签或覆盖默认生成内容。你需要按照 <property>: <content> 的格式来返回一个对象。

比如你返回了 { 'og:url': 'google.com', 'og:image': 'google.com/logo.jpg' },则插件会注入以下内容到 <head> 中:

<meta property="og:url" content="google.com" />
<meta property="og:image" content="google.com/logo.jpg" />
1
2

当你需要注入的 <meta> 没有使用 propertycontent,或者你想要移除已有的 meta,你可以向 themeConfig.seo.customMeta 传入一个自定义生成函数,完全定制 <meta> 标签。

customMeta 的结构为 (meta: Meta[], info: PageSeoInfo) => void

PageSeoInfo 的结构如下:

interface PageSeoInfo {
  /** 当前页面对象 */
  page: Page;
  /** Vuepress 配置  */
  site: SiteConfig;
  /** 主题配置 */
  themeConfig: ThemeConfig | Record<string, never>;
  /** 站点支持的语言 */
  locale: string[];
  /** 当前页面路径 */
  path: string;
}
1
2
3
4
5
6
7
8
9
10
11
12

Meta 的类型为 Record<"content" | "name" | "charset" | "http-equiv", string>,对象的键会渲染为 <meta> 标签的属性,值会渲染为对应属性的值。

比如:

(meta: Meta, info: PageSeoInfo) => {
  const index = meta.findIndex((item) => item.property === "og:type");

  if (index !== -1) meta.splice(index, 1);

  meta.push({ a: "1", b: "2" });
};
1
2
3
4
5
6
7

会向当前页面的 <head> 注入 <meta a="1" b="2" />,并移除任何已存在的 <meta property="og:type" />

# RDFa 1.1

主题通过遵循 RDFa 1.1 (opens new window),为网站的大部分结构添加了富媒体结构支持。

提示

你可以使用 Google 富媒体结构测试工具 (opens new window) 测试本站点。