Derfor ser lenkeforhåndsvisningen din feil ut, og slik fikser du den med Open Graph

Du deler lenken til den nye landingssiden din, og forhåndsvisningen kommer opp uten bilde, med tittelen fra forsiden, eller med en banner fra for to kampanjer siden. Selve siden er i orden. Forhåndsvisningen er bygget fra noe annet: noen få linjer kode i sidens head-del, som de fleste aldri ser.

Dette innlegget går gjennom de seks årsakene bak de fleste ødelagte forhåndsvisninger, i den rekkefølgen det lønner seg å sjekke dem. Hvis du vil ha taggene skrevet for deg, lager den gratis Open Graph-generatoren dem, escaper dem riktig og sjekker dem mot grensene under.

Slik lages en lenkeforhåndsvisning

Når en lenke limes inn i et innlegg eller en melding, sender appen en crawler til siden. Crawleren leser <meta>-taggene i <head> og tegner kortet ut fra dem. Taggene kommer fra Open Graph-protokollen, som oppgir fire som påkrevd:

• og:title: tittelen på siden slik den skal vises i kortet.
• og:type: hva siden er, vanligvis website eller article.
• og:image: bildet.
• og:url: sidens kanoniske URL, som protokollen kaller den permanente ID-en.

Legg til og:description, så har du kortet. Et komplett, minimalt sett ser slik ut:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Årsak 1: taggene mangler

Uten og:-tagger må hver app ta til takke med det den finner ellers på siden, for eksempel <title> eller det første bildet, og hva den velger, er opp til den appen. Derfor kan én lenke se fin ut ett sted og ødelagt et annet. Løsningen er å oppgi de fire påkrevde taggene pluss en beskrivelse på hver side folk forventes å dele, ikke bare forsiden. En produktside som deles med forsidens tagger, viser forsidens kort.

Årsak 2: bildets URL er relativ

Denne er lett å overse, fordi siden ser fin ut i din egen nettleser. content="/images/og.jpg" fungerer for en nettleser som allerede er på nettstedet ditt, men crawleren står utenfor det. Skriv hele adressen, med https:// og domenet ditt. Det samme gjelder og:url.

Årsak 3: bildet har feil størrelse eller format

Hver plattform sier hva den vil ha, og de er tilfeldigvis enige om et bredt bilde:

• LinkedIn sier i sin veiledning for å gjøre et nettsted delbart at bildet bør være minst 1200 × 627 piksler, med anbefalt forhold 1.91:1, og ikke være større enn 5 MB.
• Metas anbefalinger for deling anbefaler bilder som er minst 1080 piksler brede for skjermer med høy oppløsning, og minst 600 brede for å vise bildelenkeannonser.
• X sitt store bildekort støtter forholdet 2:1 fra 300 × 157 opp til 4096 × 4096 piksler, under 5 MB, i JPG, PNG, WEBP eller GIF, og støtter ikke SVG, ifølge sin utviklerdokumentasjon (den opprinnelige siden sender nå videre, så denne lenken går via Internet Archive).

Én størrelse passer alle tre: 1200 × 630. Den er over LinkedIns minimum på 1200 × 627, er bredere enn Metas 1080, og forholdet er 1200 ÷ 630 = 1.905, innenfor 5% av X sitt 2:1. Et kvadratisk eller høyt bilde blir beskåret til et bredt kort, så hold det viktige i midten. Kalkulatoren for sideforhold viser hva en midtbeskjæring beholder.

Oppgi også størrelsen i taggene. Meta ber om og:image:width og og:image:height, slik at crawleren kan vise bildet med en gang i stedet for å laste ned og behandle det først. Deres veiledning for nettredaktører sier det enkelt: oppgi høyde og bredde, så lastes bildet riktig første gang siden deles.

Årsak 4: taggene legges til av JavaScript

Noen nettstedsbyggere og single-page-apper legger til metataggene etter at siden er lastet, i nettleseren. En crawler som leser HTML-en serveren sender, kjører kanskje aldri den koden, og ser derfor aldri taggene. Sjekk sidens kilde (Vis kilde, ikke inspektøren, som viser siden etter at skriptene har kjørt). Hvis taggene ikke finnes i kilden, ser crawleren dem sannsynligvis heller ikke. Løsningen hører hjemme i nettstedets innstillinger eller i malen på serveren.

Årsak 5: spesialtegn ødela taggen

