Open Graph-metatag-generator

De tags, en link-forhåndsvisning bygges af

Når nogen indsætter dit link i et opslag eller en besked, sender appen en crawler til siden og læser en håndfuld <meta>-tags i <head>. De tags kommer fra Open Graph-protokollen, som angiver fire som påkrævede:

• og:title: titlen, som den skal vises i forhåndsvisningen.
• og:type: hvad siden er. website passer til de fleste sider, og article passer til et blogindlæg. Protokollen definerer også typer som profile, book, video.movie og music.song.
• og:image: URL'en til billedet, der repræsenterer siden.
• og:url: den kanoniske URL, som protokollen kalder objektets permanente ID.

Protokollen definerer også valgfrie tags, og generatoren skriver de nyttige: og:description, og:site_name og billeddetaljerne og:image:width, og:image:height og og:image:alt. Om alt-tekst er protokollen direkte: hvis en side angiver og:image, bør den angive og:image:alt, og den tekst beskriver, hvad der er på billedet, ikke en billedtekst.

Hvad X tilføjer: twitter:card

X læser også Open Graph. Dets reference for cards-markup (X's udviklerdokumentation, linket her via Internet Archive, fordi den oprindelige side nu omdirigerer) angiver fallback 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. Så det ene tag, der er værd at tilføje, er twitter:card, som vælger layoutet. Udelad det, og den samme reference siger, at X kan falde tilbage til et lille opsummeringskort, selv hvis du ønskede det store:

• summary_large_image: et billede i fuld bredde over titlen. X's side om det store billedkort siger, at billeder til det understøtter et størrelsesforhold på 2:1, med minimumsdimensioner på 300 × 157 og et maksimum på 4096 × 4096 pixels, under 5 MB, i JPG, PNG, WEBP eller GIF. SVG understøttes ikke.
• summary: et mindre kort med et firkantet billede. X's side om opsummeringskortet siger, at billedet understøtter et forhold på 1:1, fra 144 × 144 op til 4096 × 4096 pixels, og beskæres til en firkant på alle platforme.

Den samme reference nævner også app- og player-kort, som kræver ekstra felter til app store eller videoafspiller, så de er udeladt her. Den dokumenterer også de grænser, som tjekkene ovenfor bruger: 70 tegn til en titel, 200 til en beskrivelse og 420 til alt-tekst.

Billedstørrelser som platformene angiver

• LinkedIn: dens guide til at gøre et websted deleligt beder om og:title, og:image, og:description og og:url og angiver en maksimal filstørrelse på 5 MB, et minimum på 1200 × 627 pixel og et anbefalet forhold på 1,91:1.
• Meta: dens bedste praksis for deling anbefaler at bruge billeder på mindst 1080 pixel i bredden til skærme med høj opløsning og mindst 600 pixel i bredden for at vise billedlinkannoncer. Den samme side beder om og:image:width og og:image:height, så crawleren kan gengive billedet med det samme uden først at skulle hente og behandle det.

Et billede på 1200 × 630 opfylder alle disse krav: det er mindst 1200 × 627 til LinkedIn, bredere end 1080 til Meta og 1,905:1, inden for 5 % af X’s 2:1.

Tjek det, og opdater gamle previews

Apps gemmer det, de har hentet, i cache, så selvom du retter taggene, retter det ikke et preview, der allerede var gemt. Begge store netværk giver dig et værktøj til dette:

• Metas Sharing Debugger viser de tags, dens crawler henter, med eventuelle fejl eller advarsler, og udløser en ny hentning. Metas webmaster-guide beskriver den, og siden med bedste praksis bemærker, at hentet indhold ellers opdateres i en standardperiode på 24 timer.
• LinkedIns Post Inspector opdaterer en URL i cachen. LinkedIns hjælpeside bemærker, at opdateringen kun påvirker nye opslag: opslag, der allerede indeholder URL'en, beholder det gamle preview.

Hvad dette værktøj ikke gør

Den henter ikke din side eller dit billede, så den kan ikke se, hvad der faktisk er live, og previewet ovenfor er en tekstskitse frem for en gengivelse. Den skriver taggene; dit websted skal stadig levere dem i sidens <head>, i den HTML, crawleren modtager. Tags, der tilføjes senere med JavaScript, bliver måske aldrig set. Og den skriver ikke app- eller player-kort eller de ekstra egenskaber, som typer som book eller video.movie definerer.

Hvis du hellere vil slippe for at skrive dette i hånden

Hermoso er markedsføring på autopilot: den undersøger de annoncer, der allerede virker på dit marked, laver brandtro billed- og videoannoncer, planlægger opslag og kører betalte kampagner på dine egne annoncekonti. Den virker i webappen eller inde i Claude, ChatGPT og Cursor via sin MCP-server.

Gratis værktøjer: UTM-linkbygger · QR-kodegenerator · Størrelsesguide til sociale medier

Ofte stillede spørgsmål

Hvilke Open Graph-tags er påkrævede?

Open Graph-protokollen angiver fire påkrævede egenskaber: og:title, og:type, og:image og og:url. og:description, og:site_name og og:image-tags for bredde, højde og alt er valgfrie, men værd at tilføje.

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

Nej. X's reference for cards-markup siger, at twitter:title, twitter:description, twitter:image og twitter:image:alt falder tilbage på deres og:-modstykker. Det tag, der er værd at tilføje, er twitter:card, som vælger card-layoutet.

Hvilken størrelse bør et Open Graph-billede have?

LinkedIn kræver mindst 1200 × 627 pixel i 1,91:1 og under 5 MB. Meta foreslår mindst 1080 pixel i bredden. X's store billedkort understøtter 2:1 fra 300 × 157 til 4096 × 4096. Et billede på 1200 × 630 passer til alle tre.

Hvorfor viser mit link stadig et gammelt billede, efter jeg ændrede tags?

Appen cachede den gamle scrape. Kør URL'en gennem Metas Sharing Debugger eller LinkedIns Post Inspector for at hente den igen. LinkedIn bemærker, at opslag, der allerede deler URL'en, beholder den gamle forhåndsvisning.

Hvorfor ændres anførselstegn og og-tegn i outputtet?

De er HTML-escapede, så tagget forbliver gyldigt. En titel som Tom & Jerry's "Sale" bliver til Tom & Jerry's "Sale" inde i content-attributten, og browsere og crawlere læser det tilbage som den oprindelige tekst.

Indlæser værktøjet mit billede?

Nej. Intet af det, du skriver, sendes nogen steder, og billed-URL'en hentes aldrig, hvilket er grunden til, at forhåndsvisningen viser en pladsholder i stedet for billedet.