Review with Rating Snippets on Ghost Blog

Besides this technical blog (which deserves to be updated much more often then I in fact do), I also have another blog running on Ghost blogging platform - onlydarkchocolate.com. It's a blog where I review dark chocolate bars and give each bar a rating (1 to 5). Long time I wanted to show these ratings in search engines results and finally I found some time to make it work. Here's how:

So I looked into examples from Google dev guides and figured out that I need a structured data meta tag saying it's a Review according to http://schema.org. Luckily Ghost devs added structured meta tags for us, but unfortunately they hardcoded the value to be an Article (which makes sense, but would be nice to have that configured). So I wasn't sure I can do something about it, but I decided to see what happens if i just add another set of metatags. Google's Structured Data Testing tool was okay with having multiple meta items on a page, so I moved forward.

So first I tried JSON-DL format.

<script type="application/ld+json">  
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Thing",
    "name": "65% Venchi Cremino Fondente with Hazelnut and Almond"
  },
  "author": {
    "@type": "Person",
    "name": "Eugene Platonov"
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "4",
    "bestRating": "5"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Only Dark Chocolate"
  }
}
</script>  

Unfortunately it doesn't work as Ghost admin tries to be very smart and converts https://schema.org link to an html link:

Then I tried Microdata snippet which works fine, but leaves some text on the page, which i didn't like.

<span itemscope itemtype="http://schema.org/Review">  
  <span itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
    <span itemprop="name">65% Venchi Cremino Fondente with Hazelnut and Almond</span>
  </span>
  <span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Eugene Platonov</span>
  </span>
  <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
  Rating:
    <span itemprop="ratingValue">4</span> out of
    <span itemprop="bestRating">5</span>
  </span>
  <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="Only Dark Chocolate">
  </span>
</span>  

It looked like that:

Then I tried to outwit Ghost renderer and not let it expand my schema.org URL in JSON-DL. I sort of succeeded in this, using pre tag.

< pre>  
<script type="application/ld+json">  
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Thing",
    "name": "65% Venchi Cremino Fondente with Hazelnut and Almond"
  },
  "author": {
    "@type": "Person",
    "name": "Eugene Platonov"
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "4",
    "bestRating": "5"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Only Dark Chocolate"
  }
}
</script>  
</pre>  

(note there's space in < pre>, it's here only to let me show it (I told you Ghost admin tries to be very smart, too smart). If you use this code in a Ghost blog for real, just remove the space)

Sort of, because it leaves a rectangular bar on the page, which my scanty front-end skills weren't able to handle.

It's definitely not ideal, but I like it more than Microdata version. So I decided to stop there. And here's how it looks like (after Google updates its caches)

Done!

P.S. If you know a better way to suppress link expansion, please let me know in comments.