Størrelse på OG-bilde: 1200×630 som fungerer overalt

Riktig størrelse på OG-bilde som fungerer nesten overalt, er 1200×630 piksler, et liggende sideforhold på omtrent 1.91 til 1. Facebook, LinkedIn, X, Slack, Discord og de fleste meldingsapper bygger lenkeforhåndsvisningene sine fra dette ene bildet, angitt i og:image-taggen på siden din. LinkedIn oppgir lenkebildet sitt som 1200×627, nært nok til at én fil på 1200×630 dekker begge.

Open Graph 1200×630

1200 × 630

LinkedIn-lenkebilde 1200×627

1200 × 627

Midtkvadrat 630×630

630 × 630

Hva et Open Graph-bilde er, og hvordan forhåndsvisninger hentes

Open Graph er et sett med meta-tagger i head på en nettside. Når noen limer inn lenken din i et innlegg eller en chat, sender plattformen en robot til siden, leser taggene, laster ned bildet og tegner forhåndsvisningskortet. Den gjør dette én gang og mellomlagrer så resultatet, noen ganger i flere dager.

Tre detaljer lurer de fleste. Bildeadressen må være en fullstendig URL som starter med https://, ikke en relativ sti. Den må lastes for hvem som helst, uten en innlogging eller et informasjonskapselbanner i veien. Og taggene må ligge i HTML-en serveren din sender, fordi de fleste roboter ikke kjører JavaScript, så tagger som legges til av et skript etter at siden er lastet, blir aldri sett.

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

Design et OG-bilde som leses i miniatyrstørrelse

Et bilde på 1200×630 sees sjelden i 1200 piksler. I en feed på en telefon krymper det til en stripe i skjermens bredde, og i en chat kan det bli enda mindre. Design for den lille versjonen: en kort overskrift, stor skrift, sterk kontrast og ingenting viktig i hjørnene.

• Tre til sju ord. Sidetittelen kortet ned til poenget, ikke hele tittelen.
• Stor skrift. På lerretet på 1200×630 holder en overskrift på rundt 64 til 96 piksler i høyden seg lesbar når forhåndsvisningen krymper.
• Marger på omtrent 60 piksler eller mer, så ingenting berører en kant som en plattform kan avrunde eller beskjære.
• Én liten merkevaresignatur, som et ordmerke eller navnet på nettstedet ditt, på samme sted i hvert bilde.
• En fast bakgrunn, så folk kjenner igjen lenkene dine før de leser dem.

Kontrast betyr mer i små størrelser, ikke mindre. Sjekk at overskriften oppfyller forholdstallene i fargekontrast, og er bakgrunnen en gradient, tester du kontrasten der ordene faktisk står. Tekst på gradient viser hvordan du finner den rolige sonen.

Ett OG-bilde for hele nettstedet, eller ett per side

Alle nettsteder trenger et standardbilde til sider som ikke har noe bedre. Men et standardbilde på hver side gjør at hver delte lenke ser lik ut, og ingen kan se av forhåndsvisningen hvilken side det er. Sidene folk deler mest, fortjener sitt eget.

Å lage et eget bilde for hver artikkel for hånd skalerer ikke. De fleste moderne rammeverk kan gjengi et OG-bilde fra en mal når siden bygges eller først blir etterspurt. Dynamiske OG-bilder går gjennom fremgangsmåten.

Slik tester du lenkeforhåndsvisningene dine

1. 1

   Sjekk taggene

   Åpne siden, vis kildekoden og søk etter og:image. Står den ikke i kildekoden, ser ikke robotene den.

2. 2

   Åpne bildeadressen

   Lim inn URL-en fra og:image i et privat nettleservindu. Den skal lastes direkte, over https, uten innlogging.

3. 3

   Bruk plattformens inspeksjonsverktøy

   LinkedIn Post Inspector viser hvordan LinkedIn ser en URL, og oppdaterer mellomlageret. Facebook har et lignende verktøy, Sharing Debugger.

4. 4

   Send den til deg selv

   Lim inn lenken i en chatapp og i et utkast til et innlegg. Se på forhåndsvisningen på en telefon, der den er minst.

5. 5

   Tøm mellomlageret etter endringer

   Dukker et gammelt bilde stadig opp, gir du det nye bildet en ny adresse, for eksempel ved å legge til ?v=2 i URL-en, og inspiserer på nytt.

Filformat og filstørrelse

Bruk PNG til designede kort med skrift og flate farger, og JPEG til fotografiske bilder. Unngå SVG, som de fleste roboter ikke godtar til forhåndsvisninger, og vær forsiktig med nyere formater som noen plattformer kanskje ikke leser. Hold filen lett, så roboten henter den raskt. Et designet kort trenger sjelden å være stort. Litt korn hindrer at en gradient får fargebånd når en plattform komprimerer den på nytt.

I Gradiently er Lenkeforhåndsvisning (Open Graph) 1200×630 en av de innebygde størrelsene, så du kan sette et innlegg opp på nytt som en forhåndsvisning med kopier til størrelser og beholde ett uttrykk på tvers av innlegget og lenken. Ved en lansering er OG-bildet ett punkt på en lengre liste. Grafikk til lanseringsdagen har hele sjekklisten.