Of je nou een blogger, een social media marketeer of eigenaar bent van een klein bedrijf, de kans is groot dat je op een gegeven moment tegen het probleem aanloopt dat Facebook de afbeeldingen van je WordPress website niet goed laat zien. Soms laat Facebook een oude afbeelding zien of, nog erger, wordt er helemaal niets getoond! Gelukkig kan je de meeste problemen analyseren en oplossen met een tool genaamd de Facebook Debugger. Bekijk hieronder een aantal veelvoorkomende situaties waar je mee te maken zou kunnen krijgen – en natuurlijk geven wij de oplossingen.

Hoe Facebook informatie ophaalt

Wanneer je iets deelt op WordPress, dan bewaart Facebook de afbeeldingen op hun servers en CDN (hier kan je meer lezen over wat een wat een CDN precies is en hoe het werkt). Dit kan je vergelijken met de manier waarop caching op je website werkt. Soms moet je de cache legen van je website, om alles weer aan het werk te krijgen. Hetzelfde geldt soms voor Facebook. Als je dingen op je website updatet, dan is het mogelijk dat Facebook nog steeds een oude afbeelding laat zien wanneer je een artikel deelt. Dit gebeurt doordat Facebook niet telkens nieuwe informatie ophaalt, maar gebruik maakt van reeds opgeslagen informatie uit hun cache.

Hetzelfde geldt voor de informatie over de link en de content zelf. Deze informatie bestaat uit zogenaamde Open Graph Meta Tags. Volgens Facebook, zorgt dit Open Graph protocol ervoor dat elke webpagina getransformeerd wordt tot een (rich) object welke toegevoegd wordt aan de grote hoeveelheid sociale data van Facebook. Simpel gezegd zijn dit tags die meer informatie geven over de link, zodat Facebook weet wie er mogelijk in geïnteresseerd zijn.

Weet je niet zeker of je website gebruikt maakt van Open Graph Meta Tags? De kans is groot dat dat wel degelijk zo is, maar dat dat gebeurt zonder dat je het doorhebt. Als je gebruik maakt van populaire plug-ins zoals Yoast SEO of Social Warface, dan zijn de tags automatisch toegevoegd aan je website.

Als voorbeeldartikel gebruiken we onze handleiding voor snelheidsoptimalisatie van je website. Als we kijken naar de broncode van dat artikel, dan zien we de volgende data als het gaat om Open Graph. Let op: Open Graph gebruikt verschillende kenmerken, zoals og:title en og:image waarvan de laatste van belang is voor deze handleiding. Dit is de code waar Facebook naar kijkt om te bepalen welke afbeelding, titel en beschrijving moet worden laten zien.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta Managed WordPress Hosting" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

De Facebook Debugger gebruiken

Net als elk ander platform of tool, zijn er veelvoorkomende problemen en eigenaardigheden waar je mee te maken zal krijgen, helemaal als je je niet aan de voorgeschreven handelingen houdt. De Facebook Debugger tool was gemaakt om problemen met zowel de Open Graph Meta Tags als caching op te lossen.

Je kan de Facebook Debugger tool vinden op de Facebook developer website onder Tools & Support. Als je veel artikelen deelt op Facebook, is het geen slecht idee om deze pagina op te slaan.

Facebook Debugger tool

Facebook Debugger tool

Om Facebook een bepaald artikel na te laten gaan, vul dan de URL in en klik op ‘Debug’. In deze handleiding maken we gebruik van een bestaand artikel dat op onze website te vinden is. Het is namelijk zo dat we een tijdje geleden de afbeelding hebben veranderd van ons artikel over snelheidsoptimalisatie van je website. Wanneer we deze URL invoeren in de Facebook Debugger laat deze eerst de reeds aanwezige informatie zien uit de cache (zie hieronder).

Dit is dan ook meteen wat mensen te zien krijgen wanneer zij dit artikel delen. Echter, in ons geval betekent dit dat een oude afbeelding gebruikt wordt, in plaats van de nieuwe afbeelding van het geüpdatete artikel. We zien ook dat de og:image tag ook nog de oude afbeeldingsnaam hanteert.

Oude afbeelding en URL in de Facebook Debugger

Oude afbeelding en URL in de Facebook Debugger

