Oavsett om du är en bloggare, sociala medie-marknadsförare, eller bara en småföretagare, kommer du någon gång förmodligen stöta på problemet med att Facebook inte visar rätt bild från din WordPress-webbplats. Ibland kan Facebook hämta en gammal bild eller ännu värre, ingen bild alls! Tack och lov kan du dock enkelt felsöka och åtgärda dessa typer av problem med hjälp av ett verktyg som heter Facebook Debugger. Kolla in några vanliga scenarier nedan som du kan stöta på och hur du fixar dem.

Hur Facebook hämtar information

När du delar saker till WordPress cachar Facebook dina bilder på sina servrar och CDN (Läs mer här vad ett CDN är och hur det fungerar). Du kan tänka på detta som hur cachning fungerar på din webbplats, ibland måste du rensa cacheminnet för att få allt att fungera igen. Detsamma gäller ibland för Facebook. Om du gör uppdateringar på din webbplats kan Facebook fortfarande visa en gammal bild när du går för att dela den. Detta beror på att det inte hämtar ny information, utan snarare levererar den information som det redan har cachat.

Detsamma gäller för information om din länk och själva innehållet. De hämtar vad de kallar Open Graph-metataggar. Enligt Facebook möjliggör Open Graph-protokollet att en webbsida kan bli ett rich object i en social graph. I grund och botten är detta taggar (kod) som delar info om vad du delar med Facebook.

Inte säker på om du använder Open Graph-metataggar på din webbplats? Tja, det gör du troligen, du kanske bara inte vet om det. 😉  Om du använder populära plugins som Yoast SEO eller Social Warfare, lägger dessa faktiskt automatiskt till dessa taggar åt dig bakom kulisserna.

Låt oss ta vår webbplatshastighetsoptimeringsguide som ett exempel. Om vi tittar på källkoden för det inlägget kan vi se följande data om Open Graph. Notera: Open Graph använder olika attribut, såsom og:titel och den vi verkligen bryr oss om för denna handledning, som är og:image. Det här är koden på vår webbplats som Facebook tittar på för att bestämma vilken bild, titel och beskrivning som ska visas.

<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" />

Att använda Facebook Debugger

Som med alla plattformar eller verktyg kommer det att ha problem eller egenheter som du måste jobba runt, särskilt om du inte följer de riktlinjer som fastställts för bästa praxis. Facebook Debugger-verktyget skapades för att hjälpa dig att lösa problem med dina Open Graph-metataggar, samt att felsöka cachning.

På Facebook-utvecklarsidan hittar du Facebook Debugger under Verktyg & Support. Om du är någon som delar mycket innehåll på Facebook är detta en bra länk att bokmärka för framtida referens.

Facebook Debugger-verktyget

Facebook Debugger-verktyget

För att genomsöka ett inlägg, skriv bara in webbadressen och klicka på ”Felsök”. Vi kommer faktiskt att använda ett fall från verkligheten i vårt exempel. Vi har nyligen uppdaterat bilden på vår webbplatshastighetsoptimeringsartikel. När vi går in i Facebook Debugger kommer det först att hämta den cachade informationen som det har från sin sida (som du kan se nedan).

Det här är vad folk faktiskt ser när de delar vårt inlägg. Men i det här fallet hämtar det en gammal bild från innan vi uppdaterade inlägget. Vi kan också se att og:image är det gamla filnamnet.

Gammal bild och webbadress i Facebook Debugger

Gammal bild och webbadress i Facebook Debugger

Så vad kan vi göra? Det finns två saker som måste göras. Följ stegen nedan.

Steg 1 – Rensa WordPresscachen för den webbadressen

Det allra första vi behöver göra för att Facebook ska hämta den senaste informationen är att rensa cacheminnet på själva WordPress-webbplatsen. Det stämmer, tekniskt sett finns det två lager av cachning som kan vara inblandade här. Om den gamla bilden fortfarande är cachad på din webbplats kommer Facebook Debugger inte att kunna hjälpa till att åtgärda problemet eftersom det helt enkelt kommer att hämta cachad information igen.

När det gäller WordPresscachning är allt okej dock, (och vi kan gå vidare till steg 2), eftersom Kinstas cachning på servernivå rensar cacheminnet för ett inlägg eller en sida om de uppdateras. Läs mer om hur Kinsta hanterar cachning. Om du använder en annan cachningslösning eller ett tredjepartsplugin behöver du undersöka deras dokumentation för att se till att du vet hur du rensar cacheminnet för en webbadress. Här är några länkar till några av de populära cachningslösningarna:

Om allt annat misslyckas kan du alltid rensa cacheminnet på hela din WordPress-webbplats (se nedan). Men av prestandaskäl rekommenderas det vanligtvis inte eftersom din webbplats måste bygga om cacheminnet, vilket försämrar dina laddningstider medan det pågår.

Rensa WordPresscache

Rensa WordPresscache

Och om du fortfarande har problem kan din bild också cachas på ditt CDN. I så fall kan du behöva rensa din CDN-cache.

Steg 2 – Skrapa igen i Facebook Debugger

Nu när cachen rensats för inlägget eller sidan i fråga måste vi skrapa den igen i Facebook Debugger-verktyget. Så vi anger webbadressen och klickar på knappen ”Skrapa igen”.

Skrapa igen i Facebook Debugger-verktyget

