Controle over je weergave op sociale media

Je kan beinvloeden hoe jouw site wordt weergegeven wanneer het gedeeld wordt via sociale media door het plaatsen van een aantal regels HTML op iedere pagina. Dit kan meer bezoekers naar je site trekken door het voorbeeld te voorzien van meer gegevens.

TL;DR

  • Gebruik schema.org microdata om pagina titel, beschrijving en afbeelding te specificeren voor Google+.
  • Gebruik Open Graph Protocol (OGP) om pagina titel, beschrijving en afbeelding te specificeren voor Facebook.
  • Gebruik Twitter Cards om pagina titel, beschrijving, afbeelding en Twitter ID te specificeren voor Twitter.

Je kan beinvloeden hoe jouw site wordt weergegeven wanneer het gedeeld wordt via sociale media door het plaatsen van een aantal regels HTML op iedere pagina. Dit kan leiden tot betere toegankelijkheid door het voorbeeld rijkere informatie te bieden. Zonder dit, zullen sociale media website alleen de basis informatie tonen, zonder afbeeldingen of andere handige informatie.

Welke zou vaker worden aangeklikt? Gebruikers zijn aangetrokken tot afbeeldingen en zijn beter overtuigd dat ze vinden wat ze zoeken als er een voorbeeld vooraf is.

Zonder de juiste opmaak is alleen de titel zichtbaar.
Met de juiste opmaak is de titel correct en zijn een korte beschrijving en afbeelding bijgevoegd.

Wanneer iemand op een sociaal netwerk jouw website wilt delen met zijn vrienden, zal hij waarschijnlijk zelf toevoegen hoe cool het is, en dat delen. Maar jouw website omschrijven is tijdrovend werk en kan de plank mislaan vanuit het standpunt van de eigenaar gezien. Ook zijn er diensten die het aantal karakters beperken die gebruikers kunnen toevoegen.

Door geschikte metadata toe te voegen aan jouw pagina's, maak je het delen makkelijker: de titel, omschrijving en een relevante afbeelding zijn dan voorgeselecteerd. Dat betekent dat gebruikers geen waardevolle tijd (en karakters) hoeven te besteden om de link te omschrijven.

Gebruik schema.org + microdata voor rich snippets op Google+

Crawlers gebruiken meerdere methoden om een pagina te kunnen lezen en begrijpen. Door microdata en schema.org vocabulaire te gebruiken help je de sociale media sites en zoekmachines beter de inhoud te begrijpen.

Hier is een voorbeeld:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

De meeste metadata wordt geplaatst in de head van een pagina, maar microdata zit waar de context bestaat.

Voeg itemscope toe voor de microdata scope

Door deitemscope toe te voegen kan je de tag specificeren als een blok content over een bepaald item.

Voeg itemtype toe om de soort website te definiëren

De type van een item kan worden gespecificeerd met het itemtype attribuut samen met de itemscope. De waarde van itemtype wordt bepaald door het soort content op de pagina. Je kan de relevante informatie vinden op deze pagina.

Voeg itemprop toe om ieder item te beschrijven volgens het schema.org vocabulaire

itemprops defineren eigenschappen voor itemtypes in de scope. Voor sociale media metadata is voornamelijk de itemprop waardes van name, description and image het meest relevant.

Leer meer

Deze microdata levert semantische data aan crawlers, voornamelijk Google+ en Google Search. Om meer te leren over snippets en rendering op Google+ lees de volgende documenten:

Valideer rich snippets

Om rich snippets te valideren op Google+ kan je deze tools gebruiken:

Gebruik Open Graph Protocol (OGP) voor rich snippets op Facebook

De Open Graph Protocol (OGP) levert Facebook de nodige metadata om web pagina's dezelfde functionaliteit te geven als andere Facebook objecten.

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Wanneer dit in de head sectie van jouw pagina zit, wordt deze metadata gebruikt voor rich snippet informatie wanneer de pagina wordt gedeeld.

Gebruik og: namespaced meta tags om metadata te omschrijven

Een meta tag bevat een property attribuut en een content attribuut.

Waarde Eigenschap
og:title De titel van de pagina
og:description De beschrijving van de pagina.
og:url De canonical url van de webpagina.
og:image URL naar een afbeelding van de pagina.
og:type Geeft het type pagina aan. Kies er een die het meest relevant is voor jouw pagina hier.

Deze meta tags bevatten semantische informatie voor sociale media crawlers, voornamelijk van Google+](https://plus.google.com/){: .external } en Facebook.

Leer meer

Om meer te leren over wat je kan toevoegen aan een Facebook post, bezoek de officieele Open Graph Protocol site:

Valideer rich snippets

Om de markup te valideren kan je deze tool van Facebook gebruiken:

Gebruik Twitter Cards voor rich snippets op Twitter

Twitter Cards zijn een uitbreiding op het Open Graph Protocol toegespitst voor Twitter. Het geeft de mogelijkheid om media zoals afbeeldingen en video's toe te voegen aan een tweet met een link naar jouw site. Door de passende metadata toe te voegen, zullen tweets met een link naar jouw site een zogenaamde card hebben met deze rich media.

Gebruik twitter: namespaced meta tags om metadata te omschrijven

Om Twitter Card werkend te krijgen moet je domein zijn goedgekeurd en moet de meta tag twitter:card met een name attribuut hebben.

Hier is een kort voorbeeld:

<html prefix="g: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Door het toevoegen van de Twitter id aan twitter:site, zal Twitter deze informatie implementeren bij een gedeelde link.

Leer meer

Om meer te leren over Twitter Cards bezoek:

Valideer rich snippets

Om je opmaak te valideren levert Twitter:

In de praktijk

Gegeven deze drie opties wordt in de praktijk meestal alle drie tegelijk geintegreerd in de webpagina. Hier is een voorbeeld:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image" content=
     "https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url" content=
     "{{site.sample_link_base}}discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
     content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description" content="Fireworks are beautiful.
     This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Merk op dat microdata en OGP bepaalde opmaak delen:

  • itemscope staat in de head tag
  • title en description zijn hetzelfde voor microdata en OGP
  • itemprop="image" gebruikt de link tag met een href attribuut in plaats van het hergebruiken van meta tag met property="og:image"

Als laatste, valideer dat je pagina eruit ziet zoals verwacht op ieder sociale media website voordat je publiceert.

Translated By: