Så gör du en bra delningsbild för din webbplats

Vad är en delningsbild?

Du skickar en artikel till någon. Mottagaren kan se enbart adressen, fel bild eller ett tydligt kort med bild och rubrik. Bilden på kortet kallas delningsbild, förhandsvisningsbild för länkar eller Open Graph-bild.

Den hör till förhandsvisningen av en webblänk. Ett Instagram-inlägg, den lilla webbplatsikonen i webbläsarfliken (favicon) och artikelns synliga omslagsbild har andra uppgifter. Samma original kan användas, men beskärning, text och inställningar behöver passa varje användning.

När en tjänst skapar förhandsvisningen läser den sidans rubrik, beskrivning och bildadress. Dessa bakgrundsuppgifter kallas metadata. Open Graph märker upp dem så att andra tjänster kan känna igen dem. Oftast fyller du i uppgifterna i webbplatsens inställningar utan att skriva kod. MDN:s guide till metadata förklarar skillnaden mot sidans synliga innehåll.

Alla appar visar inte samma förhandsvisning. De kan beskära bilden, korta rubriken eller utelämna kortet. Webbplatsen bestämmer därför inte hela utseendet. Testa länken i den tjänst där du tänker dela den.

Vilken storlek passar en delningsbild?

Börja med 1200 × 630 pixlar om din webbplats inte rekommenderar annat. Det betyder 1200 små bildpunkter på bredden och 630 på höjden: nästan dubbelt så bred som hög. Det är ett praktiskt förslag, inte ett krav i alla tjänster.

Till exempel rekommenderar LinkedIns anvisningar 1200 × 627 för förhandsvisningen av ett inlägg från en LinkedIn-sida. Förvräng inte bilden för några få pixlars skillnad. Följ tjänstens egna råd när du gör en version för en viss plats.

Bildmått och filstorlek är olika saker. Pixlar anger måtten; kilobyte (kB) och megabyte (MB) anger hur mycket utrymme filen tar. Det finns inget gemensamt storleksmål. Jämför kopior och välj den mindre om bild och text förblir tydliga. Kontrollera också tjänstens maxgräns.

Om originalet är 1600 × 1600, planera först en liggande beskärning. Att direkt ändra till 1200 × 630 kan sträcka motivet om verktyget inte behåller proportionerna. Vår guide till storleksändring utan förvrängning förklarar skillnaden mellan beskärning och ändrade mått.

Gör bilden begriplig i liten storlek

Kortet syns ofta på en telefon bland annat innehåll. Små detaljer kan försvinna. Bestäm vad mottagaren ska förstå direkt: artikelns ämne, typen av evenemang eller produkten bakom länken.

”Bättre produktbilder” kan fungera bättre i bilden än hela artikelrubriken med underrubrik. Ofta visas rubriken också utanför bilden. Försök inte få med allt; viktig information ska även finnas som text på sidan.

Välj färger som gör texten lätt att urskilja. Lämna utrymme runt motivet och håll ansikten, produkter och viktiga ord borta från kanterna. Det finns ingen säker yta som gäller överallt. Titta både på hela bilden och på en snävare beskärning kring mitten.

Visa utkastet ungefär 300 pixlar brett eller litet på telefonen. Det är ett läsbarhetstest, inte ett tekniskt krav. Kan du läsa utan att zooma och känna igen ämnet? Annars kortar du texten, förstorar bokstäverna eller tar bort detaljer.

I en webbutik bör produkten kännas igen direkt. En evenemangsbild kan visa stämningen, men datum och anmälan ska också stå i sidtexten. Logotypen hjälper igenkänningen; samma stora logotyp på varje artikel säger lite om ämnet.

Välj format och komprimera en kopia

JPG är en praktisk start för fotografier. PNG passar när JPG gör bokstäver eller kanter oskarpa. Välj bakgrunden medvetet: en genomskinlig bild visas mot appens bakgrund, där en ljus logotyp kan försvinna.

WebP och AVIF kan passa bilder på webbplatsen. Att webbläsaren stöder dem betyder inte att tjänsten som hämtar förhandsvisningar gör det. Börja här med JPG eller PNG. Kontrollera andra format i den tjänst du ska använda.

Gör kompositionen i ditt designprogram. Använd Pixilos beskärningsverktyg för utsnittet och verktyget för storleksändring för måtten. Om en bestämd filgräns gäller kan du prova att minska till en maximal filstorlek. Kontrollera den nedladdade filen. Verktygen väljer inte delningsbild i din webbplats åt dig.

Komprimering minskar hur mycket plats filen tar. Behåll originalet och arbeta med en kopia. Jämför bokstäver, logotypens kanter och färgövergångar. Om kvaliteten försämras, börja om från originalet med mindre komprimering. En suddig kopia får inte tillbaka detaljer genom ny bearbetning. Vår jämförelse av JPG och PNG hjälper dig välja för text och foton.

