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

Jun 13, 2019

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

---title: Home---# WelcomeHello<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:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.