OSIG

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <link rel="apple-touch-icon" href="/static/vendors/images/logo.914bb71cc3c5.png" /> <link rel="apple-touch-icon" href="/static/vendors/images/logo.914bb71cc3c5.png" /> <link rel="icon" type="image/png" sizes="16x16 32x32 500x500" href="/static/vendors/images/logo.914bb71cc3c5.png" /> <title>OSIG</title> <meta name="description" content="Generate Beautiful OG Images for Your Site... For Free!" /> <meta name="keywords" content="og image, og image creator, og image maker, og image template, og image generator, og image creator, og image maker, og image template, og image template, og image generator, og image creator, og image maker, og image template" /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://osig.app/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="OSIG" /> <meta property="og:url" content="https://osig.app/" /> <meta property="og:description" content="Generate Beautiful OG Images for Your Site... For Free!" /> <meta property="og:image" content="https://osig.app/g?site=x&style=logo&font=markerfelt&title=OSIG&subtitle=Generate Beautiful OG Images for Your Site... For Free!&image_url=https://osig.app/static/vendors/images/logo-square.png" /> <meta property="og:locale" content="en_US" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:creator" content="@rasulkireev" /> <meta name="twitter:site" content="@rasulkireev" /> <meta name="twitter:title" content="OSIG" /> <meta name="twitter:description" content="Generate Beautiful OG Images for Your Site... For Free!" /> <meta name="twitter:image" content="https://osig.app/g?site=x&style=logo&font=markerfelt&title=OSIG&subtitle=Generate Beautiful OG Images for Your Site... For Free!&image_url=https://osig.app/static/vendors/images/logo-square.png" /> <link type="text/css" href="/static/css/index.cd6a6b5b4e362129fc2d.04d196023ab9.css" rel="stylesheet" /> <script type="text/javascript" src="/static/js/runtime.727d4f17.573c29cc9f7b.js" defer></script> <script type="text/javascript" src="/static/js/712.bdbfe5e3.ab3793994adc.js" defer></script> <script type="text/javascript" src="/static/js/index.ee9ae253.650d643817dd.js" defer></script> <script defer data-domain="osig.app" src="https://plausible-v2.cr.lvtd.dev/js/script.js"></script> <script> !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); posthog.init('phc_wa2RfooG5BAVE9zHHGkeEyF52nJTbwmcjdjrH32ZKl6',{api_host:'https://us.i.posthog.com', person_profiles: 'always' }) </script> </head> <body> <div class="bg-white"> <header class="bg-white"> <nav class="flex justify-between items-center p-6 mx-auto max-w-7xl lg:px-8" aria-label="Global">  <div class="flex justify-between items-center w-full lg:hidden"> <div class="relative"> <div data-controller="dropdown"> <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> <span class="sr-only">Open user menu</span> <svg class="w-6 h-6 group-[.open]:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg class="hidden w-6 h-6 group-[.open]:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <div data-dropdown-target="menu" class="hidden lg:hidden" role="dialog" aria-modal="true">  <div class="fixed inset-0 z-10"></div> <div class="overflow-y-auto fixed inset-y-0 right-0 z-10 px-6 py-6 w-full bg-white sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"> <div class="flex justify-start items-center"> <button data-action="dropdown#toggle click@window->dropdown#hide" type="button"> <span class="sr-only">Close menu</span> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <div class="flow-root mt-6"> <div class="flex flex-col justify-start space-y-1"> <a href="/" class="flex flex-row justify-center items-center p-1.5 -m-1.5 mb-2 space-x-2"> <img class="w-auto h-8" src="/static/vendors/images/logo.914bb71cc3c5.png" alt="OSIG Logo" /> <span class="text-base font-semibold text-gray-700">OSIG</span> </a> <a href="/" class="px-3 py-2.5 -mx-3 text-base font-semibold leading-7 text-center text-gray-900 rounded-lg hover:bg-gray-50"> Home </a> <a href="/how-to" class="px-3 py-2.5 -mx-3 text-base font-semibold leading-7 text-center text-gray-900 rounded-lg hover:bg-gray-50"> How to use? </a> <a href="/blog/" class="px-3 py-2.5 -mx-3 text-base font-semibold leading-7 text-center text-gray-900 rounded-lg hover:bg-gray-50"> Blog </a> <a href="/pricing" class="px-3 py-2.5 -mx-3 text-base font-semibold leading-7 text-center text-gray-900 rounded-lg hover:bg-gray-50"> Pricing </a> </div> </div> </div> </div> </div> </div>  <div class="relative"> <a href="/accounts/login/" class="text-base font-semibold leading-6 text-gray-900"> Log in <span aria-hidden="true">→</span> </a> </div> </div>  <div class="hidden lg:flex lg:justify-between lg:items-center lg:w-full"> <div class="flex gap-x-12 items-center"> <a href="/" class="flex flex-row justify-between items-center p-1.5 -m-1.5 space-x-2"> <img class="w-auto h-8" src="/static/vendors/images/logo.914bb71cc3c5.png" alt="OSIG Logo" /> <span class="text-base font-semibold text-gray-700">OSIG</span> </a> </div> <div class="flex items-center space-x-8"> <a href="/how-to" class="text-base font-semibold leading-6 text-gray-900 hover:text-gray-700"> How to use? </a> <a href="/blog/" class="text-base font-semibold leading-6 text-gray-900 hover:text-gray-700"> Blog </a> <a href="/pricing" class="text-base font-semibold leading-6 text-gray-900 hover:text-gray-700"> Pricing </a> <a href="/accounts/login/" class="text-base font-semibold leading-6 text-gray-900"> Log in <span aria-hidden="true">→</span> </a> </div> </div> </nav> </header> <div class="px-2 sm:px-0"> <div class="container px-4 py-8 mx-auto md:relative"> <div class="mx-auto max-w-3xl"> <h1 class="mb-8 text-3xl font-bold text-center">Generate Beautiful OG Images for <span class="block text-blue-600">Your Site... For Free!</span> </h1> <div class="flex flex-col gap-x-6 justify-center items-center mt-10 md:flex-row md:items-end"> <a class="block px-3 py-2 text-sm font-semibold text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" href="/accounts/signup/" > Get Started </a> <span class="pb-1 font-bold">or give it a go 馃憞</span> </div> <div data-controller="image-generator" class="flex flex-col gap-8 mt-10 md:flex-row" data-image-generator-user-key-value="" > <div class="w-full md:relative md:w-1/2"> <form data-action="submit->image-generator#generate" class="space-y-4"> <input type="hidden" name="csrfmiddlewaretoken" value="mP7ZFGlWiF0dNceQne9oVL8xSecMPfRaQsgiQINyzyxZv8jQy5dDaOON9aukwFaQ"> <div> <label for="site" class="block mb-1 text-sm font-medium text-gray-700">Size</label> <select id="site" name="site" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> <option value="x">X (Twitter)</option> <option value="meta">meta</option> </select> </div> <div class="md:relative"> <label for="style" class="block mb-1 text-sm font-medium text-gray-700">Style</label> <select id="style" name="style" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> <option value="base">Base</option> <option value="logo">Logo</option> </select> </div> <div class="md:relative"> <label for="font" class="block mb-1 text-sm font-medium text-gray-700">Font</label> <select id="font" name="font" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> <option value="helvetica">Helvetica</option> <option value="markerfelt">Marker Felt</option> <option value="papyrus">Papyrus</option> </select> </div> <div> <label for="title" class="block mb-1 text-sm font-medium text-gray-700">Title</label> <input type="text" id="title" name="title" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="subtitle" class="block mb-1 text-sm font-medium text-gray-700">Subtitle</label> <input type="text" id="subtitle" name="subtitle" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="eyebrow" class="block mb-1 text-sm font-medium text-gray-700">Eyebrow</label> <input type="text" id="eyebrow" name="eyebrow" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="image_url" class="block mb-1 text-sm font-medium text-gray-700">Background Image URL</label> <input type="url" id="image_url" name="image_url" class="px-3 py-2 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> <div> <button type="submit" class="px-4 py-2 w-full text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> Generate Image </button> </div> </form> </div> <div class="w-full md:w-1/2 md:mt-10"> <div data-image-generator-target="generatedImage" class="flex overflow-hidden justify-center items-center bg-gray-100 rounded-lg aspect-video"> <p class="text-gray-500">Generated image will appear here</p> </div> <div class="mt-4"> <label for="generate-link" class="block mb-1 text-sm font-medium text-gray-700">Generated Link</label> <div class="flex flex-col"> <textarea id="generate-link" data-image-generator-target="generateLink" readonly class="px-3 py-2 mb-5 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" rows="11"></textarea> <button type="button" data-image-generator-target="copyButton" data-action="click->image-generator#copyGenerateLink" class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> Copy </button> </div> </div> </div> </div> </div> </div> </div> <footer class="bg-white"> <div class="px-6 py-12 mx-auto max-w-7xl md:flex md:items-center md:justify-between lg:px-8"> <div class="mt-8 md:mt-0"> <p class="text-xs leading-5 text-center text-gray-500"> © 2024 <a href="https://lvtd.dev" target="_blank">LVTD, LLC</a>. All rights reserved. </p> </div> <div class="text-xs leading-5 text-center text-gray-500"> <a href="https://statushen.com/osig/" class="text-xs leading-5 text-center text-gray-500 underline">Status</a> </div> </div> </footer> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "OSIG", "description": "Generate Beautiful OG Images for Your Site... For Free!", "thumbnailUrl": "https://osig.app/g?site=x&style=logo&font=markerfelt&title=OSIG&subtitle=Generate Beautiful OG Images for Your Site... For Free!&image_url=https://osig.app/static/vendors/images/logo-square.png", "url": "https://osig.app/", "author": { "@type": "Person", "givenName": "Rasul", "familyName": "Kireev", "url": "https://rasulkireev.com/" } } </script> </body> </html>

CINXE.COM

OSIG