Lägg till bilden i WordPress eller en webbplatsbyggare

Öppna artikeln i webbplatsens administration. Leta efter delningsbild, Social image eller Open Graph image. Fältet kan finnas under sökmotoroptimering, ofta kallat SEO. Gör så här:

1. Öppna rätt sida. Redigera den artikel eller sida vars länk du vill dela.
2. Välj bild för just sidan. Ladda upp filen eller välj den i mediebiblioteket, där tidigare uppladdade bilder finns.
3. Kontrollera rubrik och standardbild. Ändringen ska gälla denna sida, inte byta hela webbplatsens gemensamma delningsbild.
4. Spara och publicera. Att bara ladda upp filen ändrar inte sidans förhandsvisningsuppgifter.
5. Testa den offentliga länken. Använd kontrollerna nedan innan du delar.

I WordPress kan ditt SEO-tillägg erbjuda inställningen. Ett tillägg ger WordPress extra funktioner. Till exempel visar Yoasts guide dess inställningar för sociala bilder. Menyer och förhandsvisningar kan bero på version och abonnemang. Kontrollera det som redan finns innan du installerar ett nytt tillägg.

Artikelns omslagsbild kan användas som delningsbild, beroende på tema och tillägg. Yoasts tekniska beskrivning förklarar hur det väljer bild. En standardbild är en reserv för sidor utan egen bild. Ge viktiga artiklar en ämnesanpassad bild om standardbilden inte säger vad de handlar om.

Hittar du inte inställningen, ge webbplatsansvarig sidans adress och bildfilen. Be personen ställa in delningsbilden och kontrollera de publicerade uppgifterna. Metadata i artikelns synliga textfält hamnar inte på rätt plats i koden.

Valfritt: lägg till bilden i sidans kod

Hoppa över avsnittet om du valde bilden i inställningarna. Det är för dig eller webbplatsansvarig vid direkt kodredigering. HTML beskriver sidans struktur. I head-delen finns bakgrundsuppgifter som inte syns som artikeltext. Lägg följande uppgifter där. og:image anger bildadressen; övriga Open Graph-fält beskriver sidan. I Open Graph-specifikationen förklaras fälten. Exemplet gäller en artikel. För en vanlig presentationssida använder du website som typ.

Byt domän, adresser, rubrik, beskrivning och bildfil mot dina egna uppgifter. Anger du 1200 × 630 måste bilden verkligen ha de måtten.

<meta property="og:type" content="article">
<meta property="og:title" content="Bättre produktbilder för din butik">
<meta property="og:description" content="Förbered tydliga bilder och kontrollera dem på din produktsida.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="En blå mugg mot en ljus bakgrund med texten Bättre produktbilder.">

Använd en fullständig HTTPS-adress med webbplatsnamn och filsökväg. Sidans adress hör till og:url och bildens adress till og:image. Sidans adress ska motsvara dess avsedda huvudadress. Kontrollera att varje språkversion har rätt rubrik och egen adress.

Beskriv motivet och viktig text i bilden under og:image:alt. Det är bildens alternativa text, även kallad alt-text. Den ersätter inte beskrivningen av en synlig artikelbild. Används samma bild där, fyll i en lämplig beskrivning separat.

Kontrollera först om temat eller ett tillägg redan skapar fälten och uppdatera den befintliga inställningen. Flera bilder kan vara avsiktliga, men motstridiga gamla och nya uppgifter gör resultatet oklart. Håll huvudbild och mått tillsammans.

Uppgifterna måste finnas i publicerad HTML när tjänsten hämtar sidan. Ett tillägg som görs senare i webbläsaren kan missas. Har webbplatsen separata inställningar för X-kort, kontrollera den bilden också: en Open Graph-ändring uppdaterar inte andra fält.

Testa den publicerade länken innan du delar

Klistra in sidans offentliga adress i ett nytt inläggs- eller meddelandeutkast. Vänta på förhandsvisningen. Stämmer bild och rubrik? Går texten att läsa? Testa i rätt tjänst utan att skicka utkastet. Fortsätt med kontrollerna om bilden saknas eller är fel.

Öppna den publicerade sidans källkod i webbläsaren och sök efter og:image. Funktionen har olika namn i olika webbläsare. Kontrollera bildadress, rubrik och sidadress, eller be webbplatsansvarig göra det. En utkastadress från administrationen testar inte den offentliga länken.

För LinkedIn finns Post Inspector. För Facebook används Sharing Debugger. Klistra in sidadressen och starta kontrollen; inloggning kan krävas. Titta sedan på ett nytt inläggsutkast. Du behöver inte publicera något för att testa.