Wat kunnen we hier aan doen? Er zijn twee dingen die we kunnen doen. Volg hiervoor onderstaande stappen.

Stap 1 – Leeg de WordPress cache voor die URL

Het eerste wat we moeten doen, is zorgen dat we zeker weten dat Facebook de meest recente informatie ophaalt. Dit doen we door de cache van de WordPress website te legen. Zoals je misschien opmerkt, kan er inderdaad sprake zijn van twee cache lagen. Als de oude afbeelding zich nog steeds binnen de cache bevindt, kan Facebook Debugger niet je probleem oplossen, omdat de tool dan nog steeds oude opgeslagen informatie geserveerd krijgt.

Wanneer je klant bent bij Kinsta, kan je meteen naar stap 2, omdat je Kinsta de caching op serverniveau regelt. Dit betekent dat de cache automatisch geleegd wordt, elke keer als je een artikel of pagina publiceert of updatet. Lees hier meer over hoe Kinsta caching werkt. Als je gebruikt maakt van een andere cachingsdienst of externe plug-in, dan is het verstandig om hun documentatie goed te lezen om te weten hoe je de cache van een specifieke URL leegt. Hieronder vind je links met uitleg voor de meest populaire caching diensten:

Als niets werkt, kan je altijd nog de cache van je gehele website legen (zie hieronder). Dit is echter niet aan te raden, omdat je website vervolgens de gehele cache moet heropbouwen waardoor je website erg langzaam zal laden.

WordPress cache legen

WordPress cache legen

Als je nu nog problemen ondervindt, dan kan het zo zijn dat je afbeelding ook op je CDN-server wordt gecachet. In dit geval zou je je CDN moeten cachen.

Stap 2 – Vraag opnieuw informatie aan in de Facebook Debugger

Nu de cache van deze specifieke URL geleegd is, moeten we opnieuw informatie opvragen in de Facebook Debugger tool. Om dit te doen, vul je de URL in en klik je op de knop ‘Scrape Again’.

Opnieuw informatie opvragen in de Facebook Debugger tool

Opnieuw informatie opvragen in de Facebook Debugger tool

Er is een kleine kans dat er nu een waarschuwing verschijnt. Uit onze ervaring kunnen we zeggen dat dit niet altijd terecht is. In ons voorbeeld zien we een waarschuwing dat onze afbeelding de maximale toegestane grootte van 8MB overschrijdt en dat onze server traag reageert. Onze afbeelding komt niet eens in de buurt van 8MB, want hij is slechts 160.63KB groot. Daarnaast is onze server razendsnel en laadt de pagina binnen 1 seconde!

Facebook warning

Facebook warning

Dit is dan ook het moment dat we de ‘Scrape Again’ knop voor de tweede keer indrukken. Het klinkt misschien raar, maar in veel gevallen moet je twee keer op deze knop drukken. Na een paar seconden hebben we resultaat! We zien dat nu onze nieuwe afbeelding wordt opgevraagd en we als we kijken naar het og:image kenmerk, zien we daar de nieuwe bestandsnaam.

De nieuwe afbeelding in de Facebook Debugger tool

De nieuwe afbeelding in de Facebook Debugger tool

Het is belangrijk om te vermelden dat Facebook berichten, die al eerder gedeeld waren, niet geüpdatet worden. Met deze tool verander je alleen de informatie die in de toekomst gedeeld wordt.

Verdere Facebook Debugger tips

Je kan met de Facebook Debugger niet alleen oude afbeeldingen updaten, maar ook de tekstuele inhoud van je Facebook posts van een update voorzien. Zowel de titel als de beschrijving van je artikel zijn Open Graph Meta Tags. Dus als je iets hieraan wil veranderen, update deze dan in WordPress en voer bovenstaande stappen uit.

“The provided ‘og:image’ properties are not yet avaliable”

We hebben net een aantal waarschuwingen genegeerd, maar dat betekent niet dat ze altijd nutteloos zijn. Het is zo dat Facebook bepaalde afbeeldingsdimensies aanbeveelt. Als je je hier niet aan houdt, dan is het mogelijk dat je in de problemen komt, bijvoorbeeld doordat er simpelweg geen afbeelding wordt laten zien (zie de waarschuwing hieronder).

