Hvorfor ser dit linkpreview forkert ud, og hvordan retter du det med Open Graph

Du deler et link til din nye landingsside, og forhåndsvisningen viser intet billede, titlen på din forside eller et banner fra for to kampagner siden. Selve siden er i orden. Forhåndsvisningen bygges ud fra noget andet: nogle få linjer kode i sidens head, som de fleste aldrig ser.

Dette indlæg gennemgår de seks årsager bag de fleste ødelagte forhåndsvisninger, i den rækkefølge det giver mest mening at tjekke dem. Hvis du vil have tagsene skrevet for dig, bygger den gratis Open Graph-generator dem, escaper dem korrekt og tjekker dem mod grænserne nedenfor.

Sådan laves et linkpreview

Når et link indsættes i et opslag eller en besked, sender appen en crawler til siden. Crawleren læser <meta>-tagsene i <head> og tegner kortet ud fra dem. Tagsene kommer fra Open Graph-protokollen, som angiver fire som påkrævede:

• og:title: sidens titel, sådan som den skal stå på kortet.
• og:type: hvad siden er, typisk website eller article.
• og:image: billedet.
• og:url: sidens kanoniske URL, som protokollen kalder dens permanente ID.

Tilføj og:description, så har du kortet. Et komplet, minimalt sæt ser sådan ud:

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

Årsag 1: tagsene mangler

Uden og:-tags må hver app falde tilbage på det, den ellers finder på siden, f.eks. <title> eller det første billede, og hvad den vælger, er op til appen. Derfor kan et link se fint ud ét sted og ødelagt et andet. Løsningen er at angive de fire påkrævede tags plus en beskrivelse på hver side, du forventer, at folk deler, ikke kun forsiden. En produktside, der deles med forsidens tags, viser forsidens kort.

Årsag 2: billed-URL'en er relativ

Den er let at overse, fordi siden ser fin ud i din egen browser. content="/images/og.jpg" virker for en browser, der allerede er på din side, men crawleren står uden for den. Skriv den fulde adresse, der starter med https:// og dit domæne. Det samme gælder og:url.

Årsag 3: billedet har forkert størrelse eller format

Hver platform angiver, hvad den ønsker, og de er tilfældigvis enige om et bredt billede:

• LinkedIn skriver i sin guide til at gøre et website delbart, at billedet mindst skal være 1200 × 627 pixels, med anbefalede 1.91:1, og højst 5 MB.
• Metas bedste praksis for deling anbefaler billeder, der er mindst 1080 pixels brede til skærme med høj opløsning, og mindst 600 brede for at vise billedlinkannoncer.
• Xs store billedkort understøtter et 2:1-forhold fra 300 × 157 op til 4096 × 4096 pixels, under 5 MB, i JPG, PNG, WEBP eller GIF, og understøtter ikke SVG, ifølge deres udviklerdokumentation (den oprindelige side omdirigerer nu, så linket går via Internet Archive).

Én størrelse passer til alle tre: 1200 × 630. Den overskrider LinkedIns minimum på 1200 × 627, er bredere end Metas 1080, og dens forhold er 1200 ÷ 630 = 1.905, inden for 5 % af X's 2:1. Et kvadratisk eller højt billede bliver beskåret til et bredt kort, så hold det vigtige i midten. Beregneren for billedformat viser, hvad en midterbeskæring beholder.

Angiv også størrelsen i tagsene. Meta beder om og:image:width og og:image:height, så crawleren kan gengive billedet med det samme i stedet for at hente og behandle det først. Deres webmaster-guide siger det enkelt: angiv højde og bredde, så billedet indlæses rigtigt første gang, siden deles.

Årsag 4: tagsene tilføjes af JavaScript

Nogle sitebyggere og single-page-apps tilføjer meta-tags, efter siden er indlæst, i browseren. En crawler, der læser den HTML din server sender, kører måske aldrig den kode og ser dermed ikke tagsene. Tjek sidens kilde (View Source, ikke inspektøren, som viser siden efter scripts er kørt). Hvis tagsene ikke står i kilden, kan crawleren sandsynligvis heller ikke se dem. Rettelsen hører hjemme i dit sites indstillinger eller i serverens skabelon.

Årsag 5: specialtegn ødelagde tagget

