WhatsApp-länkförhandsvisning visas inte? Åtgärda og:image

En WhatsApp-länkförhandsvisning som inte visas beror nästan alltid på en av fem orsaker: sidan saknar en og:image-tagg, bild-URL:en är inte offentligt hämtningsbar, bilden har fel format så WhatsApp beskär den, beskärningen är okej men förhandsvisningen är inaktuell, eller butikens SEO-plugin skriver ut en konkurrerande tagg. Den här guiden täcker varje orsak, varför du inte kan tvinga WhatsApp att uppdatera, och vad du ska ändra i en WooCommerce-butik.

Det korta svaret

WhatsApp bygger en länkförhandsvisning från sidans Open Graph-taggar. Om og:image saknas, inte går att nå eller inte är formaterad som ett 1200×630-kort, skickas länken som en ren länk, en grå ruta eller en dåligt beskuren produktbild. De flesta WooCommerce-butiker anger aldrig någon og:image för produktsidor — SEO-pluginen faller tillbaka på den statiska utvalda bilden, och en kvadratisk eller hög produktbild får sina sidor eller sin topp avskurna.

1. Det finns ingen og:image-tagg på sidan

Detta är den vanligaste orsaken i en butik. WordPress och WooCommerce genererar inte en og:image för produkt-, kategori- eller butikssidor som standard, och ett tema som inte hanterar Open Graph utelämnar taggen helt.

Åtgärd: visa sidans källkod och bekräfta att en og:image-tagg finns, är absolut (en fullständig https://…-URL, aldrig en relativ sökväg) och renderas på servern – inte injiceras av JavaScript efter inläsning. WhatsApp kör inte ditt JavaScript.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Ett tomt resultat är ditt svar: WhatsApp har ingen bild att visa.

2. Bild-URL:en är inte offentligt hämtningsbar

WhatsApps crawler hämtar bilden på samma sätt som vilken anonym klient som helst. En URL bakom en inloggning, på localhost, på en rå IP-adress eller på en sökväg som blockeras av robots.txt kommer att misslyckas.

Åtgärd: bekräfta att URL:en returnerar en bild utan inloggningsuppgifter.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Du vill ha 200 OK och en Content-Type på image/png eller image/jpeg.

robots.txt-fällan. Sociala crawlers respekterar robots.txt, så en regel som blockerar sökvägen som innehåller dina bilder bryter förhandsvisningen — och den bryts på ett sätt som är lätt att feltolka. Metas debugger rapporterar då "could not be processed as an image. It may be corrupted or may have an invalid format", vilket låter exakt som en trasig rendering. curl återskapar aldrig problemet, eftersom curl ignorerar robots.txt. Om dina bilder serveras från en sökväg som täcks av en Disallow:-regel kommer förhandsvisningen att misslyckas oavsett hur giltig filen är. Vi stötte själva på detta på FastOG:s egen renderingssökväg och åtgärdade det med en Allow:-override med längsta matchning.

3. WhatsApp beskär din produktbild — och att redigera fotot löser inte problemet

Detta är symptomet som handlare beskriver som "mina produktbilder beskärs på WhatsApp", och det är det som är värt att förstå ordentligt.

Plattformen beskär vilken bild den än får till en 1200×630-ram. En produktbild som är kvadratisk eller hög får sina sidor eller sin topp avskuren; en logotyp-ruta sträcks ut. Att manuellt beskära källfotot i Photoshop är en förlorad kamp, eftersom WhatsApp bestämmer beskärningen utifrån kortets bildförhållande, inte utifrån den komposition du valde — och nästa produktbild har en annan form igen.

Lösningen är att ändra bilden du levererar, inte fotot du äger. Skicka ett kort som redan är komponerat i 1200×630, med produktfotot inpassat i det. Då har plattformen inget kvar att beskära.

4. Rätt bildstorlek för WhatsApp-länkförhandsvisningar

Standardstorleken för Open Graph-bilder är 1200×630 pixlar — ett bildförhållande på 1,91:1 — och det är den form varje större plattform, inklusive WhatsApp, förväntar sig. Använder du 1200×630 renderas förhandsvisningen som tänkt; använder du en kvadratisk bild på 1000×1000 beskär WhatsApp den för att fylla ramen.

Håll filen under 5 MB. Ett text-och-produktkort på 1200×630 hamnar normalt mellan 200 KB och 500 KB som PNG.

Se OG-Bildstorlek: 1200×630 förklarat för varför det bildförhållandet blev standard.

5. Förhandsvisningen är inaktuell – och du kan inte tvinga WhatsApp att uppdatera

Om taggen, webbadressen och formatet alla stämmer och förhandsvisningen fortfarande är fel, handlar det om en cache.

WhatsApp cachar förhandsvisningen. Den lagras i mottagarens app, vilket innebär att inget verktyg kan be WhatsApp att uppdatera den – varken en debugger, ett API eller vi. WhatsApp exponerar ingen programmatisk uppdatering överhuvudtaget, så det finns ingen knapp att trycka på. Den som påstår något annat beskriver Facebooks beteende, inte WhatsApps.

Vad du kan göra är att se till att rätt bild väntar nästa gång WhatsApp läser sidan. Det är därför FastOG:s omslags-URL:er är innehållsadresserade: ändrar du produktens titel, pris eller bild så ändras URL:en med den, så nästa läsning kan inte hämta det gamla kortet. När den läsningen sker är upp till WhatsApp.

Två relaterade plattformar beter sig på samma sätt – LinkedIn och X exponerar inte heller något invaliderings-API och läser vanligtvis om inom ungefär en vecka. Deras egna inspektorer kan påskynda det om du har bråttom:

Att använda Facebooks debugger för ett WhatsApp-problem. Det är ändå värt att klistra in URL:en i Sharing Debugger även om den inte kan uppdatera WhatsApp, eftersom den hämtar sidan på samma sätt som WhatsApp gör och rapporterar vad den faktiskt hittade – saknade taggar, oåtkomliga bilder, felaktiga format. Behandla den som en validator för taggarna, inte som en fix för WhatsApp-cachen.

6. Åtgärda detta i en WooCommerce-butik

På WooCommerce är det värt att beskriva arbetsflödet exakt, eftersom felkällan vanligtvis är SEO-pluginen, inte temat:

• Taggen finns inte som standard. WooCommerce levereras utan og:image för product, product_cat eller butikssidan.
• Din SEO-plugin fyller luckan dåligt. Yoast, Rank Math, All in One SEO och SEOPress skriver ut en og:image – men för en produkt använder de den statiska utvalda bilden. Det är ett kvadratiskt eller stående foto, vilket är exakt den bild som WhatsApp sedan beskär.
• Se upp för dubblerade taggar. Om två plugins båda skriver ut og:image väljer plattformen en av dem, och det kanske inte är den du förväntar dig. Visa källkoden och räkna hur många og:image-taggar sidan genererar.

FastOG för WooCommerce tar en annan väg: det renderar ett 1200×630-kort från livekatalogdata (titel, pris, reapris-märke, betyg, produktfotografier) på sin egen renderingstjänst och lämnar sedan över den omslagsbilden till vilken SEO-plugin du redan kör, i stället för att skriva ut en konkurrerande tagg. På så sätt behåller du en enda og:image på sidan, och det är ett kort komponerat för 1.91:1-formatet snarare än ett rå produktfoto.

Eftersom omslagsbilderna skapas från livekatalogdata stämmer priset på kortet överens med priset på sidan, och en rabatterad produkt får ett reapris-märke. När du sparar en produkt ber pluginen också Facebook att läsa sidan på nytt – Facebook är den enda plattformen som erbjuder en programmatisk uppdatering. WhatsApp, LinkedIn och X följer sina egna scheman, och pluginen anger detta tydligt i stället för att lova en uppdatering den inte kan leverera.

• Installation: FastOG för WooCommerce på WordPress.org
• Detaljer och FAQ: WooCommerce-integrationssidan

Kontrollera vad WhatsApp faktiskt kommer att se

Innan du ändrar något, titta på sidan på samma sätt som en crawler gör. Klistra in valfri produkt-URL i Se dina länkar som köpare gör — den hämtar sidan, läser dess nuvarande Open Graph-taggar och visar den resulterande förhandsvisningen som WhatsApp, X och Messenger renderar den, bredvid en FastOG-omslagsbild byggd från samma produktdata. Ingen registrering krävs.

Föredrar du att inspektera råa taggar? Använd Open Graph Meta Tag Generator för att se markeringen, eller kontrollera referensen i og:image visas inte? Så åtgärdar du det.

FAQ

Varför beskärs min produktbild på WhatsApp?

WhatsApp beskär vilken bild som helst till en 1200×630-ram. En kvadratisk eller stående produktbild förlorar sina sidor eller sin topp. Om du serverar ett kort som redan är komponerat i 1200×630 — med produktbilden inpassad i kortet — har plattformen inget att beskära.

Kan jag tvinga WhatsApp att uppdatera en länkförhandsvisning?

Nej. WhatsApp exponerar inget uppdaterings-API eller någon debugger, och den cachade förhandsvisningen finns i mottagarens app. Du kan bara säkerställa att rätt bild väntar på nästa läsning. Facebook är undantaget och erbjuder en programmatisk omskanning.

Varför visar Facebook Sharing Debugger min bild, men WhatsApp visar ingenting?

För att det är separata cacher, och debugger rapporterar om sidans taggar, som båda plattformarna läser. Om debugger visar en korrekt bild men WhatsApp inte visar något, är taggarna korrekta och du tittar på en icke-uppdaterad WhatsApp-cache. Om debugger också visar ingenting, saknas taggen eller så är bilden oåtkomlig — gå igenom orsak 1 och 2.

Använder WhatsApp og:image eller twitter:image?

og:image. Sätt Open Graph-taggarna. twitter:image är för X.

Behöver jag ett plugin, eller kan jag bara lägga till taggen själv?

Du kan själv lägga till en statisk og:image-tagg i ditt tema — det fungerar och är mycket bättre än ingenting. Vad den inte kan göra är att producera ett distinkt kort per produkt utan att manuellt skapa en bild per produkt, och den blir inaktuell varje gång ett pris ändras. Det är då en dynamisk omslagsbild är värd det.

Min webbplats är inte på FastOG. Hjälper detta ändå?

Ja — de fem orsakerna är plattformsbeteende, inte FastOG-beteende. Gå igenom dem i ordning med curl, sidkälla och debugger.

Relaterat

• og:image visas inte? Så här åtgärdar du det
• Direkt WhatsApp-bilduppdatering för WooCommerce
• WooCommerce-prissynkronisering i WhatsApp-förhandsvisningen
• Tvinga en Facebook Open Graph-cacheuppdatering
• OG-bildstorlek: 1200×630 förklarat
• Så här cachar du OG-bilder
• Signerade OG-bild-URL:er
• Open Graph-metatagg-generator