OG-bildstorlek: 1200×630 för länkförhandsvisningar överallt

OG-bildstorleken som fungerar nästan överallt är 1200×630 pixlar, ett liggande förhållande på ungefär 1,91 till 1. Facebook, LinkedIn, X, Slack, Discord och de flesta meddelandeappar bygger sina länkförhandsvisningar av just den här bilden, som anges i sidans og:image-tagg. LinkedIn anger sin länkbild som 1200×627, tillräckligt nära för att en enda fil på 1200×630 duger till båda.

Open Graph 1200×630

1200 × 630

LinkedIns länkbild 1200×627

1200 × 627

Mittkvadrat 630×630

630 × 630

Vad en Open Graph-bild är och hur förhandsvisningar hämtas

Open Graph är en uppsättning meta-taggar i head på en webbsida. När någon klistrar in din länk i ett inlägg eller en chatt skickar plattformen en sökrobot till sidan, läser taggarna, laddar ned bilden och ritar förhandsvisningskortet. Det görs en gång och resultatet cachas sedan, ibland i flera dagar.

Tre detaljer fäller de flesta. Bildadressen måste vara en fullständig URL som börjar med https://, inte en relativ sökväg. Den måste laddas för vem som helst, utan inloggning eller cookiebanner i vägen. Och taggarna måste finnas i den HTML som din server skickar, eftersom de flesta sökrobotar inte kör JavaScript, så taggar som ett skript lägger till efter att sidan laddats syns aldrig.

<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />

Så designar du en OG-bild som går att läsa som miniatyr

En bild på 1200×630 ses sällan i 1200 pixlar. I ett flöde på en mobil krymper den till en remsa lika bred som skärmen, och i en chatt kan den vara ännu mindre. Designa för den lilla versionen: en kort rubrik, stor text, stark kontrast och inget viktigt i hörnen.

• Tre till sju ord. Sidans titel förkortad till sin poäng, inte hela titeln.
• Stor text. På ytan 1200×630 förblir en rubrik på cirka 64 till 96 pixlars höjd läsbar när förhandsvisningen krymper.
• Marginaler på cirka 60 pixlar eller mer, så att inget rör en kant som en plattform kan runda av eller beskära.
• En liten avsändarsignatur, till exempel en logotyp eller ditt sidnamn, på samma plats i varje bild.
• En enhetlig bakgrund så att folk känner igen dina länkar innan de läser dem.

Kontrast betyder mer vid små storlekar, inte mindre. Kontrollera att din rubrik klarar kraven i färgkontrast, och om bakgrunden är en gradient, testa kontrasten där orden faktiskt sitter. Text på gradient visar hur du hittar den lugna zonen.

En OG-bild för hela sajten, eller en per sida

Varje sajt behöver en standardbild för sidor som inte har något bättre. Men en standardbild på varje sida gör att alla delade länkar ser likadana ut, och ingen kan se av förhandsvisningen vilken sida det gäller. De sidor som delas mest förtjänar en egen.

Att göra en separat bild för varje artikel för hand skalar inte. De flesta moderna ramverk kan rendera en OG-bild från en mall när sidan byggs eller först efterfrågas; dynamiska OG-bilder går igenom tillvägagångssättet.

Så testar du dina länkförhandsvisningar

1. 1

   Kontrollera taggarna

   Öppna sidan, visa dess källkod och sök efter og:image. Står den inte i källkoden ser sökrobotarna den inte.

2. 2

   Öppna bildadressen

   Klistra in og:image-URL:en i ett privat webbläsarfönster. Den ska laddas direkt, över https, utan inloggning.

3. 3

   Använd plattformens inspektör

   LinkedIn Post Inspector visar hur LinkedIn ser en URL och uppdaterar sin cache. Facebook har en liknande Sharing Debugger.

4. 4

   Skicka den till dig själv

   Klistra in länken i en chattapp och i ett inläggsutkast. Titta på förhandsvisningen på en mobil, där den är minst.

5. 5

   Tvinga fram en ny cache efter ändringar

   Om en gammal bild fortsätter dyka upp, ge den nya bilden en ny adress, till exempel genom att lägga till ?v=2 i URL:en, och inspektera sedan igen.

Filformat och storlek

Använd PNG för designade kort med text och plan färg, och JPEG för fotografiska bilder. Undvik SVG, som de flesta sökrobotar inte godtar för förhandsvisningar, och var försiktig med nyare format som vissa plattformar kanske inte läser. Håll filen liten så att sökroboten hämtar den snabbt; ett designat kort behöver sällan vara stort. Lite korn hindrar en gradient från att få band när en plattform komprimerar om den.

I Gradiently är Länkförhandsvisning (Open Graph) 1200×630 en av de inbyggda storlekarna, så du kan lägga upp ett inlägg igen som en förhandsvisning med Kopiera till storlekar och behålla en enda look över inlägget och länken. Vid en lansering är OG-bilden bara en punkt på en längre lista; grafik för lanseringsdagen har hela checklistan.