OG Image Generator — Social Share Image Maker

Et Open Graph-billede er det billede, der dukker op, når et link indsættes i en chat, et tweet eller en Slack-kanal - og hver platform, der gengiver en, forventer et lærred på omkring 1200×630 pixels, størrelsen Facebooks og:image og Twitters summary_large_image-kort var begge designet omkring. Vælg størrelsen forkert, og billedet bliver beskåret, sløret eller klemt; få layoutet forkert, og titlen lyder som en ulæselig splint mod et travlt foto. Dette værktøj komponerer billedet ved den rigtige målopløsning ved hjælp af Canvas 2D API, så det, du ser i forhåndsvisningen, er det nøjagtige pixelgitter, der sendes i PNG.

Vælg en baggrund — en flad farve, en to-stop lineær gradient bygget af to farver, du vælger, eller et uploadet billede, der bliver beskåret til at fylde hele 1200×630 rammen på samme måde som en CSS-baggrundsstørrelse: cover ville i stedet for at blive strakt ud af proportioner. Indtast en titel og en valgfri undertekst: begge måles tegn for tegn i forhold til lærredets egne skrifttypemetrikker, så en overskrift, der er for lang til at passe på én linje, ombrydes til en anden eller tredje linje ved en rigtig ordgrænse i stedet for at vælte ud over kanten eller blive usynligt afkortet. Vælg center- eller venstrejustering, vælg en tekstfarve, der læser mod din baggrund, og slip et valgfrit logo i hjørnet i en fast, læsbar størrelse.

Under lærredet viser fire små kort, hvordan det færdige billede ser ud, når en rigtig platform pakker det ind i sin egen krom: Twitter/X's kort viser kun domænet og en fed titel under billedet uden beskrivelseslinje, Facebook tilføjer en domænestrimmel med store bogstaver over en titel-og-beskrivelsesblok, LinkedIn sætter domænet under titlen, uden at domænet er indlejret, med ingen domænebeskrivelse. titel og beskrivelse over billedet i sit eget mørke tema. Disse er stilede tilnærmelser til planlægningsformål - tydeligt mærket som illustrative, med en domænelinje, du selv skriver - ikke en live-hentning eller skærmbillede af de faktiske platforme, da deling af et link og lader hver platforms egen crawler læse din sides rigtige og:image og og:title metatags er det, der faktisk producerer live-kortet.

Alt gengives lokalt på et HTML-lærredselement i din browser: titlen, underteksten, den uploadede baggrund og logoet forlader aldrig din enhed, og den eksporterede fil er en ren canvas.toBlob() PNG, der kun indeholder det, du komponerede - ingen mockup-kanter, falske browserbjælker eller platformslogoer bliver indbagt i det downloadede billede. Hvis du også har brug for at ændre størrelsen på eller konvertere den eksporterede PNG bagefter, fortsætter dette websteds billedresizer- og billedkonverteringsværktøjer lige hvor dette stopper.