Neem de controle over uw sociale snippets

Sociale signalen worden steeds belangrijker in de wereld van SEO. Facebook-shares, tweets en Google + 1's hebben zo'n volume bereikt dat ze potentieel een grote mate van inhoudkwaliteit kunnen zijn. Dit is de reden waarom zoekmachines deze signalen gaan beschouwen wanneer ze webpagina's rangschikken.

Sociale signalen zijn nog steeds niet zo belangrijk als andere rangschikkingsfactoren, zoals het linkprofiel en de inhoud van een site, maar ze zullen ongetwijfeld een essentiële rankingfactor zijn in de toekomst.

Om de zichtbaarheid van onze inhoud te maximaliseren, moeten we bepalen hoe het eruit ziet als een sociaal fragment. Een goed sociaal fragment heeft de potentie om veel extra bezoekers naar onze websites te trekken. Laten we kijken hoe we een van deze kunnen maken.


Sociale snippets?

Een sociaal fragment is een voorbeeld van een pagina dat wordt gebruikt wanneer u die pagina op sociale media deelt. In plaats van een eenvoudige link krijgen gebruikers aanvullende informatie over de inhoud achter de link.

Als we bijvoorbeeld het artikel over paginering van Webdesigntuts + op Facebook willen delen, zien we het volgende sociale fragment:

Een sociaal fragment op Google+ ziet er ongeveer hetzelfde uit:

Dus in plaats van een standaardlink zien gebruikers veel meer informatie over de pagina. We kunnen een voorbeeldafbeelding, de titel en zelfs een korte beschrijving zien. Dit maakt het voor ons gemakkelijker om te beslissen of de link al dan niet de moeite waard is om te klikken.

Deze sociale fragmenten zijn automatisch gegenereerd. De persoon die de webpagina deelt, heeft geen controle over de afbeelding, titel en beschrijving die wordt gebruikt. Deze kunnen alleen door de webmaster zelf worden gewijzigd (we leren hoe dit later in het artikel te doen).


Waarom sociale fragmenten belangrijk zijn

Het sociale fragment van een pagina is iets dat veel webmasters vergeten, wat mogelijk kan leiden tot weergaveproblemen op sociale media. Als de markering voor sociale fragmenten niet aanwezig is, wordt een sociaal fragment vaak onjuist weergegeven.

Het doel van sociale fragmenten is om mensen overhalen om te klikken op hen. Hoe meer mensen erop klikken, hoe meer bezoekers de onderliggende pagina krijgt. Daarom moet je ze behandelen als een gratis advertentie. Een gelijkwaardige advertentie moet een opvallende foto, een waardige titel en een interessante beschrijving bevatten. Een sociaal fragment moet dezelfde elementen hebben.

Als een van deze elementen niet goed werkt, bijvoorbeeld als de verkeerde miniatuur wordt weergegeven, kan dit uiteindelijk u bezoekers en klanten kosten.

Dit is een voorbeeld van een pagina die heeft niet geïmplementeerde sociale fragmenten. Ik heb een pagina gedeeld van 'De Bakboetiek', een winkel die is gespecialiseerd in bakapparatuur. Ze hebben ook een webshop waar ze producten verkopen zoals deze cake pop-mold, maar zoals je kunt zien, is dit sociale fragment niet bijzonder nuttig ...

In plaats van een miniatuur van de cakevorm en een korte beschrijving te tonen, kunnen we alleen het logo en de verkeerde titel zien. Er is zelfs geen beschrijving! Hoe moet dit sociale fragment bezoekers van Facebook naar hun website brengen?


Het Open Graph-protocol

Sociale fragmenten zijn gebaseerd op het Open Graph-protocol. Het wordt gebruikt om van een webpagina een rijk object in de sociale grafiek te maken. Dankzij dit kunnen sociale media zoals Facebook, Google+ en Twitter belangrijke elementen van een pagina identificeren.