Anteckna sidans adress, bildens adress och tjänsten. Fungerar länken bara på ett ställe hjälper dessa uppgifter mer än att byta bild flera gånger. LinkedIns cacheanvisningar säger att uppdatering med Post Inspector gäller nya inlägg; befintliga förhandsvisningar ändras inte.

Varför saknas bilden eller visas fel version?

Skilj på tre orsaker: sidan anger fel bild, tjänsten kan inte hämta filen eller visar en tidigare sparad förhandsvisning. Högre bildkvalitet reparerar ingen trasig adress. Att uppdatera webbläsaren tömmer inte en annan tjänsts cache.

Öppnar bildadressen en webbsida kan sökvägen vara fel eller filen saknas. Vissa webbplatser visar då startsidan. Ge webbplatsansvarig båda adresserna och be personen kontrollera att den riktiga bildfilen nås utan inloggning.

Cache är en sparad kopia av en sida eller bild. Den gör laddningen snabbare men kan bli gammal. Ett CDN levererar filer från flera servrar och kan också spara kopior. Be vid behov om uppdatering av webbplatsens kopior. Kontrollera först sidan och bilden offentligt och begär sedan ny hämtning i delningstjänsten. Att tömma din webbläsares cache uppdaterar inte de andra kopiorna.

Du kan spara den nya bilden med ett annat tydligt namn, till exempel product-photos-social-v2.jpg, och ändra referensen på sidan. Det skiljer filerna åt men tvingar inte tjänsten att läsa sidan igen eller ändra tidigare meddelanden.

Byt inte artikelns permanenta adress i onödan och stäng inte av skydd för att prova. Ge webbplatsansvarig adressen och felmeddelandet. Personen kan undersöka vad som hindrar åtkomsten till just detta offentliga innehåll.

Exempel: en tydlig förhandsvisning av en produktbildsguide

Tänk dig en butiksguide med ett kvadratiskt foto av en mugg och en lång rubrik om produktbilder för olika enheter. Den automatiska liggande beskärningen kapar handtaget. Det här är ett exempel på arbetssätt, inte ett uppmätt resultat.

1. Gör en liggande version. Börja med 1200 × 630, visa hela muggen och lämna utrymme runt den.
2. Korta bildens text. Prova ”Bättre produktbilder”. Behåll hela rubriken i artikeln och i förhandsvisningens rubrikinställning.
3. Spara och kontrollera. Jämför JPG och PNG: filstorlek, bokstäver och produktkanter i liten förhandsvisning.
4. Ställ in sidans bild. Välj filen i artikelns delningsinställningar. Spara och publicera.
5. Testa länken. Kontrollera filen, siduppgifterna och en ny förhandsvisning i tjänsten.

Versionen kan passa artikellänken utan att vara bäst för Instagram eller en bred omslagsbild. Behåll originaldesignen för framtida varianter i stället för att redigera den färdiga JPG-filen flera gånger.

Hur hänger delningsbilder ihop med SEO?

Bilden hjälper någon att förstå länken. Att lägga till og:image garanterar inte bättre placeringar i sökresultat. Sökresultatets bild, sidans synliga bild och länkbilden är olika användningar. En inställning styr inte alla.

Välj ett beskrivande filnamn och en rubrik som stämmer med sidan. Beskriv bilden för människor utan att stapla sökord. Googles SEO-startguide tar upp användbart innehåll och begripliga bilder. Vår guide till alt-texter och filnamn hjälper med beskrivningar av synliga sidbilder.

En mindre delningsbild gör inte automatiskt artikelns synliga huvudbild snabbare. Använder sidan en annan fil, optimera den separat. Bedöm webbplatsen utifrån de bilder som faktiskt laddas.

Vanliga frågor

Kräver Open Graph 1200 × 630?

Nej. Det är här en praktisk startstorlek. Open Graph beskriver hur adress och mått anges; mottagartjänsten bestämmer visning och gränser.

Kan omslagsbilden också vara delningsbild?

Ja, om kompositionen fungerar och sidan anger rätt fil. En separat version hjälper för stående eller kvadratiska bilder och text som blir oläslig i litet format.

Behöver varje sida en egen bild?

Inte alltid. En standardbild fungerar som reserv. Egna bilder är särskilt användbara för delade guider, produkter och evenemang vars ämne inte framgår av enbart logotypen.

Varför ändras inte bilden i ett gammalt inlägg?

Tjänsten kan behålla den ursprungliga förhandsvisningen. Kontrollera ett nytt utkast och tjänstens uppdateringsråd. Att byta fil på webbplatsen garanterar inte att redan skickade kort ändras.

Lägger en Dela-knapp till bilden i förhandsvisningen?

Nej. Den underlättar delningen men ersätter inte sidans uppgifter. Mottagartjänsten avgör om ett länkkort hämtas och visas. Att dela bildfilen direkt är en annan funktion.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)