Skrapa igen i Facebook Debugger-verktyget

Du kan stöta på en varning. Enligt vår erfarenhet är dessa inte alltid de mest exakta. Till exempel ser vi en varning som säger att vår bild överskred den maximala storleken på 8 MB eller att servern var för långsam för att svara. Först och främst är vår bild inte i närheten av den storleken, den är faktiskt bara 160,63 KB. För det andra är vår server blixtsnabb och hela sidan laddas på under 1 sekund.

Facebookvarning

Facebookvarning

Så här klickar vi helt enkelt på ”skrapa igen”-knappen för en andra gång. Ja, det kanske låter konstigt. Men många gånger kan du behöva skrapa två gånger. Det tar bara några sekunder. Och pang! Så där ja. Vi kan se nedan att det nu hämtar vår nya utvalda bild och om vi tittar på og:image-attributet är det faktiskt det nya filnamnet.

Ny bild i Facebook Debugger-verktyget

Ny bild i Facebook Debugger-verktyget

Det är viktigt att notera att detta inte kommer att uppdatera bilden för redan delade Facebook-inlägg. Detta påverkar bara inlägg där du eller andra personer delar efter att ändringen skett.

Ytterligare Facebook Debugger-tips

Använd Facebook Debugger-verktyget för att inte bara uppdatera gamla bilder utan även innehållet (text) som du ser på dina Facebook-inlägg. Titeln och beskrivningen är båda Open Graph-metataggar. Så om du behöver omformulera något, uppdatera det i WordPress, och följ exakt samma steg ovan.

De angivna ”og:image”-egendomarna är ännu inte tillgängliga

Dessutom, bara för att vi ignorerade varningarna ovan betyder inte att de aldrig är användbara. Faktum är att det finns rekommenderade storlekar när det gäller bilder som du borde använda. Annars kan dåliga saker hända. Såsom att en bild inte visas alls (vilket framgår nedan i denna varning).

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

De angivna egendomarna ”og:image” är ännu inte tillgängliga eftersom nya bilder behandlas asynkront. För att säkerställa att delningar av nya webbadresser inkluderar en bild, ange måtten med hjälp av ”og:image:width” och ”og:image:height”-taggarna.

Facebook Debugger - bild för liten

Facebook Debugger – bild för liten

Ovanstående inträffade eftersom vår bild var för liten. Minsta bildstorlek som Facebook kräver är 200 x 200 pixlar. Vanligtvis gäller desto större desto bättre för Facebookbilder. Vi satte ihop ett inlägg med alla rekommenderade bildstorlekar för sociala medier. 1 200 x 630 pixlar verkar fungera bäst för de flesta människor. Det är okej att välja större bilder också, faktum är att vår bild på vårt inlägg i det första exemplet var 1 460 x 730. Kom bara ihåg att Facebook kommer att beskära något som är större än så, så det viktigaste är att upprätthålla det bildförhållandet.

Om du använder ett plugin som Yoast SEO, kan det också rekommenderas att manuellt ställa in bilden. Kanske är dina utvalda bilder på ditt WordPress-tema ett annat bildförhållande eller storlek. Eller kanske du använder du inte ens utvalda bilder!

I det fallet låter Yoast SEO-plugin dig manuellt laddat upp en bild i annan storlek bara för Facebook, som kommer att fylla Open Graph-metataggarna. Du kan också manuellt ställa in titel och beskrivning om det behövs.

Yoast SEO Facebook sociala ruta

Yoast SEO Facebook sociala ruta

Följande obligatoriska egendomar saknas: fb:app_id

Du kan också se följande varning tala om ett saknat Facebook App-ID. Det är viktigt att notera att detta inte stör möjligheten att dela inlägg på Facebook på något sätt. Många gånger kan detta helt enkelt ignoreras. Men, det begränsar din förmåga att använda data från Facebook Insights.

Följande obligatoriska egendomar saknas: fb:app_id

Följande obligatoriska egendomar saknas: fb:app_id

Följande obligatoriska egendomar saknas: fb:app_id

Om du vill ha ytterligare Insights-data måste du lägga till ditt Facebook App-ID till din webbplats. Här är instruktioner nedan om hur du lägger till det i WordPress med hjälp av Yoast SEO-plugin.

  1. Skapa din Facebook-App: https://developers.facebook.com/docs/apps/register (detta är helt gratis)
  2. Kopiera ditt Facebook-App ID från App-panelen.
  3. I din WordPresspanel klickar du på ”SEO” på vänster sida.
  4. Under ”Facebook”-fliken kan du ange ditt Facebook App-ID.
Lägg till Facebook App-ID

Lägg till Facebook App-ID

Se till att rensa webbplatsens cache innan du testar på nytt i Facebook Debugger-verktyget.

Sammanfattning

Förhoppningsvis förstår du lite mer om Facebook Debugger-verktyget och hur du kan använda det för att felsöka och fixa bilder på din WordPress-webbplats. Kom ihåg att rensa alla lager av cachning och skrapa sedan igen. Dina nya bilder borde då visas korrekt för alla att dela på Facebook.


Om du tyckte om denna tutorial, då kommer du att älska vår support. Alla Kinsta’s hosting planer inkluderar dygnet runt-support från våra rutinerade WordPressutvecklare och ingenjörer. Chatta med samma team som hjälper Fortune 500s kunder. Kolla in våra paket