Slik bruker du det
- Skriv inn og:title og og:description som du bruker eller planlegger å bruke på siden.
- Lim inn hele URL-en til og:image. Verktøyet laster det inn og rapporterer den faktiske pikselstørrelsen.
- Legg til side-URL eller domene, sammenlign deretter forhåndsvisningene av stort og lite kort, og fiks eventuelle advarsler.
Slik fungerer det
Når noen deler en lenke, henter de fleste sosiale nettverk og chatteapper siden og leser Open Graph-taggene: og:title, og:description, og:image og og:url. De bygger deretter et kort. Et bredt bilde på omtrent 1,91:1 gir vanligvis et stort kort med bildet øverst; et lite eller kvadratisk bilde gir ofte et kompakt kort med et miniatyrbilde ved siden av teksten.
Dette verktøyet viser to generiske kortstiler for å hjelpe deg med å vurdere lengde og bildebeskjæring. Det sjekker bildets naturlige størrelse etter at nettleseren har lastet det: under 200 × 200 px hopper mange apper over bildet, under 600 × 315 px pleier de å bruke den lille layouten, og et forhold langt fra 1,91:1 betyr beskjæring. 1200 × 630 px er den bredt anbefalte størrelsen fordi den forblir skarp på skjermer med høy tetthet.
Forhåndsvisningen kan ikke vise nøyaktig hva en bestemt app vil vise. Apper varierer i hvor mange linjer med tittel og beskrivelse de viser, noen ignorerer beskrivelsen, og de fleste mellomlagrer en forhåndsvisning en stund etter første deling, så endringer i taggene dine vises kanskje ikke med en gang. Mange plattformer tilbyr sitt eget feilsøkingsverktøy for å oppdatere mellomlageret.
Eksempler
Et skjermbilde brukt som og:image
Et skjermbilde på 1440 × 900 har et sideforhold på 1,6:1. Verktøyet advarer om sideforholdet: i et stort kort ville toppen og bunnen bli beskåret. Eksporter en versjon på 1200 × 630 for å unngå overraskelser.
En logo som eneste bilde
En logo på 180 × 180 er under 200 × 200 px, så mange apper ville ikke vist noe bilde. Bruk et større, bredt banner som inkluderer logoen i stedet.
Sjekke tittellengde
En og:title på 90 tegn brytes over tre linjer i forhåndsvisningen av det store kortet. Korter den ned til omtrent 60 tegn for å holde kortet ryddig i de fleste apper.
Ofte stilte spørsmål
Hvorfor ser lenken min annerledes ut på Facebook, LinkedIn og X?
Hver plattform gjengir kort med sin egen layout, beskjæring og tekstgrenser, og noen viser beskrivelsen mens andre ikke gjør det. Denne forhåndsvisningen er en generell tilnærming, ikke en kopi av noen plattforms design.
Jeg endret og:image, men det gamle bildet vises fortsatt. Hvorfor?
Plattformer mellomlagrer forhåndsvisninger av lenker. Bruk plattformens eget delingsfeilsøkingsverktøy for å hente siden på nytt, eller vent til hurtigbufferen utløper. Å endre bildefilnavnet hjelper også.
Kan jeg bruke et SVG- eller WebP-bilde?
SVG støttes ikke av de fleste plattformer. WebP fungerer i mange apper, men ikke alle; JPG eller PNG er det tryggeste valget.
Hvorfor kan ikke verktøyet laste inn bildet mitt?
URL-en kan kreve pålogging, peke til en HTML-side i stedet for et bilde, eller serveren kan blokkere forespørsler fra andre nettsteder. Hvis nettleseren ikke kan laste den her, kan kanskje ikke en sosial plattforms søkerobot det heller.
Personvern
Teksten du skriver inn, forblir i nettleseren din. For å sjekke bildet henter nettleseren det direkte fra URL-en du oppgir (uten å sende referrer), slik at serveren ser en vanlig bildeforespørsel. Ingenting sendes til TIG Tools.