Facebook kan være et godt sted at dele indlæg og begynde at reklamere for dit indhold. Du vil dog måske bemærke, at nogle af dine delte links ikke indeholder de rigtige featured images. Nogle gange trækker Facebook måske et gammelt billede eller endnu værre, slet ingen overhovedet!
Heldigvis kan du nemt fejlfinde og løse disse typer problemer ved hjælp af et værktøj kaldet Sharing Debugger. Dette kan målrette specifikke visningsfejl eller problemer med dine metatags. Ved hjælp af denne software kan du sætte Facebook i stand til at annoncere dine indlæg korrekt med de rette billeder.
I dette indlæg forklarer vi, hvad Facebook Debugger er, og hvordan du kan bruge det til at rette dine WordPress-billeder. Lad os komme i gang!
Sådan fungerer Facebook Crawler
Før du begynder at bruge Sharing Debugger, skal du forstå, hvordan Facebook crawler dit indhold. Hver gang nogen bruger en social deleknap eller kopierer og indsætter et link til din side, gennemtrawler Facebook HTML-koden på dit websted. Derefter genereres et miniaturebillede, en titel og en beskrivelse på baggrund af disse oplysninger.
Her er nogle generelle krav, som dit websted bør følge for at sikre, at denne proces forløber gnidningsløst:
- Gzip– og deflate-kodning i din server
- Liste over open graph-egenskaber inden for 1 MB af din HTML
- Begræns sidens indlæsningstid til få sekunder
- Tilføj crawlerens brugeragentstrenge eller IP-adresser til listen over tilladelser på dit websted
- Sørg for, at din privatlivspolitik kan crawles
Nu hvor du ved lidt mere om Facebook-crawleren, og hvordan den fungerer, kan vi dykke ned i nogle af de problemer, du kan støde på ved at dele indhold på denne platform.
Sådan henter Facebook oplysninger
Når du deler indhold med Facebook, lagrer de dine billeder i cache på deres servere og Content Delivery Network (CDN). Hvis du foretager opdateringer på dit websted, viser Facebook muligvis stadig et gammelt billede, når du vil dele det. Det skyldes, at den ikke henter nye oplysninger, men i stedet serverer de oplysninger, den allerede har gemt i cachen.
Det samme gælder for oplysninger om selve dit link og indhold. De henter det, de kalder “Open Graph Meta Tags”. Ifølge Facebook forvandler Open Graph-protokollen en webside til et rigt objekt i en social graf. I bund og grund er der tale om tags (kode), der fortæller Facebook oplysninger om det, du deler.
Selv hvis du ikke kender Open Graph Meta Tags, bruger du dem sandsynligvis allerede. Hvis du har installeret populære plugins som Yoast SEO eller Social Warfare, tilføjer disse automatisk metatags for dig bag kulisserne.
Lad os tage vores guide til optimering af webstedshastighed som et eksempel. Hvis vi kigger på kildekoden til dette indlæg, kan vi se følgende data vedrørende Open Graph. Bemærk: Open Graph bruger forskellige attributter, såsom og:title og den, vi virkelig bekymrer os om i denne vejledning, som er 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" />Dette er den kode på vores websted, som Facebook kigger på for at bestemme, hvilket featured billede, titel og beskrivelse der skal vises. Når disse data er cachet, skal du bruge Sharing Debugger-værktøjet til at opdatere dine indlægsoplysninger.
Sådan bruger du Facebooks Sharing Debugger til at rette WordPress-billeder
Enhver platform eller værktøj vil have problemer eller særheder, som du skal arbejde rundt om. Facebook Sharing Debugger-værktøjet blev oprettet for at hjælpe dig med at løse problemer med dine Open Graph Meta Tags samt fejlfinding af caching.
Du kan finde Sharing Debugger på Meta for Developers-webstedet under Tools. Hvis du vil crawle et indlæg, skal du blot indtaste URL-adressen og klikke på Debug:
Hos Kinsta har vi netop for nylig opdateret billedet på vores artikel om optimering af webstedshastighed. Når vi indtaster det i Facebook Debugger vil det først trække de cachede oplysninger, som de har i deres ende:
I dette tilfælde henter Facebook et gammelt billede fra før vi opdaterede indlægget. Vi kan også se, at og:image er et gammelt filnavn. Det er det, som folk faktisk ser, når de deler vores indlæg.
Trin 1: Ryd WordPress Cache for den pågældende URL
For at sikre, at Facebook henter de nyeste oplysninger om dit indlæg, skal du rydde cachen i WordPress. Hvis det gamle billede stadig er cachet på dit websted, kan Sharing Debugger ikke hjælpe dig med at løse problemet, da den blot vil hente de cachede oplysninger igen.
Med Kinsta-caching på serverniveau ryddes cachen for den pågældende side eller det pågældende indlæg automatisk, hver gang et indlæg opdateres. Hvis du bruger en anden caching-løsning eller et plugin fra en tredjepart, skal du kigge i deres dokumentation for at sikre dig, at du ved, hvordan du rydder din cache.
Hvis alt andet fejler, kan du altid rydde cachen på hele dit WordPress-websted. Husk dog på, at dit websted skal genopbygge cachen igen, hvilket kan forringe din websteds hastighed.
Hvis du beslutter dig for, at det er nødvendigt, skal du åbne MyKinsta, navigere til dit WordPress-websted og derefter klikke på Værktøjer. Klik her på Ryd cache:
Hvis du stadig har problemer, kan dit billede også være cachet på dit CDN. I dette tilfælde skal du muligvis rydde din CDN-cache.
Trin 2: Scrape igen i Sharing Debugger
Nu hvor cachen er ryddet for det pågældende indlæg eller den pågældende side, skal vi scrape det igen i Facebook Debugger-værktøjet. For at gøre dette skal du klikke på knappen Scrape Again (skrab igen).
Du kan støde på advarsler, som ikke altid er de mest præcise. Vi ser f.eks. en advarsel om, at vores billede overskred den maksimale størrelse på 8 MB, og at serveren var for langsom til at reagere. I virkeligheden er vores billede kun 160,63 KB, og siden indlæses på under 1 sekund.
Så det er her, vi trykker på Scrape Again-knappen for anden gang. Ja, det lyder måske mærkeligt. Men mange gange kan du have brug for at scrape to gange. Herefter vil du se, at den nu trækker det nye featured image med det nye filnavn som og:image -attributten:
Det er vigtigt at bemærke, at dette ikke opdaterer billedet for allerede delte Facebook-indlæg. Dette påvirker kun indlæg, som du eller andre personer deler efterfølgende.
Yderligere Facebook Debugger-tips
Du kan bruge værktøjet Sharing Debugger til ikke kun at opdatere gamle billeder, men også det indhold (tekst), du kan se på dine Facebook-indlæg. Titlen og beskrivelsen er begge Open Graph Meta Tags. Så hvis du har brug for at omformulere noget, skal du opdatere det i WordPress og nøjagtig følge de samme trin ovenfor.
Rette advarslen om “egenskaber er endnu ikke tilgængelige” Billedadvarsel
Bare fordi vi ignorerede advarslerne ovenfor, betyder det heller ikke, at de ikke altid er nyttige. Faktisk er der anbefalede størrelser, når det kommer til billeder, som du bør bruge. Ellers vises dit billede måske slet ikke (som det ses nedenfor i denne advarsel):
De angivne ‘og:image’-egenskaber er endnu ikke tilgængelige, fordi nye billeder behandles asynkront. For at sikre, at delinger af nye URL’er indeholder et billede, skal du angive dimensionerne ved hjælp af tags ‘og:image:width’ og ‘og:image:height’.
Denne advarsel opstod, fordi vores billede var for lille. Den mindste billedstørrelse, som Facebook kræver, er 200 x 200 pixels. Normalt er det bedre, jo større det er, når det drejer sig om Facebook-billeder.
Generelt virker 1.200 x 630 pixel bedst for de fleste mennesker. Du kan godt lave et billede større end dette, men Facebook vil beskære det. Når du bestemmer din billedstørrelse, skal du huske dette formatforhold.
Hvis du bruger et plugin som Yoast SEO, anbefales det også, at du manuelt indstiller billedet. Dine featured images på dit WordPress-tema kan have et andet formatforhold eller en anden størrelse. Måske bruger du slet ikke featured images!
I dette tilfælde giver Yoast SEO-plugin’et dig mulighed for manuelt at uploade et billede af en anden størrelse kun til Facebook. Du skal blot finde Yoast SEO’s sociale indstillinger for et indlæg og tilføje et nyt Facebook-billede:
Når du uploader et billede med den korrekte størrelse, vil det udfylde Open Graph Meta Tags, som Facebook leder efter. Derudover kan du fortsætte med manuelt at indstille titlen og beskrivelsen, hvis det er nødvendigt.
Tilføj egenskaben fb:app_id
Du kan også se en advarsel om et manglende Facebook App ID. Det er vigtigt at bemærke, at dette ikke på nogen måde forstyrrer muligheden for at dele indlæg på Facebook. Mange gange kan dette blot ignoreres, men det begrænser din mulighed for at bruge Facebook Insights-data:
Hvis du vil have disse ekstra Insights-data, skal du tilføje dit Facebook App ID til dit websted. Først skal du oprette din Facebook-app. Derefter skal du kopiere dit Facebook App ID fra app-dashboardet.
Når du har oprettet en live Facebook-app, kan du tilføje et metatag til den på dit websted. Selv om Yoast SEO plejede at understøtte denne proces, har den for nylig fjernet denne funktionalitet. Som et alternativ kan du installere det gratis plugin Meta Tag Manager:
For at begynde at bruge dette værktøj skal du gå til Indstillinger > Meta Tag Manager. Derefter skal du indstille Tag Type som “property” og Property Value som “fb:app_id”:
Indsæt dit Facebook App ID i Content Attribute (indholdsattribut). Når du trykker på Gem ændringer og rydder din cache, vil disse oplysninger blive tilføjet til dit websteds metatags. Nu kan du skrabe URL’en igen for at se, om problemet er løst!
Oversigt
Forhåbentlig forstår du nu lidt mere om Facebook Sharing Debugger-værktøjet, og hvordan du kan bruge det til at fejlfinde og rette billeder på dit WordPress-websted. På denne måde vil alle dine delte links indeholde de korrekte billeder, titler og beskrivelser.
Når du bemærker et forkert featured billede i Sharing Debugger, skal du rydde alle lag af caching på dit websted og scrape igen. Dine nye billeder bør derefter vises korrekt, så alle kan dele dem på Facebook.
Ofte kan du undgå problemer med dine Facebook-links ved regelmæssigt at rydde cachen på dit websted. Med et Kinsta-hostingabonnement bliver din sidecache automatisk renset, når du opdaterer indholdet!
