Vue-meta: Create a more integrated solution for including JSON-LD

[nathanchase]

I'm currently adding JSON-LD through vue-meta by way of the following method:

head: () => ({
    __dangerouslyDisableSanitizers: ['script'],
    script: [
      {
        innerHTML: `{
            "@context": "http://schema.org",
            "@type" : "Organization",
            "name" : "MyApp",
            "url" : "https://www.myurl.com",
            "logo": "https://www.myurl.com/images/logo.png",
        }`,
        type: 'application/ld+json'
      }
    ]
  })

While this works, it seems a bit of a hack, and it would be nice to not have to disable the sanitizers, obviously.

I'm not sure the best way to approach this in the codebase, but if someone can point me in the right direction, I'd be happy to add this functionality and submit a PR - or if someone sees an opportunity here to add this functionality - I'd be pleased to see it! Thank you!

[nathanchase]

More thoughts on this:

What about implementing a way for vue-meta to have flags for support of various schema...

So you'd have:

• native ----
• OpenGraph ----
• Twitter ----
• JSON-LD ---- "description": "A classic apple pie."

and maybe a way to create your own flag.

So something like this in config:

head: {
    flags: {
        'native': true,         // default: true
        'opengraph': true,     // default: false
        'twitter': true        // default: false
        'json-ld' true        // default: false
    }
}

and then be able to extend various "root" tags, like title
so maybe you have:

meta: 
    title: 'Pies',
    description: 'A classic apple pie.',
    image: { 
        content: 'https://img.com/img.jpg',
        width: 1280,
        height: 720
    },
    [
        { charset: 'utf-8' }   // one-off declarations still go in the array
    ]

something along those lines
and vue-meta would take your flags and apply them to auto-generate (for example, for a meta.title):

<meta data-hid="og:title" property="og:title" content="Pies" data-n-head="true">
<meta data-n-head="true" data-hid="twitter:title" name="twitter:title" content="Pies">
<script type="application/ld+json" data-n-head="true">{
            "@context": "http://schema.org"
            "name" : "Pies"
}</script>

Maybe use https://github.com/joshbuchea/HEAD as a baseline for "flags" support for anything that seems worthy of de-duplication

Twitter Privacy, Pinterest, Facebook Instant Articles, OEmbed... there are a number of possible "flag" types...

[Seranth]

I'm using json-ld like this right now

script: [
  {
    innerHTML: JSON.stringify({
      '@context': 'http://schema.org',
      '@type': 'Website',
      'url': 'https://actisec.se'
    }), type: 'application/ld+json'
  }
],
__dangerouslyDisableSanitizers: ['script']

The problem is that unless I have __dangerouslyDisableSanitizers : ['script'] the output will have " instead of double quotes.

Suggestion

How about just simply checking if the type is application/ld+json and then disabling the sanitizer?

And even better, if innerHTML is passed an Object it automatically calls JSON.stringify() on it?

With those changes you'd add json-ld with the following syntax:

script: [
  {
    innerHTML: {
      '@context': 'http://schema.org',
      '@type': 'Website',
      'url': 'https://actisec.se'
    }, type: 'application/ld+json'
  }
]

Looks pretty neat to me.

[leopiccionia]

Something like this would be neat, too, if not too abstract:

jsonLD: {
    '@context': 'http://schema.org',
    '@type': 'Organization',
    name: 'MyApp',
    url: 'https://www.myurl.com',
    logo: 'https://www.myurl.com/images/logo.png',
}