Het OG-protocol is gebaseerd op RDFa (onthoud RDFa uit ons gestructureerde gegevensartikel?). We kunnen het implementeren door extra te gebruiken tags in de van een pagina.

Meer informatie over het Open Graph-protocol is te vinden op ogp.me.


Een sociaal fragment maken

Nu is het tijd om de controle over ons eigen sociale fragment over te nemen. Er zijn verschillende elementen die kunnen worden aangepast: de miniatuur, titel, beschrijving, URL en inhoudstype.

Notitie: de volgende markup wordt gebruikt door Facebook en Google+. Twitter gebruikt verschillende metatags, die we later zullen bespreken.

thumbnail

Dit is misschien wel het belangrijkste element van een sociaal fragment. Het is het onderdeel dat de meeste gebruikers als eerste zullen zien, dus zorg ervoor dat je hiervoor een duidelijke afbeelding gebruikt.

Ik stel voor een vierkante afbeelding van minimaal 200 x 200 pixels te gebruiken. Als de afbeelding te klein is, wordt deze mogelijk niet weergegeven of wordt een andere afbeelding van de pagina gebruikt (in sommige gevallen de afbeelding van een advertentie ...).

We kunnen de locatie van de thumbnail met deze markup opgeven:

Titel

Dit is de titel van uw sociale fragment. Het is het tweede belangrijkste element, naast de miniatuur. Uw titel moet de gebruiker overhalen om erop te klikken. Het fungeert ook als ankertekst voor de link naar de pagina.

De code voor de titel ziet er als volgt uit:

Omschrijving

Schrijf een korte samenvatting van de pagina die als een beschrijving kan worden gebruikt. Ik gebruik vaak mijn metabeschrijvingstekst voor een sociaal fragment, maar u kunt kiezen wat u maar wilt. Zorg er wel voor dat het de nieuwsgierigheid van de lezer prikkelt en hem of haar op de link laat klikken.

Inhoudstype

Als u de inhoud op de pagina wilt opgeven, kunt u de og: soort label. Als deze tag wordt weggelaten, wordt de pagina gecategoriseerd als 'website'. Andere inhoudstypen die kunnen worden gebruikt, zijn muziek, video, artikel, boek en profiel. Meer informatie is te vinden op de pagina met ingebouwde objecten op Facebook.

URL

Dit is de URL waarnaar de gebruiker wordt verzonden wanneer hij op de titel klikt. Voeg de canonieke URL toe aan deze tag:

Als je wilt volg verkeer afkomstig van sociale media, u kunt trackingparameters toevoegen waardoor informatie kan worden weergegeven in Google Analytics. Gebruik hiervoor de Google URL Builder.

U hoeft slechts drie parameters toe te voegen: Bron, Medium en Campagne.

  • Bron: facebook
  • Gemiddeld: sociaal
  • Campagne: een unieke naam / id

De uiteindelijke URL ziet er ongeveer zo uit: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Twitter-kaarten

Twitter gebruikt een andere opmaak om Twitter-kaarten te maken. Met Twitter-kaarten kun je media koppelen aan tweets die linken naar je inhoud.

Er kunnen drie soorten media worden gebruikt:

  • samenvatting: vergelijkbaar met een sociaal fragment op Facebook en Google+
  • foto: een fotokaart
  • speler: een mediaspelerkaart

Laten we elke Twitter-kaart afzonderlijk bespreken:

Samenvatting

De samenvattende kaart is een Twitter-kaart die lijkt op de sociale fragmenten die we op Facebook en Google+ zien. Het kan worden gebruikt voor verschillende soorten inhoud (blogposts, artikelen, producten ...). Een samenvattende kaart kan er als volgt uitzien:

     