Downtime en WordPress problemen? Kinsta is de hosting oplossing speciaal ontworpen om jou tijd te besparen! Bekijk onze kenmerken

De foutmelding ’The provided ‘og:image’ properties are not yet available’ ontstaat omdat nieuwe afbeeldingen niet synchroom worden behandeld. Om te garanderen dat nieuwe URL’s een afbeelding bevatten kan je het best de dimensies specificeren waarbij je gebruikt maakt van de tags ‘og:image:width’ en ‘og:image:height’.

Facebook Debugger – afbeelding te klein

Facebook Debugger – afbeelding te klein

We kregen bovenstaande foutmelding, omdat onze afbeelding te klein was. De minimale toegestane afbeeldingsgrootte van Facebook is 200 x 200 pixels. In het algemeen kan je stellen dat een grotere afbeelding in de meeste gevallen ook beter is. We hebben een artikel geschreven met alle aanbevolen afbeeldingsgroottes voor social media.1.200 x 630 pixels is wat zou moeten werken voor de meeste mensen. Het is geen probleem om een grotere afbeelding te gebruiken. In ons geval gebruikten we een afbeeldingsgrootte van 1460 x 730. Houd wel in je achterhoofd dat Facebook de afbeelding bijsnijdt wanneer de verhouding tussen lengte en breedte verandert. Zorg dus dat je deze verhouding hetzelfde houdt.

Als je gebruik maakt van een plug-in als Yoast SEO, is het aan te raden om de afbeelding handmatig in te stellen. Het kan zo maar zijn dat je WordPress thema een andere lengte-breedteverhouding hanteert dan Facebook of misschien maak je niet eens gebruik van de ‘featured image’ functie van WordPress!

In dit geval zorgt de Yoast SEO plug-in dat je een (op Facebook afgestemde) afbeelding kan uploaden die zich vervolgens in de Open Graph Meta Tags nestelt. Hier kan je ook handmatig de titel en beschrijving van het artikel wijzigen, indien nodig.

Yoast SEO Facebook social box

Yoast SEO Facebook social box

“The following required properties are missing: fb:app_id”

Soms kan het zo zijn dat je bovenstaande foutmelding tegenkomt die zegt dat je een Facebook App ID mist. Het is belangrijk om te weten dat dit geen enkele invloed heeft op het delen van artikelen op Facebook. Vaak kunnen we deze foutmelding dus negeren. Het is wel zo dat deze foutmelding er voor zorgt dat we geen gebruik kunnen maken van de Facebook Insights data.

The following required properties are missing: fb:app_id

The following required properties are missing: fb:app_id

Wil je deze data Insights data wel in kunnen zien? Dan is het noodzakelijk om de onderstaande stappen te volgen waarmee je een Facebook App ID toevoegt. Hieronder vind je de stappen om het App ID toe te voegen aan WordPress gebruikmakend van de Yoast SEO plug-in.

  1. Maak je eigen Facebook App aan: https://developers.facebook.com/docs/apps/register (gratis)
  2. Kopieer je Facebook App ID naar het app dashboard.
  3. Binnen je WordPress dashboard, klik op “SEO” aan de linkerkant.
  4. Onder het ‘Facebook’ tabblad kan je vervolgens je Facebook App ID invoeren.
Facebook App ID toevoegen

Facebook App ID toevoegen

Zorg ervoor dat de cache van je website geleegd is voordat je de Facebook Debugger tool gebruikt om nieuwe tests uit te voeren.

Samenvatting

Hopelijk begrijp je nu iets meer van de Facebook Debugger tool en hoe je deze kan gebruiken om problemen met afbeeldingen op je WordPress website te analyseren en op te lossen. Vergeet niet om de verschillende lagen van caching te legen voordat je de tool gebruikt. Je nieuwe afbeeldingen zouden nu correct weergegeven moeten worden als je ze deelt op Facebook.


Als je dit artikel leuk vond, dan zal onze support je zeker bevallen. Alle hostingpakketten van Kinsta hebben 24×7-ondersteuning van onze ervaren WordPress-ontwikkelaars en -engineers. Chat met hetzelfde team dat onze Fortune 500-klanten ondersteunt. Bekijk onze pakketten