En tittel med anførselstegn i, for eksempel The "only" linen you need, avslutter content="..."-attributtet for tidlig, og resten av tittelen går tapt. Tegn som betyr noe inni et attributt, må escapes: " blir ", & blir &, og < blir <. Nettlesere og crawlere gjør dem om til de opprinnelige tegnene når de leser taggen. Generatoren gjør dette for deg, og det er halvparten av grunnen til å bruke en.

Årsak 6: appen husket den gamle versjonen

Du fikset taggene, delte på nytt, og det gamle kortet er fortsatt der. Det er cachen. Apper lagrer det de har hentet og gjenbruker det, og begge store nettverkene har et verktøy for å be om en fersk versjon:

• Facebook: lim inn URL-en i Metas Sharing Debugger. Metas veiledning for nettredaktører sier at den viser hvilke tagger crawleren hentet, med eventuelle feil og advarsler, og utløser en ny henting. Metas beste praksis legger til at hentet innhold ellers oppdateres etter en standard periode på 24 timer.
• LinkedIn: kjør URL-en gjennom Post Inspector. LinkedIns hjelpeside er tydelig på begrensningen: oppdateringen endrer bare forhåndsvisningen for nye innlegg. Innlegg som allerede har URL-en, beholder den gamle.

Den LinkedIn-merknaden er den du må huske før en lansering. Sjekk forhåndsvisningen før det første innlegget går ut, for du kan ikke fikse et gammelt innlegg ved å fikse siden.

twitter:card-taggen: én linje, ikke fire

X leser også Open Graph. Deres referanse for kortmarkup lister en reserve for hver tagg: twitter:title faller tilbake til og:title, twitter:description til og:description, twitter:image til og:image, og twitter:image:alt til og:image:alt. Du trenger altså ikke gjenta alt. Den ene linjen du må legge til er twitter:card: summary_large_image for et bilde i full bredde, eller summary for et lite kvadratisk. Utelater du den, sier samme referanse at X kan vise et lite sammendragskort i stedet, og det er derfor et stort bilde noen ganger vises som en miniatyr. Den samme referansen begrenser tittelen til 70 tegn, beskrivelsen til 200 og alt-teksten til 420.

En fem-minutters sjekk før lansering

1. Vis sidekilden og finn og:-taggene. Alle de fire påkrevde, pluss en beskrivelse.
2. Sjekk at og:image og og:url starter med https://.
3. Åpne bilde-URL-en alene i en nettleser. Den skal lastes, på 1200 × 630 eller nær.
4. Lim inn URL-en i Sharing Debugger og Post Inspector, og les kortene.
5. Først da deler du den.

Der Hermoso passer inn

Hermoso er en AI-markedsføringsagent: den researcher annonsene som allerede fungerer i markedet ditt, lager annonser i bilde og video som følger merkevaren din, planlegger innleggene på dine egne kontoer og kjører betalte kampanjer i dine egne annonsekontoer. En god lenkeforhåndsvisning er det som gjør at disse innleggene er verdt å klikke på. Hermoso fungerer i nettappen, eller inne i Claude, ChatGPT og Cursor via sin MCP-server.

Ofte stilte spørsmål

Hvorfor vises det ingen bilde for lenken min på Facebook eller LinkedIn?

Vanligvis mangler og:image-taggen, bruker en relativ sti i stedet for en full https://-adresse, eller peker på et bilde som er for lite. LinkedIn krever minst 1200 × 627 piksler. Etter at du har fikset det, kjører du URL-en gjennom Metas Sharing Debugger eller LinkedIns Post Inspector, slik at de henter den på nytt.

Hvilken størrelse bør et Open Graph-bilde ha?

1200 × 630 piksler fungerer på de store nettverkene. Det oppfyller LinkedIns minimum på 1200 × 627 med omtrent 1.91:1, er bredere enn de 1080 pikslene Meta anbefaler, og er nær 2:1 som X støtter for store bildekort.

Hvordan oppdaterer jeg en LinkedIn-lenkeforhåndsvisning?

Fiks taggene på siden, og legg deretter inn URL-en i LinkedIns Post Inspector. Den oppdaterte forhåndsvisningen gjelder bare nye innlegg. Innlegg som allerede inneholder URL-en, beholder den gamle forhåndsvisningen.

Trenger jeg twitter:-tagger hvis jeg har og:-tagger?

Bare twitter:card. X faller tilbake til og:title, og:description, og:image og og:image:alt når twitter:-versjonene mangler.