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 will cover JSON-LD in SEO.

JSON-LD

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

It can also be seen on other platforms such as Sifu:

The script type is application/ld+json. And what does that do?

Json-ld.org/ is a JavaScript Object Notation for Linked Data that is used to describe the type and content of a web page for search engines to render.

For example, if we search Google for “Chocolate in a mug”, we will see something like this:

When we open the page, we can see that the search display corresponds to the content in application/ld+ JSON:

Add JSON – LD

If we also want to achieve this effect, convenient search engine display, how to do?

Adding structured data to a page is as simple as adding a script like this:

<script type="application/ld+json">
    // ...
</script>
Copy the code

For details, please refer to the General Guide to Structured Data provided by Google Search Center. Since I am writing a specific Article, I decided to include the following attributes after referring to the Article section:

<script type="application/ld+json">
     {
      "@context": "https://schema.org"."@type": "Article"."headline": "Fill in the title here."."image": [
        "https://ts.yayujs.com/icon-144x144.png"]."datePublished": "The 2021-11-10 T22:06:06. 000 z"."dateModified": "The 2022-03-04 T16:00:00) 000 z"."author": [{
          "@type": "Person"."name": "冴 feather"."url": "https://github.com/mqyqingfeng/Blog"}}]</script>
Copy the code

VuePress implementation

After searching, I did not find a ready-made plug-in, because each page title, release time, update time are different, that is ok, then write a local plug-in implementation.

The content of the script depends on the attributes of the page. But after all, I am using Vuepress 1.x. The implementation method depends on the API provided by the tool. Let’s go straight to the final implementation:

vuepress-plugin-jsonld

Create the vuepress-plugin-jsonld folder in the.vuepress directory and execute NPM init to create package.json

To create index.js, write:

const { path } = require('@vuepress/shared-utils')

module.exports = options= > ({
  name: 'vuepress-plugin-jsonld',
  enhanceAppFiles () {
    return [path.resolve(__dirname, 'enhanceAppFile.js')]},globalUIComponents: ['JSONLD']})Copy the code

Create enhanceAppfile.js and write:

import JSONLD from './JSONLD.vue'

export default ({ Vue, options }) => {
  Vue.component('JSONLD', JSONLD)
}
Copy the code

Create jsonld. vue

<template></template> <script> export default { created() { if (typeof this.$ssrContext ! == "undefined") { this.$ssrContext.userHeadTags += `<script type='application/ld+json'> { "@context": "https://schema.org", "@type": "Article", "headline": "${this.$page.title}", "url": "${'https://yayujs.com' + this.$page.path}", "image": [ "https://ts.yayujs.com/icon-144x144.png" ], "datePublished": "${this.$page.frontmatter.date && (new Date(this.$page.frontmatter.date)).toISOString()}", "dateModified": "${this.$page.lastUpdated && (new Date(this.$page.lastUpdated)).toISOString()}", "author": [{ "@type": "Person", "name" : "冴 feather", "url" : "https://github.com/mqyqingfeng/Blog"}}] < \ / script > `; }}}; </script>Copy the code

It is possible to inject script content into all pages with the help of globalUIComponents:

You might want to inject some global UI, fixed somewhere in the page, such as back-to-top, popup. In VuePress, a global UI is a Vue component.

config.js

Next we modify config.js:

module.exports = {
    title: 'title'.description: 'description'.plugins: [
      require('./vuepress-plugin-jsonld')]}Copy the code

Note that we can’t see this when running locally, we can close the deploy.sh command to push to the remote and compile locally to check the output HTML:

validation

After Posting it online, we can verify it in the rich media search test provided by Google. Open the URL, enter the page address, and you can see the captured structured data:

If there is an error, there is also a warning.

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 31st 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.