kabisa / theguild.nl

https://theguild.nl
3 stars 0 forks source link

add schema.org NewsArticle ld+json for google rich search results #120

Closed thnukid closed 4 years ago

thnukid commented 4 years ago

Changelog

This might display in the google search results:

Screenshot 2020-02-13 at 13 48 39
thnukid commented 4 years ago

Had to fiddle around to get the correct images, since asset_host is enabled, meaning you have to use the padrino helper image_path

For a blog post without the social image enabled

<script type="application/ld+json">
 {
   "@context": "https://schema.org",
   "@type": "NewsArticle",
   "mainEntityOfPage": {
   "@type": "WebPage",
   "@id": "https://www.theguild.nl"
   },
   "headline": "The Guild 1",
   "image": ["https://www.theguild.nl/images/theguild-logo-a2fb14ca.png"],
   "datePublished": "2013-09-05T00:00:00+00:00",
   "dateModified": "2019-12-10T10:05:29+00:00",
   "author": {
   "@type": "Person",
   "name": "Ariejan de Vroom"
   },
   "publisher": {
   "@type": "Organization",
   "name": "Kabisa",
   "logo": {
   "@type": "ImageObject",
   "url": "https://www.theguild.nl/images/kabisa-logo-d9ace243.png"
   }
   },
   "description": "The Guild opens its doors for the first time. With about fifty craftsmen in attendance, this edition was a great hit!"
   }
   </script>

For an article that has a social_image via contenful added

<script type="application/ld+json">
   {
  "@context": "https://schema.org",
   "@type": "NewsArticle",
   "mainEntityOfPage": {
   "@type": "WebPage",
   "@id": "https://www.theguild.nl"
  },
  "headline": "Extending Flutter Driver with custom commands",
   "image": ["https://images.ctfassets.net/8v4g74v8oew0/6GMp3v3MVpdVkC3W83udjf/3bc177dfbda20f14ca78ee67216e124a/Extending_Flutter_Driver_with_custom_commands_.png?w=1200"],
   "datePublished": "2020-02-17T00:00:00+00:00",
   "dateModified": "2020-02-17T17:06:46+00:00",
   "author": {
   "@type": "Person",
   "name": "Pascal Widdershoven"
  },
   "publisher": {
   "@type": "Organization",
   "name": "Kabisa",
   "logo": {
   "@type": "ImageObject",
   "url": "https://www.theguild.nl/images/kabisa-logo-d9ace243.png"
   }
   },
   "description": "In this post we'll look at how Flutter Driver communicates with your app and how we can extend that communication with custom commands."
   }
   </script>

You find the difference in "image" tag in the json, https://images.ctfassets.net/8v4g74v8oew0/6GMp3v3MVpdVkC3W83udjf/3bc177dfbda20f14ca78ee67216e124a/Extending_Flutter_Driver_with_custom_commands_.png?w=1200 vs. https://www.theguild.nl/images/theguild-logo-a2fb14ca.png