Guide för sociala förhandsvisningar
Open Graph-bilder: testa delade länkar före publicering
Open Graph-bilder avgör hur din sida ser ut när någon delar en länk. Denna guide visar praktisk storlek, taggar, designkontroller, cachefixar och checklista som håller förhandsvisningar användbara.
Snabbt svar
Välj en Open Graph-bild och testa länken innan du delar
För de flesta sidor, börja med en 1200 x 630-bild, håll viktig text och logotyper borta från kanterna, använd absoluta HTTPS-bildadresser och testa slutgiltig URL i plattformens felsökningsverktyg. Det enkla arbetsflödet fångar de flesta trasiga förhandsvisningar.
Förhandsvisningsroll
Behandla Open Graph-bilden som en sidresurs
En Open Graph-bild är inte dekoration. Det är bilden som representerar sidan när sökrobotar skapar en länkförhandsvisning för sociala flöden, chattappar och arbetsverktyg. Den ska matcha titel, beskrivning, synligt sidämne och strukturerad data-bild.
Den säljer klicket
Bild, titel och beskrivning skapar första intrycket innan besökaren når din sida.
Den bör matcha innehållet
En bra förhandsvisningsbild matchar sidans titel, synliga ämne och huvudlöfte istället för att använda en generisk varumärkesbild.
Den hör ihop med SEO-data
Open Graph-bilder, Twitter-kortbilder, kanoniska URL:er och JSON-LD-bilder ska beskriva samma sida.
Den behöver en namngivningsregel
Ett tydligt filnamn och uppdateringsregel förhindrar att gamla cacheminnen och kampanjbilder återkommer senare.
Storleksplan
Välj dimensioner som fungerar i verkliga förhandsvisningar
Olika plattformar beskär och cachar förhandsvisningar på lite olika sätt. En fil på 1200 x 630 är en bra standard för Open Graph, men säkrare är att designa med ett centrerat säkert område och testa slutgiltig URL på viktiga plattformar.
| Plattform eller användning | Praktisk bildplan | Var uppmärksam på | Publiceringskontroll |
|---|---|---|---|
| Allmän Open Graph | Använd 1200 x 630 som praktisk standard för en stor delningsbild. | Små bilder kan se suddiga ut eller visas som mindre miniatyrer. | Förhandsgranska slutgiltig URL i plattformens felsökare innan delning. |
| Facebook och LinkedIn | Använd samma 1,91:1-bildstil om inte sidan behöver en plattformsspecifik resurs. | Kanter kan beskäras olika i flödeslayouter och på enheter. | Håll viktig text och logotyper inom det centrala säkra området. |
| X stort kort | Använd summary_large_image och håll bilden centrerad; X stödjer breda stora kort. | Pyttesmå texter och kantdetaljer kan försvinna när kortet beskärs eller ändrar storlek. | Ange twitter:image och testa med X:s kortverktyg. |
| Chattappar och arbetsverktyg | Håll filen liten och designen enkel eftersom förhandsvisningar ofta visas i kompakta fönster. | Röriga skärmdumpar, långa rubriker och låg kontrast blir snabbt oläsliga. | Klistra in den slutgiltiga länken i de verktyg din målgrupp faktiskt använder. |
Håll huvudbudskapet i mitten av bilden. Kanterna är riskzonen eftersom flödeskort, chattförhandsvisningar och mobillägen kan beskära olika.
HTML
Ange taggar som sökrobotar behöver innan sidan publiceras
Open Graph-taggar hör hemma i HTML-huvudet. Använd absoluta bildadresser, ange bredd och höjd, lägg till användbar alt-text och håll den kanoniska URL:en konsekvent med den sida användarna faktiskt delar.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tagg | Varför det är viktigt | Vanligt misstag |
|---|---|---|
| og:image | Pekar sökrobotar till bilden som ska representera sidan. | Att använda en relativ sökväg eller en bild som blockeras av inloggning, omdirigeringar eller robots-regler. |
| og:image:width / og:image:height | Berättar för plattformar bildens storlek innan de hämtar och granskar filen. | Att utelämna dimensioner och låta varje sökrobot gissa hur förhandsvisningen ska visas. |
| og:image:alt | Beskriver förhandsvisningsbilden för tillgänglighet och ger sökrobotar mer kontext. | Att upprepa sidans titel istället för att beskriva vad som syns i bilden. |
| og:url | Kopplar förhandsvisningen till den kanoniska sidans URL som ska delas. | Att använda en spårnings-, staging- eller kulturfelaktig URL som sidans permanenta identitet. |
| twitter:card / twitter:image | Ger X en tydlig instruktion för stort kort och valfri plattformsspecifik bild. | Att anta att X alltid visar Open Graph-bilden exakt som andra plattformar. |
Om du använder Blazor håller Blazor SEO Metadata-komponent ihop Open Graph-taggar, Twitter-korttaggar, kanoniska URL:er och JSON-LD-metadata.
Designregler
Designa först för ett litet flödeskort
De flesta ser inte hela bilden. De ser ett komprimerat kort i ett flöde, meddelande eller förhandsvisningsruta. Enkla layouter vinner: ett tydligt motiv, läsbar kontrast och ingen pytteliten text som bara fungerar i designfilen.
Arbetsflöde
Ett enkelt arbetsflöde för varje viktig sida
- 1
Skriv förhandsvisningslöftet
Bestäm vad kortet ska säga vid en snabb blick: ämne, fördel, produkt eller artikelvinkel.
- 2
Skapa bilden i planerat bildförhållande
Använd 1200 x 630 för standardfilen och håll viktig information centrerad.
- 3
Optimera filen
Använd JPG eller PNG för sociala bilder, håll filen rimligt liten och undvik synlig komprimeringsskada.
- 4
Ange metadata och schema
Uppdatera Open Graph-taggar, Twitter-korttaggar, kanonisk URL och JSON-LD-bildreferenser samtidigt.
- 5
Publicera med stabilt filnamn
Använd ett meningsfullt filnamn och byt det när du ersätter bilden om plattformscache sannolikt behåller den gamla versionen.
- 6
Testa slutgiltig URL
Kör den offentliga sid-URL:en genom felsökningsverktyg och kontrollera den verkliga förhandsvisningen, inte bara källkoden.
Verktygstips
Använd PixelPress efter att förhandsvisningsstorleken är bestämd
När bildplanen namnger slutfilerna kan PixelPress hjälpa till med lokal konvertering till WebP eller AVIF. Behåll originalen orörda, granska resultatet och uppdatera sedan Open Graph-URL:en.
Felsökning
Uppdatera plattformscache innan du litar på förhandsvisningen
Sociala plattformar cachar förhandsvisningsdata. Om du byter bild men behåller samma URL kan plattformen fortsätta visa den gamla förhandsvisningen. Använd officiella verktyg och byt filnamn eller lägg till versionerad URL vid behov.
Checklista
Checklista för Open Graph-bild innan publicering
Använd denna lista innan en artikel, produktsida, verktygssida eller landningssida publiceras. Den fångar förhandsvisningsproblem som är dyra att upptäcka efter att länken delats.
Vanliga frågor
Vilken storlek ska en Open Graph-bild ha?
Använd 1200 x 630 som praktisk standard för de flesta Open Graph-förhandsvisningar. Det är tillräckligt stort för högupplösta skärmar och nära det vanliga 1,91:1-förhandsvisningsformatet. Testa ändå slutgiltig URL eftersom varje plattform kan beskära eller cacha förhandsvisningar olika.
Kan jag använda samma Open Graph-bild för varje sida?
Du kan, men det är oftast svagare. En generisk varumärkesbild är bättre än ingen bild, men viktiga artiklar, produktsidor och verktyg bör ha en förhandsvisningsbild som matchar den specifika sidan.
Varför visas min gamla Open Graph-bild fortfarande?
Den vanligaste orsaken är plattforms-cache. Använd Facebook Sharing Debugger, LinkedIn Post Inspector eller X:s kortverktyg för att uppdatera URL:en. Om den gamla filen fortsätter visas, publicera den nya bilden med nytt filnamn eller versionerad URL.
Vad är skillnaden mellan og:image och twitter:image?
og:image är standardbilden för Open Graph som används av många plattformar. twitter:image är specifik för X-kort. Om du anger twitter:image kan X använda den istället för att falla tillbaka på og:image.
Ska JSON-LD-bilden matcha Open Graph-bilden?
Den behöver inte vara identisk, men ska berätta samma sidberättelse. Sökmotorsmetadata, Open Graph-taggar, Twitter-kort och JSON-LD ska inte peka på orelaterade eller gamla bilder.
Var passar PixelPress in i Open Graph-bilder?
PixelPress används efter att du bestämt bildstorlek, filnamn och roll. Det kan hjälpa till att konvertera slutfiler lokalt utan att ändra originalen. Sidan behöver fortfarande korrekt metadata och förhandsvisningstest efteråt.