Guide

Mr.Hope ... 2021-2-28 About 3 min

This plugin will make your site fully support Open Content Protocol OGP (opens new window) to enhance the SEO of the site.

# Out of Box

The plugin works out of the box. Without any config, it will extract information from the page content as much as possible to complete the necessary tags required by OGP and JSON-LD.

By default, the plugin will read the site config and page frontmatter to automatically generate <meta> tags as much as possible. Such as site name, page title, page type, writing date, last update date, and article tags are all automatically generated.

The following are the <meta> tags and their values that will be injected into <head> by default:

# Default Generation

The following are the <meta> tags and their value injected into <head> by default to satisfy OGP:

Meta Name	Value
`og:url`	`options.hostname` + `path`
`og:site_name`	`siteConfig.title`
`og:title`	`page.title`
`og:description`	`page.frontmatter.description` \|\| auto generated (when `autoDescription` is `true` in plugin options)
`og:type`	`"article"`
`og:image`	`options.hostname` + `page.frontmatter.image` \|\|first image in page \|\| `fallbackImage` in plugin options
`og:updated_time`	`page.git.updatedTime`
`og:locale`	`page.lang`
`og:locale:alternate`	Other languages in `siteData.locales`
`twitter:card`	`"summary_large_image"` (only available when image found)
`twitter:image:alt`	`page.title` (only available when image found)
`article:author`	`page.frontmatter.author` \|\| `options.author`
`article:tag`	`page.frontmatter.tags` \|\| `page.frontmatter.tag`
`article:published_time`	`page.frontmatter.date` \|\| `page.git.createdTime`
`article:modified_time`	`page.git.updatedTime`

# Setting Tags Directly

You can configure the meta option in the page’s frontmatter to add specific meta tags to the page <head> to enhance SEO. For example:

---
meta:
  - name: keywords
    content: SEO plugin
---

1
2
3
4
5

Will automatically inject <meta name="keywords" content="SEO plugin" />.

# Customize Generation

The plugin also gives you full control over the build logic.

# Page Type

For most pages, there are basically only two types: articles and website, so the plugin provides the isArticle option to allow you to provide logic for identifying articles.

The option accepts a function in the format (page: Page) => boolean, by default all non-home pages generated from Markdown files are treated as articles.

Note

If a page does fit into the "unpopular" genre like books, music, etc., you can handle them by setting the three options below.

# seo

You can use the plugin options seo to pass in a function to modify the default OGP object to your needs and return it.

function seo(
  /** OGP Object inferred by plugin */
  seo: SeoContent,
  /** Page Object */
  page: Page,
  /** VuePress Context */
  context: Context
): SeoContent;

1
2
3
4
5
6
7
8

For detailed parameter structure, see Config.

For example, if you are using a third-party theme and set a banner in frontmatter for each article according to the theme requirements, then you can pass in the following ogp:

({
  seo: (seo, page) => ({
    ...seo,
    "og:image": page.frontmatter.banner || seo["og:image"],
  }),
});

1
2
3
4
5
6

# Customize meta Tags

Sometimes you may need to fit other protocols or provide the corresponding SEO tags in the format provided by other search engines. In this case, you can use the customMeta option, whose type is:

function customMeta(
  /** mtea tag config */
  meta: Meta,
  /** Page Object */
  page: Page,
  /** VuePress Context */
  context: Context
): void;

1
2
3
4
5
6
7
8

You should modify the meta array in this function directly.

# SEO Introduction

Search engine optimization (SEO) is the process of improving the quality and quantity of site traffic to a site or a web page from search engines. SEO targets unpaid traffic (known as "natural" or "organic" results) rather than direct traffic or paid traffic. Unpaid traffic may originate from different kinds of searches, including image search, video search, academic search, news search, and industry-specific vertical search engines.

As an internet marketing strategy, SEO considers how search engines work, the computer-programmed algorithms that dictate search engine behavior, what people search for, the actual search terms or keywords typed into search engines, and which search engines are preferred by their targeted audience. SEO is performed because a site will receive more visitors from a search engine when sites rank higher on the search engine results page (SERP). These visitors can then potentially be converted into customers.

Open Content Protocol OGP (opens new window) (Open Graph Protocal)

This plugin perfectly supports this protocol and will automatically generate <meta> tags that conform to the protocol.
JSON-LD 1.1 (opens new window)

Since VuePress does not provide plugins or themes to inject <script> into the <head> tag of SSR rendered content, JSON-LD cannot be implemented.
RDFa 1.1 (opens new window)

RDFa mainly marks HTML structure. This is what the plugin cannot support. vuepress-theme-hope (opens new window) uses this feature to pass Google’s rich media structure test. You can consider using it.
Schema.Org (opens new window)

Schema definition site for structural markup

You can use Google Rich Media Structure Test Tool (opens new window) to test this site.