Allereerst moeten we het type Twitter-kaart identificeren via de twitter: card tag (in dit geval een samenvatting). De URL moet de canonieke URL van de pagina zijn. De twitter: title tag mag niet langer zijn dan 70 tekens. De beschrijving aan de andere kant is beperkt tot 200 tekens. De afbeelding wordt gebruikt als een miniatuur en moet vierkant zijn. Afbeeldingen kleiner dan 60 x 60 px worden niet weergegeven. eindelijk, de Schepper tag kan worden gebruikt om de auteur de eer te geven.

Foto

Er zijn verschillende elementen van een fotokaart die ook in de samenvattende kaart worden gebruikt. Het belangrijkste verschil tussen de twee is de vormgeving van de tweet. De fotokaart plaatst de afbeelding vooraan en in het midden in de tweet.

Twitter gebruikt de twitter: image URL voor de foto. Als deze afbeelding kleiner is dan 280 x 150 pixels, wordt deze niet weergegeven. U kunt een breedte en hoogte van de afbeelding opgeven om Twitter te helpen de beeldverhouding van de afbeelding te behouden bij het wijzigen van het formaat.

Een fotokaart kan er als volgt uitzien:

      

De twitter: card en twitter: image tag is verplicht, de rest is optioneel.

Speler

De spelerskaart wordt gebruikt voor audio en video. Het mediabestand is ingebed in de tweet via een iframe. Het nadeel van een spelerskaart is dat het moet worden goedgekeurd door Twitter!

Als je een spelerskaart ter goedkeuring wilt gebruiken, voeg je de volgende code toe aan je pagina:

       

De twitter: card tag wordt gebruikt om de spelerskaart te identificeren. URL, titel, afbeelding en beschrijving zijn vergelijkbaar met andere spelerskaarten. De twitter: player tag bevat een HTTPS-koppeling naar de iframe-speler. U kunt de breedte en hoogte van het iframe opgeven via de twitter: speler: breedte en twitter: speler: hoogte labels.

Een paar andere vereisten voor spelerskaarten:

  • Gebruik een HTTPS-URL (de video moet ook via HTTPS worden weergegeven)
  • Stoppen of pauzeren is verplicht
  • Geen automatische weergave is toegestaan
  • Voor de inhoud hoeft u zich niet aan te melden

Twitter-kaarten en de open grafiek

Twitter zoekt eerst naar twitter: card tags op uw website, maar als deze er geen vindt, wordt teruggegrepen naar de Open Graph-markup. Dit betekent dat u geen dubbele tags hoeft te maken. U kunt eenvoudig uw bestaande Open Graph-tags aanvullen met twitterkaart-tags.

Twitter ziet de volgende tags als vergelijkbaar (twitter-markeringen aan de linkerkant, OG aan de rechterkant)

  • twitter: ul = og: url
  • twitter: description = og: description
  • twitter: title = og: titel
  • twitter: afbeelding = og: afbeelding
  • twitter: afbeelding: width = og: afbeelding: width
  • twitter: afbeelding: hoogte = og.beeldhoogte

Conclusie

Zoekmachines brengen steeds meer tijd door aan sociale signalen omdat ze een goede indicator zijn voor kwaliteitsinhoud. Om de kans te vergroten dat iemand op een sociaal fragment klikt, moeten we controle krijgen over de inhoud ervan. We kunnen dit doen via het Open Graph-protocol voor Facebook en Google+. Voor Twitter moeten we deze Open Graph-tags aanvullen met Twitter-specifieke code.


Handige bronnen

Om u te helpen bij de implementatie van sociale fragmenten, heb ik verschillende hulpprogramma's verzameld die nuttig kunnen zijn:

  • Google+ Snippet Creator: gebruik dit hulpmiddel om een ​​HTML-code voor een sociaal fragment te genereren. Plak de code gewoon in het kopgedeelte van uw pagina en u bent klaar.
  • Facebook-foutopsporing: controleer de open grafiekinformatie die van uw pagina is geschraapt.
  • Rich Snippet-testtool: kan worden gebruikt om de informatie van uw sociale fragment te controleren.