En titel med et dobbelt anførselstegn i, som Det "eneste" linned du behøver, afslutter content="..."-attributten for tidligt, og resten af titlen forsvinder. Tegn, der betyder noget inde i en attribut, skal escapes: " bliver til ", & bliver til &, og < bliver til <. Browsere og crawlere gør dem tilbage til de oprindelige tegn, når de læser tagget. Generatoren gør det for dig, og det er halvdelen af grunden til at bruge en.

Årsag 6: appen huskede den gamle version

Du rettede tagsene, delte igen, og det gamle kort er der stadig. Det er cachen. Apps gemmer det, de har hentet, og genbruger det, og begge store netværk giver dig et værktøj til at bede om et friskt kig:

• Facebook: indsæt URL'en i Metas Sharing Debugger. Metas webmaster-guide siger, at den viser, hvilke tags crawleren har hentet, med eventuelle fejl eller advarsler, og udløser en ny hentning. Metas bedste praksis tilføjer, at hentet indhold ellers opdateres efter en almindelig periode på 24 timer.
• LinkedIn: kør URL'en gennem Post Inspector. LinkedIns hjælpeside er tydelig om grænsen: opdateringen ændrer kun forhåndsvisningen for nye opslag. Opslag, der allerede indeholder linket, beholder den gamle.

Den LinkedIn-note skal du huske før en lancering. Tjek forhåndsvisningen før det første opslag går ud, for du kan ikke rette et gammelt opslag ved at rette siden.

Tagget twitter:card: én linje, ikke fire

X læser også Open Graph. Deres referencesides for kort-markup angiver en reserve for hvert tag: twitter:title falder tilbage til og:title, twitter:description til og:description, twitter:image til og:image, og twitter:image:alt til og:image:alt. Du behøver altså ikke gentage alt. Den ene linje, du skal tilføje, er twitter:card: summary_large_image for et billede i fuld bredde, eller summary for et lille kvadratisk. Udelader du den, siger den samme reference, at X kan vise et lille oversigtskort i stedet, og det er grunden til, at et stort billede nogle gange dukker op som et miniature. Den samme reference begrænser en titel til 70 tegn, en beskrivelse til 200 og alt-tekst til 420.

Et femminutters tjek før lancering

1. Vis sidens kilde og find og:-tagsene. Alle fire påkrævede, plus en beskrivelse.
2. Tjek at og:image og og:url starter med https://.
3. Åbn billed-URL'en alene i en browser. Den skal indlæses, i 1200 × 630 eller tæt på.
4. Indsæt URL'en i Sharing Debugger og Post Inspector, og læs kortene.
5. Først derefter deler du den.

Hvor Hermoso passer ind

Hermoso er en AI-marketingagent: den researcher de annoncer, der allerede virker på dit marked, laver brandtilpassede billed- og videoannoncer, planlægger opslagene til dine egne konti og kører betalte kampagner på dine egne annoncekonti. Et godt linkpreview er det, der gør, at opslagene er værd at klikke på. Hermoso virker i webappen eller inde i Claude, ChatGPT og Cursor via sin MCP-server.

Ofte stillede spørgsmål

Hvorfor viser mit link intet billede på Facebook eller LinkedIn?

Det skyldes normalt, at og:image-tagget mangler, bruger en relativ sti i stedet for en fuld https://-adresse, eller peger på et billede, der er for lille. LinkedIn kræver mindst 1200 × 627 pixels. Når du har rettet det, så kør URL'en gennem Metas Sharing Debugger eller LinkedIns Post Inspector, så de henter den igen.

Hvilken størrelse skal et Open Graph-billede have?

1200 × 630 pixels virker på de store netværk. Det opfylder LinkedIns minimum på 1200 × 627 med omkring 1.91:1, er bredere end de 1080 pixels Meta anbefaler, og ligger tæt på de 2:1, X understøtter til store billedkort.

Hvordan opdaterer jeg et LinkedIn-linkpreview?

Ret tagsene på siden, og indtast derefter URL'en i LinkedIns Post Inspector. Den opdaterede forhåndsvisning gælder kun for nye opslag. Opslag, der allerede indeholder URL'en, beholder den gamle forhåndsvisning.

Har jeg brug for twitter:-tags, hvis jeg har og:-tags?

Kun twitter:card. X falder tilbage til og:title, og:description, og:image og og:image:alt, når twitter:-versionerne mangler.