Open Graph-metataggsgenerator

Taggarna som en länkförhandsvisning byggs av

När någon klistrar in din länk i ett inlägg eller ett meddelande skickar appen en robot till sidan och läser en handfull <meta>-taggar i <head>. Dessa taggar kommer från Open Graph-protokollet, som listar fyra som obligatoriska:

• og:title: titeln så som den ska visas i förhandsvisningen.
• og:type: vad sidan är. website passar de flesta sidor och article passar ett blogginlägg. Protokollet definierar även typer som profile, book, video.movie och music.song.
• og:image: URL:en till bilden som representerar sidan.
• og:url: den kanoniska URL:en, som protokollet kallar objektets permanenta ID.

Protokollet definierar även valfria taggar, och generatorn skriver de användbara: og:description, og:site_name och bilddetaljerna og:image:width, og:image:height och og:image:alt. Om alternativtext är protokollet tydligt: om en sida specificerar og:image bör den specificera og:image:alt, och den texten beskriver vad som finns i bilden, inte en bildtext.

Vad X lägger till: twitter:card

X läser även Open Graph. Dess referens för kortmarkering (X:s utvecklardokumentation, länkad här via Internet Archive eftersom originalsidan nu omdirigerar) listar reservvärdet 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. Så den enda tagg som är värd att lägga till är twitter:card, som väljer layouten. Utelämna den och samma referens säger att X kan falla tillbaka på ett litet sammanfattningskort, även om du ville ha det stora:

• summary_large_image: en helbreddsbild ovanför titeln. X:s sida om stora bildkort anger att bilder för detta stöder ett bildförhållande på 2:1, med minsta mått 300 × 157 och högst 4096 × 4096 pixlar, under 5MB, i JPG, PNG, WEBP eller GIF. SVG stöds inte.
• summary: ett mindre kort med en kvadratisk bild. X:s sida om sammanfattningskort anger att bilden stöder ett förhållande på 1:1, från 144 × 144 upp till 4096 × 4096 pixlar, och beskärs till en kvadrat på alla plattformar.

Samma referens listar korten app och player, som behöver extra fält för App Store eller videospelare, så de utelämnas här. Den dokumenterar även de gränser som kontrollerna ovan använder: 70 tecken för en titel, 200 för en beskrivning och 420 för alt-text.

Bildstorlekar som plattformarna anger

• LinkedIn: dess guide för att göra en webbplats delbar kräver og:title, og:image, og:description och og:url, och anger en maximal filstorlek på 5 MB, minst 1200 × 627 pixlar och ett rekommenderat förhållande på 1,91:1.
• Meta: deras bästa praxis för delning säger att du bör använda bilder som är minst 1080 pixlar breda för högupplösta skärmar, och minst 600 pixlar breda för att visa bildlänksannonser. Samma sida kräver og:image:width och og:image:height så att crawlern kan rendera bilden direkt utan att först behöva ladda ner och bearbeta den.

En bild på 1200 × 630 uppfyller alla dessa: den är minst 1200 × 627 för LinkedIn, bredare än 1080 för Meta och 1,905:1, inom 5 % av X’s 2:1.

Kontrollera den och uppdatera gamla förhandsvisningar

Appar cachelagrar det de skrapade, så att rätta taggarna fixar inte en förhandsvisning som redan lagrats. Båda de stora nätverken ger dig ett verktyg för detta:

• Metas Sharing Debugger visar de taggar dess crawler skrapar, med eventuella fel eller varningar, och utlöser en ny skrapning. Metas webbansvarigguide beskriver den, och sidan med bästa praxis noterar att skrapat innehåll annars uppdateras med en standardperiod på 24 timmar.
• LinkedIns Post Inspector uppdaterar en cachelagrad URL. LinkedIns hjälpsida noterar att uppdateringen bara påverkar nya inlägg: inlägg som redan innehåller URL:en behåller den gamla förhandsvisningen.

Vad det här verktyget inte gör

Den hämtar inte din sida eller din bild, så den kan inte se vad som faktiskt är live, och förhandsvisningen ovan är en textskiss snarare än en rendering. Den skriver taggarna; din webbplats måste fortfarande leverera dem i sidans <head>, i den HTML som crawlern tar emot. Taggar som läggs till senare av JavaScript kanske aldrig syns. Och den skriver inte app- eller player-kort, eller de extra egenskaper som typer som book eller video.movie definierar.

Om du hellre slipper skriva detta för hand

Hermoso är marknadsföring på autopilot: det undersöker annonserna som redan fungerar på din marknad, skapar varumärkesanpassade bild- och videoannonser, schemalägger inläggen och kör betalda kampanjer på dina egna annonskonton. Det fungerar i webbappen eller inuti Claude, ChatGPT och Cursor via sin MCP-server.

Gratisverktyg: UTM-länkbyggare · QR-kodsgenerator · Storleksguide för sociala medier

Vanliga frågor

Vilka Open Graph-taggar krävs?

Open Graph-protokollet listar fyra obligatoriska egenskaper: og:title, og:type, og:image och og:url. og:description, og:site_name samt taggarna för og:image-bredd, -höjd och -alt är valfria men värda att lägga till.

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

Nej. X:s cards-referens säger att twitter:title, twitter:description, twitter:image och twitter:image:alt faller tillbaka på sina og:-motsvarigheter. Taggen värd att lägga till är twitter:card, som väljer kortlayouten.

Vilken storlek ska en Open Graph-bild ha?

LinkedIn efterfrågar minst 1200 × 627 pixlar i 1.91:1 och under 5 MB. Meta föreslår minst 1080 pixlar bred. X:s stora bildkort stöder 2:1 från 300 × 157 till 4096 × 4096. En bild på 1200 × 630 passar alla tre.

Varför visar min länk fortfarande en gammal bild efter att jag ändrat taggarna?

Appen cachade den gamla skrapningen. Kör URL:en genom Metas Sharing Debugger eller LinkedIns Post Inspector för att hämta den igen. LinkedIn noterar att inlägg som redan delar URL:en behåller den gamla förhandsvisningen.

Varför ändras citattecken och et-tecken i utdatan?

De är HTML-escapade så att taggen förblir giltig. En titel som Tom & Jerry's "Sale" blir Tom & Jerry's "Sale" inuti content-attributet, och webbläsare och crawlers läser tillbaka den som ursprungstexten.

Laddar verktyget min bild?

Nej. Inget du skriver skickas någonstans och bildens URL hämtas aldrig, vilket är varför förhandsvisningen visar en platshållare i stället för bilden.