preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

This article looks at the Open Graph Protocol in SEO optimization.

Meta tags

If we open any of our posts, such as this one “VuePress blog optimized to add Vssue comments”, and look at the DOM element, we can find a meta tag like this in head:

We can see that name starts with og:. What does this mean?

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

To put it simply, according to this protocol, social networking sites will present the page information to users according to the content of the OG tag on the page. Because it is widely used, it has been supported by search engines at present. Refer to the content of this very old post:

Benefits of participating in the Open Graph Protocol:

  • Can be correctly spider crawl your content to Baidu web search
  • Help your content more effectively in baidu structured display
  • Application of the OG protocol will have a richer display of content

Tag the sample

See the Webmaster Sharing Guide for an example of using the OG protocol to tag articles, news updates, or blog posts:

<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 " />
Copy the code

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

Og :type indicates the media type of the content. This label affects how content is displayed dynamically. See the Object Types Reference documentation for a complete set of types.

Here I chose The article type. If you look at The Open Graph Protocol, you can see that there are other properties that can be displayed under The Article type:

Using the OG protocol

While we can customize the og attribute for each page with the help of config.js and Front Matter, we can also use existing plug-ins such as vuepress-plugin-seo to do this quickly

1. Install

Yarn add [email protected] - DCopy the code

Note that since we are using Vuepress 1.x, the corresponding plug-in should use V0.1.4, or if we are using 2.x, just install the latest version.

2. Use

// config.js

module.exports = {
    title: 'title'.description: 'description'.plugins: [['seo', {
        siteTitle: (_, $site) = > 'TypeScript Chinese documents'.title: $page => $page.title,
        description: $page => $page.frontmatter.description,
        author: (_, $site) = > '冴 feather'.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),
    	}]
  	]
}
Copy the code

PublishedAt = “publishedAt” = “publishedAt” = “publishedAt” = “publishedAt”

title: TypeScript Chinese Documentation - Essential for getting started
description: TypeScript This series of articles is composed of three parts: official document translation, key and difficult points analysis, practical skills and summary 40 Or so. Official documentation has been completed Handbooks The heavy and difficult sections are being prepared.
date: 2021/ 11/11 06: 06:06
Copy the code

3. Order

In actual development, if you also use @vuepress/last-updated and sitemap, it is recommended to do so in 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', {... }}]]Copy the code

Otherwise modifiedAt won’t show up.

4. Effect display

Now when we look at the DOM element, we have the OG tag, and not only that, but the SEO plugin also wrote a Twitter tag for us, and as for the tag, you can interpret it as a twitter protocol, just like og, for presentation.

5. Verify the tool

You can verify this by using the Facebook Object Debugger:

The tool shows the effects of Facebook sharing, as well as providing some warnings.

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 30th article in a series at github.com/mqyqingfeng…

Wechat: “MQyQingfeng”, Jin Yui’s readergroup.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.