Uanset om du er en blogger, social media marketingmedarbejder eller endda bare en lille virksomhedsejer, vil du sandsynligvis støde på spørgsmålet om Facebook ikke viser det korrekte billede fra dit WordPress-websted. Nogle gange kan Facebook trække et gammelt billede eller endda værre, slet ingen billeder! Heldigvis kan du nemt fejlsøge og rette disse typer af problemer ved hjælp af et værktøj kaldet Facebook Debugger. Tjek nogle fælles scenarier nedenfor, som du måske løber ind i, og hvordan du retter dem.

Sådan Facebook Henter Information

Når du deler ting til WordPress, cacher Facebook dine billeder på deres servere og CDN (læs mere her på, hvad der er en CDN, og hvordan det virker). Du kan tænke på dette på samme måde som caching fungerer på dit websted, nogle gange skal du rydde cachen for at få tingene til at fungere igen. Det samme gælder nogle gange for Facebook. Hvis du foretager opdateringer på dit websted, kan Facebook stadig vise et gammelt billede, når du går til at dele det. Det skyldes, at det ikke henter ny information, men tjener snarere de oplysninger, som den allerede har cachelagret.

Det samme gælder for oplysninger om dit link og indhold selv. De henter, hvad de kalder Open Graph Meta Tags. Ifølge Facebook kan Open Graph-protokollen gøre det muligt for enhver webside at blive et rigt objekt i en social graf. Dybest set er disse tags (koder), der giver Facebook info om, hvad du deler.

Er du ikke sikker på, om du bruger Open Graph Meta Tags på dit websted? Ja, det er du sikkert, du kan bare ikke vide det? Hvis du bruger populære plugins som Yoast SEO eller Social Warfare, tilføjer disse faktisk automatisk disse tags til dig bag kulisserne.

Lad os tale vores Web Speed ​​Optimization Guide som et eksempel. Hvis vi ser på kilden til det pågældende indlæg, kan vi se følgende data vedrørende Open Graph. Bemærk: Åbn graf bruger forskellige attributter, såsom og:title og den, vi virkelig er interesseret i for denne vejledning, er og:image. Dette er koden på vores hjemmeside, som Facebook ser på, for at bestemme hvilket udvalgt billede, titel og beskrivelse der skal vises.

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

Brug af Facebook Debugger

Som med enhver platform eller et værktøj, vil det få problemer eller quirks, som du skal arbejde rundt om, især hvis du ikke følger retningslinjerne for bedste praksis. Facebook 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 Facebook Debugger på Facebook-udviklerens websted under Tools & Support. Hvis du er den, der deler meget indhold på Facebook, er dette et godt link at bogmærke til fremtidig reference.

Facebook Debugger værktøj

Facebook Debugger værktøj

For at gennemgå et indlæg skal du blot indtaste URL’en og klikke på “Fejlfinding.” Vi vil faktisk bruge en live-sag i vores eksempel. Vi har lige for nylig opdateret billedet på vores hjemmesides hurtigoptimeringsartikel. Når vi indtaster det i Facebook Debugger, trækker det først de cachelagrede oplysninger, som de har på deres ende (som vist nedenfor).

Dette er, hvad folk faktisk ser, når de deler vores indlæg. Men i dette tilfælde trækker det et gammelt billede fra, før vi opdaterede stillingen? Vi kan også se, at og: billedet er det gamle filnavn.

Gamle billede og URL vist i Facebook Debugger

Gamle billede og URL vist i Facebook Debugger

Så hvad kan vi gøre? Der er to ting, der skal gøres. Følg trinene herunder.

Trin 1 – Ryd WordPress Cache for den URL

Det allerførste, vi skal gøre for at sikre, at Facebook tager de nyeste oplysninger, er at rydde cachen på vores WordPress-websted selv. Det er rigtigt, teknisk set er der to lag af caching, der kunne være involveret her. Hvis det gamle billede stadig er cached på dit websted, vil Facebook Debugger ikke kunne hjælpe med at løse dit problem, da det simpelthen genoptager de cachelagrede oplysninger.

For så vidt som WordPress caching går, er vi OK (og kan fortsætte til trin 2), fordi cache på Kinsta-serverniveau, når en post opdateres, ryddes cachen for den pågældende side eller post automatisk. Læs mere om, hvordan Kinsta caching virker. Hvis du bruger en anden caching-løsning eller et tredjeparts plugin, vil du gerne se på deres dokumentation for at sikre, at du ved, hvordan du rydder din cache for en webadresse. Her er et par links til nogle af de populære caching-løsninger:

Hvis alt andet fejler, kan du altid rydde cachen på hele dit WordPress-websted (som vist nedenfor). Af ydeevne, er det dog normalt ikke anbefalet, da dit websted bliver nødt til at genopbygge cachen og nedbryde dine belastningstider i mellemtiden.

 Slet WordPress cache

Slet WordPress cache

Og hvis du stadig har problemer, kan dit billede også blive cachelagret på din CDN. I så fald skal du muligvis rense din CDN-cache.

Trin 2 – Skrabe igen i Facebook Debugger

Nu hvor cachen er ryddet for den pågældende post eller side, skal vi skrabe det igen i Facebook Debugger-værktøjet. Så vi indtaster webadressen og klikker på knappen “Scrabe igen”.

