Varför ser din länkförhandsvisning fel ut, och hur åtgärdar du det med Open Graph

Du delar en länk till din nya landningssida och förhandsvisningen visar ingen bild, startsidans titel eller en banner från två kampanjer sedan. Sidan i sig är i ordning. Förhandsvisningen byggs av något annat: några rader kod i sidans head som de flesta aldrig ser.

Det här inlägget går igenom de sex orsaker som ligger bakom de flesta trasiga förhandsvisningar, i den ordning det är värt att kontrollera dem. Om du vill ha taggarna skrivna åt dig, bygger den kostnadsfria Open Graph-generatorn dem, escapar dem korrekt och kontrollerar dem mot gränserna nedan.

Så skapas en länkförhandsvisning

När en länk klistras in i ett inlägg eller ett meddelande skickar appen en crawler till sidan. Crawlern läser <meta>-taggarna i <head> och ritar kortet utifrån dem. Taggarna kommer från Open Graph-protokollet, som anger fyra som obligatoriska:

• og:title: sidans titel så som den ska visas på kortet.
• og:type: vad sidan är, oftast website eller article.
• og:image: bilden.
• og:url: sidans kanoniska URL, som protokollet kallar sitt permanenta ID.

Lägg till og:description så har du kortet. En komplett, minimal uppsättning ser ut så här:

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

Orsak 1: taggarna saknas

Utan og:-taggar måste varje app falla tillbaka på det den hittar i övrigt på sidan, till exempel <title> eller den första bilden, och vad den väljer är upp till just den appen. Därför kan en länk se bra ut på ett ställe och trasig ut på ett annat. Åtgärden är att ange de fyra obligatoriska taggarna plus en beskrivning på varje sida du vill att folk ska dela, inte bara startsidan. En produktsida som delas med startsidans taggar visar startsidans kort.

Orsak 2: bild-URL:en är relativ

Den här är lätt att missa, eftersom sidan ser bra ut i din egen webbläsare. content="/images/og.jpg" fungerar för en webbläsare som redan är på din sajt, men crawlern befinner sig utanför den. Skriv hela adressen, med början i https:// och din domän. Samma gäller för og:url.

Orsak 3: bilden har fel storlek eller format

Varje plattform anger vad den vill ha, och de råkar vara överens om en bred bild:

• LinkedIn skriver i sin guide om hur du gör en webbplats delbar att bilden ska vara minst 1200 × 627 pixlar, rekommenderat 1,91:1, och högst 5 MB.
• Metas bästa metoder för delning rekommenderar bilder som är minst 1080 pixlar breda för högupplösta skärmar, och minst 600 breda för att visa bildlänkannonser.
• X:s stora bildkort stöder förhållandet 2:1 från 300 × 157 upp till 4096 × 4096 pixlar, under 5 MB, i JPG, PNG, WEBP eller GIF, och stöder inte SVG, enligt sin utvecklardokumentation (den ursprungliga sidan omdirigerar nu, så den här länken går via Internet Archive).

En storlek passar alla tre: 1200 × 630. Den klarar LinkedIns minimum på 1200 × 627, den är bredare än Metas 1080, och dess förhållande är 1200 ÷ 630 = 1,905, inom 5 % från X:s 2:1. En kvadratisk eller hög bild beskärs till ett brett kort, så håll det viktiga i mitten. Med bildförhållandeskalkylatorn ser du vad en centrerad beskärning behåller.

Ange också storleken i taggarna. Meta begär og:image:width och og:image:height, så att deras crawler kan rendera bilden direkt i stället för att ladda ner och bearbeta den först. Deras webmasterguide säger det enkelt: ange höjd och bredd så att bilden laddas korrekt första gången sidan delas.

Orsak 4: taggarna läggs till med JavaScript

Vissa sajtbyggare och single-page-appar lägger till metataggar efter att sidan laddats, i webbläsaren. En crawler som läser HTML:en din server skickar kanske aldrig kör den koden och ser därför aldrig taggarna. Kontrollera sidans källkod (Visa källkod, inte inspektorn, som visar sidan efter att skripten har körts). Om taggarna inte finns i källkoden kan crawlern troligen inte se dem heller. Lösningen hör hemma i din sajts inställningar eller i dess mall på servern.

Orsak 5: specialtecken bröt taggen

