Google Rich Snippets voorbeelden maak Google intelligenter

In een ander artikel heb ik het al over zgn. microdata gehad om ervoor te zorgen dat zoekmachines je website beter kunnen indexeren dan zonder microdata. In dit artikel zal ik voorbeelden aandragen hoe de HTML eruit moet gaan zien zodat zoekmachines (Google, Bing, Yahoo) je website beter kunnen indexeren dan wanneer je geen rich snippets zou implenteren.

Wist je dat: je zoekmachines niet alleen wijzer kan maken d.m.v. specifieke html implantatie van een element maar dat dit ook kan d.m.v. JSON? Om rich snippets via JSON te implenteren heb je bijv. onderstaande code nodig:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "WebSite", 
  "name" : "Arlanet",
  "url" : "https://www.arlanet.nl/",
  "potentialAction" : {
    "@type" : "SearchAction",
    "target" : "http://www.arlanet.nl/?s={search_term}",
    "query-input" : "required name=search_term"
  }                     
}
</script>

Breadcrumbs

Het BreadcrumbList schema laat je dit element opmaken zodat je opvallender in de SERP's (Search Enginge REsult Page) terecht komt, zoals je in onderstaande afbeelding kunt zien.

Dit kun je bereiken door je breadcrumbs op de volgende manier te html'en:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.arlanet.nl/">
        <span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.arlanet.nl/blog/">
      <span itemprop="name">Blog</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.arlanet.nl/blog/zoekmachine-optimalisatie/">
      <span itemprop="name">Zoekmachine Optimalisatie</span></a>
    <meta itemprop="position" content="3" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.arlanet.nl/blog/zoekmachine-optimalisatie/google-rich-snippets-voorbeelden/">
      <span itemprop="name">Google Rich Snippets voorbeelden</span></a>
    <meta itemprop="position" content="4" />
  </li>
</ol>

Navigatie

Voor ieder navigatie-element kun je onderstaande markup gebruiken om ervoor te zorgen dat de zoekmachines je naviagtie-elementen correct indexeren.

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/software/">Software</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/e-commerce/">E-commerce</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/iot/">Iot</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/episerver/">Episerver</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/umbraco-cms/">Umbraco-cms/</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/het-team/">Het team</a></li>
  <li itemprop="name"><a itemprop="url" href="http://www.arlanet.nl/klant-cases/">Klant cases</a></li>
</ul>

Video

Onderstaande code is nodig om onderscheidend in de SERPs terecht te komen.

Video schema.org voorbeeld
<div itemscope itemtype="http://schema.org/VideoObject">
 <link itemprop="url" href="https://www.arlanet.nl/digital-engineers/">
 <meta itemprop="name" content="De digitale engineer" />
 <meta itemprop="description" content="In de hedendaagse wereld waarin mens en machine zich in rap tempo ontwikkelen, is een nieuw fenomeen het gesprek van de dag… de Digital Engineer!" />
 <meta itemprop="uploadDate" content="2015-02-05T08:00:00+08:00" />
 <meta itemprop="duration" content="PT10M25S">
 <img itemprop="thumbnailUrl" src="https://www.arlanet.nl/media/2524/digital-engineers.jpg" />
</div>

E-commerce product

Onderstaande code kan gebruikt worden om een product-pagina binnen een e-commerce website sterker in de zoekmachines te maken m.b.v. schema.org rich snippets.

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Back to the Future 1:1 Scale Hoverboard</h1>
  <span itemprop="description">Time traveling to 2015 and back is only the beginning of the adventures found in Back to the Future Part II. The coolest part…was finding the hoverboard! And now the future is finally here and you can have a hoverboard of your own! This replica prop is an exact recreation from the one seen in Back to the Future II. Sure, it doesn't truly hover (come on scientists!) but carrying it around will let everyone know that you've just come back... from the future! Just don't try to use it on water! <i>Back to the Future is a trademark and copyright of Universal Studios and U-Drive Joint Venture. Licensed by Universal Studios Licensing LLC. All Rights Reserved.</i></span>
  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="USD" />
    Buy New: $<span itemprop="price">48.99</span>
    <link itemprop="availability" href="http://schema.org/InStock" />
  </span>  
</div>

Nieuws

Onderstaande code kun je gebruiken om de SEO van een nieuws-pagina te verbeteren.

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

Artikel (bijv. blog)

Onderstaande microdata kunnen gebruikt worden om aan te geven dat een bepaald element een artikel bevat.

<div itemscope itemtype="http://schema.org/Article">
  <span itemprop="name">Google Rich Snippets voorbeelden</span>
  by <span itemprop="author">Chris de Jong</span>
  Dit artikel is 0 keer geretweet en heeft 0 reacties.
  <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
    <div itemprop="interactionService" itemscope itemid="http://www.twitter.com" itemtype="http://schema.org/Website">
      <meta itemprop="name" content="Twitter" />
    </div>
    <meta itemprop="interactionType" content="http://schema.org/ShareAction"/>
    <meta itemprop="userInteractionCount" content="0" />
  </div>
  <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
    <meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
    <meta itemprop="userInteractionCount" content="0" />
  </div>
</div>

Locatie

Onderstaande rich snippet kun je gebruiken op bijvoorbeeld een contact pagina.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Arlanet</h1>
  <p itemprop="descripton">Software ontwikkeling bij Arlanet op basis van Microsoft .NET. Specialist in Innovatieve software, E-commerce, IoT en CMS development.</p>
  <p>Open: <time itemprop="openingHours" datetime="Ma-Vr 08:00-17:00">Maandag-Vrijdag 8am-5pm</time></p>
  <p>Phone: <span itemprop="telephone" content="+31756476090">075-647-60-90</span></p>
  <address itemscope itemtype="http://schema.org/PostalAddress" itemprop="address">
    <span itemprop="streetAddress">Oude Blaauwweg 2</span>
    <span itemprop="addressLocality">Wormerveer</span>,
    <span itemprop="postalCode">1521 RN</span>
  </address>
</div>

Logo

Wanneer je het logo op een website wilt optimaliseren kun je onderstaande conde gebruiken.

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="https://www.arlanet.nl/">Home</a>
  <img itemprop="logo" src="https://www.arlanet.nl/assets/img/Arlanet-logo.svg" />
</div>

Social media accounts

Wanneer een organisatie gebruik maakt van 1 of meerdere social media platforms dan kun je deze op een website als volgt aangeven:

<span itemscope itemtype="http://schema.org/Organization">
  <link itemprop="url" href="https://www.arlanet.nl">
  <a itemprop="sameAs" href="https://www.facebook.com/Arlanetnl">FB</a>
  <a itemprop="sameAs" href="https://www.linkedin.com/company/arlanet-bv---.net-software-development">LinkedIn</a>
</span>