1

Asking here because HubSpot support hasn't been any help.

We want to optimize some of our HubSpot webpages for voice SEO/Google Home. We learned about this speakable schema: https://pending.schema.org/speakable

I copied/pasted the JSON-LD code into the head HTML section of this page: [REDACTED URL]

It's not working properly. Look at what happens: [REDACTED URL]

All the markup is showing up to the user on the front-end. That obviously isn't right. Any advice/what am I doing wrong? Thanks

1

JSON-LD is a script; therefore, you have to put your JSON code inside an opening and closing script tags:

<script type="application/ld+json"> ...your JSON code... </script>

Try it in your browser's DevTools and your page will display as intended.

Now, for allowing Google to recognize your markup. First, this is the recommended (and much clearer) spec to go off. It is Google's own documentation; things that are not yet in the full list of recognized markup will not have any effect in Google, and will probably not be recognized by their testing tool either.

Second, note that this is still in Beta. That means it's somewhat under construction, so the testing tool may encounter errors until it's out of Beta. That said...

Here is the valid JSON for your case; when you run it in a JSON formatter, it passes the test:

{
   "@context":"https://schema.org/",
   "@type":"WebPage",
   "name":"Front Row Cyber Insurance",
   "speakable":{
      "@type":"SpeakableSpecification",
      "cssSelector":[
         "headline",
         "summary"
      ]
   },
   "url":"https://www.frontrowinsurance.com/articles/online-cyber-insurance-for-canadian-small-businesses"
}

And that's it, that's all you need. This goes inside those script tags. But there is more work to do.

Looking at your website's code, I see a lot of inline styles instead of CSS classes. What you should do is apply a class to all the HTML elements you want to be speakable. This will have to be added in your CMS. Let's say you create a class (with no styles, just for element selection) of .speakabletext. Your HTML may now look like:

<p class="speakabletext">

Once this class is applied to all the HTML elements you want to be speakable, like paragraphs and headlines, you do not need to define it in your CSS file, since it has no styles associated with it. Just swap it into your JSON, which is now:

{
   "@context":"https://schema.org/",
   "@type":"WebPage",
   "name":"Front Row Cyber Insurance",
   "speakable":{
      "@type":"SpeakableSpecification",
      "cssSelector":[
         "speakabletext"
      ]
   },
   "url":"https://www.frontrowinsurance.com/articles/online-cyber-insurance-for-canadian-small-businesses"
}

Run that through the JSON validator first. Once it passes, run it through the schema testing tool. See what happens.

7
  • That fixed the code issue, it seems, but now the weird thing is when I go to test this: search.google.com/test/rich-results? Google says "Page partially loaded" and I cannot find the speakable schema listed anywhere in these results. Any idea what is wrong?
    – gpgpgp
    Oct 1 '20 at 13:41
  • Yes @gpgpgp - that has more to do with the JSON formatting. In other words, your code has invalid characters/structures. Run your JSON (without the script tags) through a JSON formatter/validator like jsonformatter.curiousconcept.com or jsonlint.com (I used the first one) and it'll tell you where the errors are and what to fix. Oct 1 '20 at 14:23
  • How could it have invalid characters when I just copied/pasted from the official schema: pending.schema.org/speakable ? Very confusing.
    – gpgpgp
    Oct 1 '20 at 19:07
  • Anyway, I just copied in the "fixed" code from jsonformatter, ran the URL through Google rich results tester again, and I'm still not seeing speakable schema.
    – gpgpgp
    Oct 1 '20 at 19:14
  • Hey @gpgpgp I amended the answer above with what I hope is a complete solution. Please reread all of it as I added to the script tag code as well. Oct 1 '20 at 20:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.