VuePress Add JSON-LD Structured Data (Rich Snippets) to Page

June 13, 2019

Edit Page Markdown (e.g. README.md).

---
title: Home
---

# Welcome

Hello

<script>
  export default {
    created () {
      if (this.$ssrContext) {
        const extra = `
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://code.luasoftware.com/",
  "author": {
    "@type": "Person",
    "name": "Desmond Lua"
  },
  "description": "Tutorials and snippets for programming languages, frameworks, tools, etc.",
  "image": "https://code.luasoftware.com/img/cover.jpg",
  "thumbnailUrl": "https://code.luasoftware.com/img/logo.png",
  "license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.",
  "name": "Lua Software Code"
}
<\/script>
        `;
        // this.$ssrContext.userHeadTags += extra
        this.$ssrContext.pageMeta += extra;
      }
    }
  }
</script>

NOTE: This is more of a hack than an official solutions, and does not guranteed to work in the future.

NOTE: The JSON-LD will not be shown in development build, but generated in production build.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.