Rich Snippets with JSON LD How To Guide

June 24, 2019

Rich Snippet Types:

1. Article
2. Blog Article
3. Organisation
4. Person
5. Website

Article

schema.org Article, see also TechArticle for marking-up ‘How To’ articles like this, and NewsArticle for more specific types of Article.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Title or Headline",
  "alternativeHeadline": "Subtitle, byline, or other secondary headline",
  "datePublished": "2015-09-15T09:00:00+01:00",
  "description": "Description of the contents of the article",
  "url": "http://www.your-site.com/specific-url-for-this-article",
  "image": [
    "http://www.your-site.com/img/image-specific-to-appearing-in-article.jpg",
    "http://www.your-site.com/img/another-image-appearing-in-article.jpg"
  ],
  "articleBody": "[Optional] The full text of the article"
}
</script>

To Top ^

Blog Article

BlogPosting is very similar to Article, but, best to use the most specific type where possible.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "headline": "Title or Headline",
  "alternativeHeadline": "Subtitle, byline, or other secondary headline",
  "datePublished": "2015-09-15T09:00:00+01:00",
  "description": "Description of the contents of the article",
  "url": "http://www.your-site.com/specific-url-for-this-article",
  "image": [
    "http://www.your-site.com/img/image-specific-to-appearing-in-article.jpg",
    "http://www.your-site.com/img/another-image-appearing-in-article.jpg"
  ],
  "articleBody": "[Optional] The full text of the article"
}
</script>

To Top ^

Organisation

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "logo": "http://www.example.com/images/logo.png",
  "sameAs": [
    "http://www.facebook.com/your-profile",
    "http://www.twitter.com/yourProfile",
    "http://plus.google.com/your_profile"
  ]
}
</script>

To Top ^

Person

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "your name",
  "image": "http://www.your-site.com/your-image.png",
  "telephone": "+447777000111",
  "email": "your.email@your-site.com",
  "url": "http://www.your-site.com",
  "sameAs": [
    "http://www.facebook.com/YourProfile",
    "http://instagram.com/YourProfile",
    "http://www.linkedin.com/in/YourProfile",
    "http://plus.google.com/YourProfile"
  ]
}
</script>

To Top ^

Website

WebSite is a higher level concept within which you can add other attributes of importance to the site, like a SearchAction.

In the case of Google, this can also influence the display name of your site when Breadcrumbs are displayed as part of your search snippet.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "YourSiteName",
  "url": "http://www.your-site.com"
}
</script>

To Top ^