En titel med ett dubbelt citattecken i, till exempel Det "enda" linnet du behöver, avslutar attributet content="..." i förtid, och resten av titeln försvinner. Tecken som har betydelse inuti ett attribut måste escapas: " blir ", & blir & och < blir <. Webbläsare och crawlers gör om dem till originaltecknen när de läser taggen. Generatorn gör det åt dig, vilket är halva skälet att använda en.

Orsak 6: appen kom ihåg den gamla versionen

Du har rättat taggarna, delat om och det gamla kortet finns kvar. Det är cachen. Apparna lagrar det de har skrapat och återanvänder det, och båda de stora nätverken ger dig ett verktyg för att be om en ny version:

• Facebook: klistra in URL:en i Metas Sharing Debugger. Metas webmasterguide säger att den visar vilka taggar crawlern skrapade, med eventuella fel och varningar, och utlöser en ny skrapning. Metas bästa metoder tillägger att skrapat innehåll annars uppdateras enligt en vanlig period på 24 timmar.
• LinkedIn: kör URL:en genom Post Inspector. LinkedIns hjälpsida är tydlig om begränsningen: uppdateringen ändrar bara förhandsvisningen för nya inlägg. Inlägg som redan innehåller URL:en behåller den gamla.

Den noteringen om LinkedIn är den du ska komma ihåg inför en lansering. Kontrollera förhandsvisningen innan det första inlägget går ut, eftersom du inte kan åtgärda ett gammalt inlägg genom att åtgärda sidan.

twitter:card-taggen: en rad, inte fyra

X läser även Open Graph. Deras referens för kortmarkeringen listar en reserv för varje tagg: twitter:title faller tillbaka på og:title, twitter:description på og:description, twitter:image på og:image och twitter:image:alt på og:image:alt. Du behöver alltså inte upprepa allt. Den enda raden du ska lägga till är twitter:card: summary_large_image för en bild i full bredd, eller summary för en liten kvadratisk. Utelämnar du den visar samma referens att X kan visa ett litet sammanfattningskort i stället, vilket är anledningen till att en stor bild ibland dyker upp som miniatyr. Samma referens begränsar en titel till 70 tecken, en beskrivning till 200 och alt-texten till 420.

En femminuters kontroll före lansering

1. Visa sidans källkod och hitta og:-taggarna. Alla fyra obligatoriska, plus en beskrivning.
2. Kontrollera att og:image och og:url börjar med https://.
3. Öppna bild-URL:en på egen hand i en webbläsare. Den ska laddas, i 1200 × 630 eller nära det.
4. Klistra in URL:en i Sharing Debugger och Post Inspector och läs korten.
5. Först då delar du den.

Var Hermoso passar in

Hermoso är en AI-marknadsföringsagent: den undersöker vilka annonser som redan fungerar på din marknad, gör bildannonser och videoannonser i din varumärkesprofil, schemalägger inlägg till dina egna konton och kör betalda kampanjer på dina egna annonskonton. En bra länkförhandsvisning är det som gör att de inläggen är värda att klicka på. Hermoso fungerar i webbappen, eller inne i Claude, ChatGPT och Cursor via sin MCP-server.

Vanliga frågor

Varför visas ingen bild för min länk på Facebook eller LinkedIn?

Oftast saknas og:image-taggen, den använder en relativ sökväg i stället för en fullständig https://-adress, eller så pekar den på en bild som är för liten. LinkedIn kräver minst 1200 × 627 pixlar. När du har åtgärdat det kör du URL:en genom Metas Sharing Debugger eller LinkedIns Post Inspector, så att de hämtar den på nytt.

Vilken storlek ska en Open Graph-bild ha?

1200 × 630 pixlar fungerar på de stora nätverken. Det uppfyller LinkedIns minimum på 1200 × 627 vid ungefär 1,91:1, är bredare än de 1080 pixlar Meta rekommenderar och ligger nära de 2:1 som X stöder för stora bildkort.

Hur uppdaterar jag en länkförhandsvisning på LinkedIn?

Åtgärda taggarna på sidan och ange sedan URL:en i LinkedIns Post Inspector. Den uppdaterade förhandsvisningen gäller bara nya inlägg. Inlägg som redan innehåller URL:en behåller den gamla förhandsvisningen.

Behöver jag twitter:-taggar om jag har og:-taggar?

Bara twitter:card. X faller tillbaka på og:title, og:description, og:image och og:image:alt när twitter:-versionerna saknas.