Facebook kan vara ett utmärkt ställe att dela inlägg på och börja marknadsföra ditt innehåll. Ibland kan det dock hända att dina delade länkar inte innehåller rätt utvalda bilder. Facebook kanske tar fram en gammal bild eller ännu värre, ingen bild alls!
Lyckligtvis så kan du enkelt felsöka och åtgärda den här typen av problem med hjälp av ett verktyg som kallas Sharing Debugger. Detta kan rikta in sig på specifika visningsfel eller problem med dina metataggar. Med hjälp av den här programvaran så kan du göra det möjligt för Facebook att annonsera dina inlägg korrekt med rätt bilder.
I det här inlägget så förklarar vi vad Facebook Debugger är och hur du kan använda det för att åtgärda dina WordPress-bilder. Nu sätter vi igång!
Hur Facebooks genomsökare fungerar
Innan du börjar använda Sharing Debugger måste du förstå hur Facebook genomsöker ditt innehåll. När någon använder en social delningsknapp eller kopierar och klistrar in en länk till din sida, så kommer Facebook att genomsöka HTML-koden på din webbplats. Därefter så genereras en miniatyrbild, titel och beskrivning utifrån denna information.
Här är några allmänna krav som din webbplats bör följa för att den här processen ska fungera smidigt:
- Gzip– och deflate-kodning på din server
- Lista egenskaper för öppna grafer inom gränsen för 1 MB av din HTML-fil
- Begränsa sidans laddningstid till några sekunder
- Lägg till genomsökarens användaragentsträngar eller IP-adresser i listan över tillåtna sidor på din webbplats
- Se till att din integritetspolicy är genomsökningsbar
Nu när du vet lite mer om Facebook’s genomsökare och hur den fungerar, så kan vi djupdyka i några problem som du kan stöta på när du delar innehåll på den här plattformen.
Hur Facebook hämtar information
När du delar innehåll med Facebook så cachelagras dina bilder på dess servrar och Content Delivery Network (CDN). Om du gör uppdateringar på din webbplats så kan Facebook fortfarande visa en gammal bild när du vill dela uppdateringen. Detta beror på att den inte hämtar ny information, utan snarare serverar den information som den redan har lagrat i cacheminnet.
Samma sak gäller för information om din länk och själva innehållet. De hämtar vad de kallar ”Open Graph Meta Tags”. Enligt Facebook så gör Open Graph-protokollet en webbsida till ett innehållsrikt objekt i en social graf. Detta är i grund och botten taggar (kod) som ger Facebook information om vad du delar.
Även om du inte känner till Open Graph Meta Tags så använder du dem troligen redan. Om du har installerat populära plugins som Yoast SEO eller Social Warfare så lägger dessa till metataggar åt dig automatiskt bakom kulisserna.
Låt oss ta vår guide för optimering av webbplatsens hastighet som ett exempel. Om vi tittar på källkoden för det inlägget så kan vi se följande uppgifter om Open Graph. Observera: Open Graph använder olika attribut, exempelvis og:title och det vi verkligen bryr oss om i den här handledningen, som är 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" />Detta är den kod på vår webbplats som Facebook tittar på för att avgöra vilken utvald bild, titel och beskrivning som ska visas. När de här uppgifterna är cachelagrade så måste du använda verktyget Sharing Debugger för att uppdatera dina inläggsdetaljer.
Så här använder du Facebook’s Sharing Debugger för att fixa WordPress-bilder
Alla plattformar och verktyg har problem eller egenheter som du måste arbeta dig runt. Verktyget Facebook Sharing Debugger skapades för att hjälpa dig att lösa problem med dina Open Graph-metataggar samt felsöka cachelagring.
Du hittar Sharing Debugger på webbplatsen Meta för utvecklare under Verktyg. Om du vill kryssa ett inlägg är det bara att ange webbadressen och klicka på Felsök:
På Kinsta så har vi nyligen uppdaterat bilden på vår artikel om optimering av webbplatsens hastighet. När vi skriver in den i Facebook Debugger så kommer de först att hämta den cachelagrade informationen som de har på sin sida:
I det här fallet så hämtar Facebook en gammal bild från tiden innan vi uppdaterade inlägget. Vi kan även se att og:image är ett gammalt filnamn. Det här är vad folk faktiskt ser när de delar vårt inlägg.
Steg 1: Rensa WordPress Cache för den webbadressen
För att se till att Facebook hämtar den senaste informationen om ditt inlägg så måste du rensa cacheminnet i WordPress. Om den gamla bilden fortfarande finns i cacheminnet på din webbplats så kommer Sharing Debugger inte att kunna hjälpa dig att lösa problemet. Detta beror på att den bara hämtar den cachelagrade informationen igen.
Med Kinsta’s cachelagring på servernivå rensas cacheminnet för den sidan eller det inlägget automatiskt när ett inlägg uppdateras. Om du använder en annan cache-lösning eller ett plugin från tredje part så bör du läsa deras dokumentation för att se till att du vet hur du rensar din cache.
Om allt annat misslyckas så kan du alltid rensa cacheminnet på hela din WordPress-webbplats. Tänk dock på att din webbplats måste bygga upp cachen igen, vilket kan försämra webbplatsens hastighet.
Om du bestämmer dig för att det är nödvändigt så öppnar du MyKinsta och går till WordPress-webbplatser > Verktyg. Här klickar du på Rensa cache:
Om du fortfarande har problem så kan det hända att din bild även är cachelagrad på ditt CDN. I det här fallet så kan du behöva rensa din CDN-cache.
Steg 2: Skrapa igen i Sharing Debugger
Nu när cachen är rensad för inlägget eller sidan i fråga så måste vi skrapa den igen i verktyget Facebook Debugger. För att göra detta så klickar du på knappen Skrapa igen.
Det kan hända att du stöter på varningar som inte alltid är de mest korrekta. Vi ser exempelvis en varning om att vår bild översteg den maximala storleken på 8 MB och att servern svarade för långsamt. I verkligheten så är vår bild endast 160,63 KB och sidan laddas på mindre än en sekund.
Så nu trycker vi på knappen Skrapa igen för andra gången. Ja, det kan låta konstigt. Men många gånger kan du behöva skrapa två gånger. Efter detta så ser du att den nya bilden nu hämtas med det nya filnamnet som attribut og:image:
Det är viktigt att notera att detta inte uppdaterar bilden för redan delade Facebook-inlägg. Detta påverkar endast inlägg som du eller andra personer delar i efterhand.
Ytterligare tips om Facebook Debugger
Utöver att använda verktyget Sharing Debugger för att uppdatera gamla bilder så kan du även uppdatera själva innehållet (texten) som du ser på dina Facebook-inlägg. Titeln och beskrivningen är båda Open Graph-metataggar. Så om du behöver formulera om något, uppdatera det i WordPress och följ exakt samma steg som ovan.
Fixa bildvarningen ”Egenskaperna är inte tillgängliga ännu”
Att vi ignorerade varningarna ovan betyder inte att jämt är oanvändbara. Det finns faktiskt rekommenderade storlekar när det gäller bilder som du bör använda. Annars så kan det hända att din bild inte visas alls (som du kan se nedan i den här varningen):
Egenskaperna ”og:image” är ännu inte tillgängliga eftersom nya bilder behandlas asynkront. För att säkerställa att delningar av nya webbadresser innehåller en bild, ange dimensionerna med hjälp av taggarna ”og:image:width” och ”og:image:height”.
Den här varningen uppstod eftersom vår bild var för liten. Den minsta bildstorleken som Facebook kräver är 200 x 200 pixlar. Ju större desto bättre när det gäller Facebook-bilder.
Generellt så verkar 1 200 x 630 pixlar fungera bäst för de flesta. Du kan göra en bild större än så, men Facebook kommer att beskära den. När du bestämmer din bildstorlek så ska du ha detta bildförhållande i åtanke.
Om du använder ett plugin som Yoast SEO så rekommenderas det även att du ställer in bilden manuellt. Dina utvalda bilder i ditt WordPress-tema kan ha ett annat bildförhållande eller en annan storlek. Du kanske inte ens använder utvalda bilder!
I det här fallet så kan du ladda upp en bild av annan storlek manuellt med Yoast SEO-pluginet, bara för Facebook. Du behöver bara hitta Yoast SEO’s sociala inställningar för ett inlägg och lägga till en ny Facebook-bild:
När du har laddat upp en bild med rätt storlek så kommer den att fylla i Open Graph Meta Tags som Facebook letar efter. Du kan dessutom fortsätta att ställa in titeln och beskrivningen manuellt om det krävs.
Lägg till egenskapen fb:app_id
Det kan även hända att du får en varning om att det saknas ett 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 så kan detta helt enkelt ignoreras, men det begränsar din möjlighet att använda Facebook insikts-data:
Om du vill ha ytterligare insikts-data så måste du lägga till ditt Facebook App ID på din webbplats. Först så skapar du din Facebook-app. Kopiera sedan ditt Facebook-app-ID från appens instrumentpanel.
När du har skapat en levande Facebook-app så kan du lägga till en metatag för den på din webbplats. Även om Yoast SEO brukade stödja den här processen så har denna funktion nyligen tagits bort. Som ett alternativ så kan du installera det kostnadsfria insticksprogrammet Meta Tag Manager:
För att börja använda det här verktyget så går du till Inställningar > Metatagg-hanterare. Därefter ställer du in Tagg Typ som ”property” och Egenskapsvärde som ”fb:app_id”:
För iInnehållsattributet så klistrar du in ditt Facebook-app-ID. När du trycker på Spara ändringar och rensar cacheminnet så läggs den här informationen till i metataggarna på din webbplats. Nu kan du skrapa webbadressen igen för att se om problemet har lösts!
Sammanfattning
Nu förstår du förhoppningsvis lite mer om verktyget Facebook Sharing Debugger och hur du kan använda det för att felsöka och åtgärda bilder på din WordPress-webbplats. På så sätt så kommer alla dina delade länkar att innehålla korrekta bilder, titlar och beskrivningar.
När du upptäcker en felaktig utvald bild i Sharing Debugger så rensar du alla lager av cachelagring på din webbplats och skrapar igen. Dina nya bilder bör då visas korrekt så att alla kan dela dem på Facebook.
Du kan ofta undvika problem med dina Facebook-länkar genom att regelbundet rensa cacheminnet på din webbplats. Med en hosting-plan på Kinsta så rensas din sidcache automatiskt när du uppdaterar innehållet!
