Facebook kan een geweldige plek zijn om artikelen te delen en reclame te maken voor je content. Je kunt echter merken dat sommige van je gedeelde links niet de juiste uitgelichte afbeeldingen bevatten. Soms gebruikt Facebook een oude afbeelding of nog erger, helemaal geen afbeelding!
Gelukkig kun je dit soort problemen eenvoudig opsporen en oplossen met een hulpmiddel dat de Sharing Debugger heet. Hiermee kun je specifieke weergavefouten of problemen met je metatags aanpakken. Met behulp van deze software kun je Facebook in staat stellen je berichten goed te adverteren met de juiste afbeeldingen.
In dit artikel leggen we uit wat de Facebook Debugger is en hoe je het kunt gebruiken om je WordPress afbeeldingen te repareren. Laten we beginnen!
Hoe de Facebook Crawler werkt
Voordat je de Sharing Debugger gaat gebruiken, moet je begrijpen hoe Facebook je inhoud crawlt. Wanneer iemand een sociale deelknop gebruikt of een link naar je pagina kopieert en plakt, zal Facebook de HTML van je website crawlen. Vervolgens genereert het op basis van deze informatie een miniatuurafbeelding, titel en beschrijving.
Hier zijn enkele algemene eisen waaraan je site moet voldoen om dit proces soepel te laten verlopen:
- Zorg voor Gzip en deflate de codering in je server
- Vermeld Open Graph eigenschappen binnen de 1 MB van je HTML
- Beperk de laadtijd van pagina’s tot een paar seconden
- Voeg de user agent strings of IP adressen van de crawler toe aan de allow lijst van je site
- Zorg ervoor dat je privacybeleid crawlbaar is
Nu je wat meer weet over de Facebook crawler en hoe die werkt, laten we eens duiken in enkele problemen waarmee je te maken kunt krijgen bij het delen van content op dit platform.
Hoe Facebook informatie ophaalt
Wanneer je content deelt met Facebook, slaat het je afbeeldingen op op zijn servers en Content Delivery Network (CDN). Als je updates maakt op je site, kan Facebook nog steeds een oude afbeelding tonen als je die gaat delen. Dat komt omdat Facebook geen nieuwe informatie ophaalt, maar de informatie levert die al in de cache staat.
Hetzelfde geldt voor informatie over je link en de content zelf. Ze halen wat ze noemen ‘Open Graph Meta Tags’ op. Volgens Facebook maakt het Open Graph protocol van een webpagina een rich object in een sociale grafiek. In principe zijn dit tags (code) die Facebook informatie vertellen over wat je deelt.
Zelfs als je niet bekend bent met Open Graph Meta Tags, gebruik je ze waarschijnlijk al. Als je populaire plugins hebt geïnstalleerd, zoals Yoast SEO of Social Warfare, dan voegen deze achter de schermen automatisch metatags voor je toe.
Laten we onze gids voor website-optimalisatie als voorbeeld nemen. Als we de broncode van die post bekijken, zien we de volgende gegevens met betrekking tot Open Graph. Opmerking: Open Graph gebruikt verschillende attributen, zoals og:title en degene waar het om draait in deze tutorial, namelijk og:image.
<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®" />
<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" />Dit is de code op onze site waar Facebook naar kijkt om te bepalen welke uitgelichte afbeelding, titel en beschrijving getoond moeten worden. Zodra deze gegevens in de cache staan, moet je de Sharing Debugger tool gebruiken om je berichtgegevens bij te werken.
Zo gebruik je de Sharing Debugger van Facebook om WordPress afbeeldingen te repareren
Elk platform of hulpmiddel zal problemen of eigenaardigheden hebben waar je omheen moet werken. De Facebook Sharing Debugger tool is gemaakt om je te helpen bij het oplossen van problemen met je Open Graph Meta Tags, en bij het oplossen van problemen met caching.
Je vindt de Sharing Debugger op de Meta for Developers site onder Tools. Om een bericht te crawlen hoef je alleen maar de URL in te voeren en op Debug te klikken:
Bij Kinsta hebben we onlangs de afbeelding van ons artikel over website-snelheidsoptimalisatie bijgewerkt. Wanneer we het invoeren in de Facebook Debugger zal het eerst de gecachete informatie ophalen die zij aan hun kant hebben:
In dit geval gebruikt Facebook een oude afbeelding van voordat we het artikel bijwerkten. We kunnen ook zien dat de og:image een oude bestandsnaam is. Dit is wat mensen dus in de praktijk zien als ze ons bericht delen op Facebook.
Stap 1: Wis de WordPress cache voor die URL
Om ervoor te zorgen dat Facebook de laatste informatie over je bericht gebruikt, moet je de cache in WordPress wissen. Als de oude afbeelding nog in de cache van je site staat, kan de Sharing Debugger je niet helpen je probleem op te lossen, want dan wordt de informatie uit de cache gewoon opnieuw opgehaald.
Met server-level caching van Kinsta wordt de cache voor die pagina of post automatisch gewist wanneer een bericht wordt bijgewerkt. Als je een andere cachingsoplossing of externe plugin gebruikt, zul je in hun documentatie moeten kijken om er zeker van te zijn dat je weet hoe je de cache moet wissen.
Als al het andere faalt, kun je altijd de cache van je hele WordPress site wissen. Houd er echter rekening mee dat je site de cache opnieuw moet opbouwen, wat de snelheid van je site kan verminderen.
Als je besluit dat het nodig is, open dan MyKinsta, navigeer naar je WordPress site en klik dan op Tools. Klik hier op Cache wissen:
Als je nog steeds problemen hebt, kan je afbeelding ook in de cache van je CDN staan. In dat geval moet je misschien je CDN cache legen.
Stap 2: Scrape opnieuw in de Sharing Debugger
Nu de cache van het bericht of de pagina in kwestie is gewist, moeten we opnieuw scrapen in de Facebook Debugger tool. Klik daarvoor op de knop Scrape Again.
Je kunt waarschuwingen tegenkomen die niet altijd de meest nauwkeurige zijn. We zien bijvoorbeeld een waarschuwing dat onze afbeelding de maximale grootte van 8 MB heeft overschreden en dat de server te traag was om te reageren. In werkelijkheid is onze afbeelding slechts 160,63 KB groot en laadt de pagina in minder dan 1 seconde.
Dit is dus het moment waarop we voor de tweede keer op de knop Scrape Again drukken. Ja, het klinkt misschien vreemd. Maar vaak moet je twee keer scrapen. Hierna zul je zien dat de nieuwe uitgelichte afbeelding nu wordt opgehaald met de nieuwe bestandsnaam als og:image attribuut:
Het is belangrijk op te merken dat dit de afbeelding voor reeds gedeelde Facebook berichten niet zal bijwerken. Dit heeft alleen invloed op berichten die jij of andere mensen achteraf delen.
Aanvullende tips Facebook Debugger
Je kunt de Sharing Debugger tool gebruiken om niet alleen oude afbeeldingen bij te werken, maar ook de content (tekst) die je op je Facebook berichten ziet. De titel en beschrijving zijn beide Open Graph Meta Tags. Dus als je iets opnieuw moet formuleren, werk het dan bij in WordPress, en volg precies dezelfde stappen hierboven.
De afbeeldingswaarschuwing “the properties are not yet available” oplossen
Omdat we hierboven de waarschuwingen hebben genegeerd, betekent het niet per se dat ze van pas kunnen komen. In de praktijk zijn er aanbevolen afmetingen voor afbeeldingen die je zou moeten gebruiken. Anders verschijnt je afbeelding misschien helemaal niet (zoals hieronder in deze waarschuwing):
De verstrekte ‘og:image’ eigenschappen zijn nog niet beschikbaar omdat nieuwe afbeeldingen asynchroon worden verwerkt. Om ervoor te zorgen dat shares van nieuwe URL’s een afbeelding bevatten, moet je de afmetingen specificeren met ‘og:image:width’ en ‘og:image:height’ tags.
Deze waarschuwing verscheen omdat onze afbeelding te klein was. De minimale afbeeldingsgrootte die Facebook vereist is 200 x 200 pixels. Meestal geldt: hoe groter, hoe beter als het om Facebook afbeeldingen gaat.
In het algemeen lijkt 1.200 x 630 pixels het beste te werken voor de meeste mensen. Je kunt een afbeelding groter maken dan dit, maar Facebook zal hem bijsnijden. Houd bij het bepalen van je afbeeldingsgrootte rekening met deze beeldverhouding.
Als je een plugin als Yoast SEO gebruikt, is het ook aan te raden om de afbeelding handmatig in te stellen. Je uitgelichte afbeeldingen op je WordPress thema kunnen een andere verhouding of grootte hebben. Misschien gebruik je zelfs geen uitgelichte afbeeldingen!
In dat geval kun je met de Yoast SEO plugin handmatig een afbeelding van een ander formaat uploaden, specifiek voor Facebook. Je hoeft alleen maar de sociale instellingen van Yoast SEO voor een bericht te vinden en een nieuwe Facebook afbeelding toe te voegen:
Zodra je een afbeelding met de juiste afmetingen uploadt, zal deze de Open Graph Meta Tags vullen die Facebook zoekt. Daarnaast kun je de titel en beschrijving indien nodig handmatig blijven instellen.
De fb:app_id eigenschap toevoegen
Je ziet misschien ook een waarschuwing over een ontbrekende Facebook App ID. Het is belangrijk op te merken dat dit de mogelijkheid om berichten op Facebook te delen op geen enkele manier belemmert. Vaak kan deze dus gewoon genegeerd worden, maar beperkt wel je mogelijkheden om Facebook Insights gegevens te gebruiken:
Wil je deze extra Insights gegevens, dan moet je je Facebook App ID aan je site toevoegen. Maak eerst je Facebook app aan. Kopieer dan je Facebook App ID uit het dashboard van de app.
Zodra je een live Facebook app hebt ingesteld, kun je er een metatag voor toevoegen aan je site. Hoewel Yoast SEO dit proces vroeger ondersteunde, heeft het deze functionaliteit onlangs verwijderd. Als alternatief installeer je de gratis plugin Meta Tag Manager:
Om deze tool te gaan gebruiken, ga je naar Settings > Meta Tag Manager. Stel vervolgens het Tag Type in als ‘property’ en de Property Value als ‘fb:app_id’:
Plak voor het Content Attribute je Facebook App ID. Zodra je op Save Changes drukt en je cache leegmaakt, wordt deze informatie toegevoegd aan de metatags van je site. Nu kun je de URL opnieuw scrapen om te zien of het probleem is opgelost!
Samenvatting
Hopelijk begrijp je nu iets meer van de Facebook Sharing Debugger tool en hoe je die kunt gebruiken om problemen op te lossen en afbeeldingen op je WordPress site te repareren. Zo zullen al je gedeelde links de juiste afbeeldingen, titels en beschrijvingen bevatten.
Nadat je een onjuiste uitgelichte afbeelding in de Sharing Debugger hebt opgemerkt, wis dan alle lagen van caching op je website en scrape opnieuw. Je nieuwe afbeeldingen zouden dan correct moeten verschijnen zodat iedereen ze op Facebook kan delen.
Vaak kun je problemen met je Facebook links voorkomen door regelmatig de cache van je site te wissen. Met een Kinsta hostingpakket wordt de cache van je pagina automatisch gewist wanneer je de content bijwerkt!
