SEO Optimization of VuePress Blog (4) Open Graph protocol

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

This article talks about the Open Graph protocol in SEO optimization.

meta tag

If we open any article of Sifu, such as this "VuePress Blog Optimization: Adding Vssue Comment Function" , and view the DOM elements, we can find such a meta tag in the head:

We can find that the names all start with og: . What does this mean and what does it do?

In fact, this is the Open Graph Protocol proposed by Facebook. The official address is: https://ogp.me/ , which is used to mark page types and describe page content, so as to facilitate dissemination in social media.

Simply put, according to this protocol, the page information is described, and the social networking site will present it to the user according to the content of the og tag on the page. Due to its wide use, it has also been supported by search engines. Refer to the content of this very old post :

Benefits of participating in the Open Graph Protocol:

• Be able to correctly crawl your content by spiders to Baidu web search
• Help your content to be displayed more effectively in Baidu
• The application of the OG protocol will have a richer content display

markup example

Referring webmaster sharing guide , here is an example of an article, news update or blog post tagged with the OG protocol:

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

These properties include descriptive metadata about the article that we specifically want to present when users share the article.

Among them, og:type , indicating the media type of the content. This tag affects how the content is displayed in the feed. See the object type reference document for the complete type.

Here I choose the article type, check The Open Graph protocol , you can see that there are other attributes that can be displayed under the article type:

Use OG protocol

Although we can customize the og attribute of each page with the help of config.js and Front Matter, we can also quickly implement it with the help of existing plugins such as vuepress-plugin-seo

1. Installation

yarn add vuepress-plugin-seo@0.1.4 -D

Note that because we are using vuepress 1.x, the corresponding plugin should use v0.1.4 . If it is 2.x, just install the latest version.

2. Use

// config.js

module.exports = {
    title: 'title',
    description: 'description',
      plugins: [
      ['seo', {
        siteTitle: (_, $site) => 'TypeScript中文文档',
        title: $page => $page.title,
        description: $page => $page.frontmatter.description,
        author: (_, $site) => '冴羽',
        type: $page => 'article',
        url: (_, $site, path) => 'https://ts.yayujs.com' + path,
        image: ($page, $site) => "https://www.typescriptlang.org/icons/icon-144x144.png",
        publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
        modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
        }]
      ]
}

Here I customize the display of some attributes according to my own situation. It should be noted that the publishedAt here, that is, the publishing time, needs to be written in each md file with the help of Front Matter with the name of date:

title: TypeScript中文文档_入门进阶必备
description: TypeScript 系列文章由官方文档翻译、重难点解析、实践技巧与总结三个部分组成，预计 40 篇左右。目前已完成了官方文档 Handbooks 的翻译，正在准备重难点解读部分。
date: 2021/11/11 06:06:06

3. Sequence issues

In the actual development process, if you also use @vuepress/last-updated and sitemap , it is recommended to follow this order:

// config.js

module.exports = {
    title: 'title',
    description: 'description',
      plugins: [
      [
        '@vuepress/last-updated',
        {
          transformer: (timestamp, lang) => {
            return new Date(timestamp).toLocaleDateString();
          }
        }
      ],
      [
        'sitemap',
        {
          hostname: 'https://ts.yayujs.com'
        }
      ],
      ['seo', {
        ...
        }]
      ]
}

Otherwise modifiedAt will not be displayed.

4. Effect display

Now when we look at the DOM element, there will be an og tag. Not only that, the seo plugin also writes a twitter tag for us. As for this tag, you can understand that this is a protocol launched by twitter. Like og, it is for convenience. exhibit.

5. Tool Validation

You can use the official tool Facebook Object Debugger to verify:

This tool will show the effect of sharing on Facebook, as well as provide some warnings.

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 30th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", enter the readership of Xiangyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.