Scrape again i Facebook Debugger værktøjer

Skrabe igen i Facebook Debugger værktøjer

Du kan støde på en advarsel. I vores erfaring er disse ikke altid det mest præcise. For eksempel ser vi en advarsel, der siger, at vores billede overskred den maksimale størrelse på 8 MB, eller serveren var for langsom til at reagere. Først og fremmest er vores billede ikke i nærheden af ​​den størrelse, det er faktisk kun 160,63 KB. For det andet er vores server lynhurtig, og hele siden selv laster på under 1 sekund.

 Facebook advarsel

Facebook advarsel

Så det er her, vi simpelthen rammer knappen “Scrape Again” for en anden gang. Ja, det lyder måske mærkeligt. Men mange gange må du måske skrabe to gange. Det tager kun et par sekunder. Og boom! Sådan der. Vi kan se nedenfor, at det nu trækker vores nyvalgte billede, og hvis vi ser på og:image  er det faktisk det nye filnavn.

Nyt billede i Facebook Debugger værktøj

Nyt billede i Facebook Debugger værktøj

Det er vigtigt at bemærke, at dette ikke vil opdatere billedet til det allerede delte Facebook-indlæg. Dette påvirker kun indlæg, som du eller andre mennesker deler efter faktum.

Yderligere Facebook Debugger Tips

Du kan bruge Facebook Debugger-værktøjet til ikke kun at opdatere gamle billeder, men også indholdet (tekst), du ser 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 følge de nøjagtige samme trin ovenfor.

Kæmper med nedetid og WordPress-problemer? Kinsta er hostingløsningen designet til at spare din tid! Tjek vores funktioner

De leverede ‘og: image’ egenskaber er endnu ikke tilgængelige,

Bare fordi vi ignorerede advarslerne ovenfor betyder det ikke, at de ikke altid er nyttige. Faktisk er der anbefalede størrelser, når det kommer til billeder, som du skal bruge. Ellers kan der ske dårlige ting. Såsom et billede, der slet ikke vises (som vist nedenfor i denne advarsel).

De leverede ‘og: image’ egenskaber er endnu ikke tilgængelige, fordi nye billeder behandles asynkront. For at sikre, at aktier i nye webadresser indeholder et billede, angiv dimensionerne ved hjælp af ‘og: billede: bredde’ og ‘og: billede: højde’ -tags.

 Facebook Debugger - billede for lille

Facebook Debugger – billede er for småt

Ovennævnte opstod fordi vores billede var for småt. Den mindste billedstørrelse, Facebook kræver, er 200 x 200 pixel. Normalt jo større jo bedre når det kommer til Facebook-billeder. Vi sammensætter et indlæg med alle de anbefalede billedstørrelser for sociale medier. 1.200 x 630 pixels synes at fungere bedst for de fleste. Det er okay at de også bliver størrer, faktisk var vores billede på vores indlæg i det første eksempel 1460 x 730. Husk bare, at Facebook vil beskære noget større, og så vedligeholdelse af dette billedforhold er en af ​​de vigtigste dele.

Hvis du bruger et plugin som Yoast SEO, kan det også anbefales at manuelt indstille billedet. Måske er dine fremhævede billeder på dit WordPress-tema et andet billedforhold eller størrelse. Eller måske bruger du ikke engang specielle billeder!

I dette tilfælde giver Yoast SEO-plugin dig mulighed for manuelt at uploade et billede med forskellige størrelser, bare til Facebook, som vil udfylde disse Open Graph Meta Tags. Du kan også manuelt indstille titlen og beskrivelsen, hvis det er nødvendigt.

Yoast SEO Facebook social box

Yoast SEO Facebook social box

Følgende nødvendige egenskaber mangler: fb: app_id

Du kan også se følgende advarsel om et manglende Facebook App ID. Det er vigtigt at bemærke, at dette ikke forstyrrer evnen til at dele indlæg på Facebook på nogen måde. En masse gange kan dette simpelthen ignoreres. Det begrænser dog din evne til at bruge Facebook Insights data.

The following required properties are missing: fb:app_id

Følgende nødvendige egenskaber mangler: fb: app_id

Følgende nødvendige egenskaber mangler: fb: app_id

Hvis du vil have yderligere oplysninger om Insights, skal du tilføje dit Facebook App ID til dit websted. Her er instruktioner nedenfor om, hvordan du tilføjer det i WordPress ved hjælp af Yoast SEO plugin.

  1. Opret din Facebook App: https://developers.facebook.com/docs/apps/register (dette er helt gratis)
  2. Kopier dit Facebook App ID fra app dashboardet.
  3. I dit WordPress dashboard skal du klikke på “SEO” på venstre side.
  4. Under fanen “Facebook” kan du indtaste din Facebook App ID.
Tilføj Facebook App ID

Tilføj Facebook App ID

Sørg for at rydde dit websteds cache, før du tester igen i Facebook Debugger-værktøjet.

Resumé

Forhåbentlig forstår du lidt mere om Facebook Debugger-værktøjet, og hvordan du kan bruge det til fejlfinding og reparation af billeder på dit WordPress-websted. Husk at rydde alle lag af caching og derefter skal du skrabe det væk. Dine nye billeder skal derefter vises korrekt, så alle kan dele på Facebook.

12
Delinger