Summarize with AI
Open graph image design for a startup means treating the link preview as the first screen of your company. Give every key page its own 1200 by 630 image that names what you do in a few large words, then pair it with a title and a one sentence description that a stranger understands without clicking.
This matters more than it sounds. You send your link to prospects, investors and candidates all week, and most of them meet the company as a small card in a chat before they ever see the homepage. If the card looks like a placeholder, they decide what kind of company you are from the placeholder.
The card that says Home and Welcome to our website
Picture an example. A founder runs an AI tool that reads supplier contracts and flags risky terms for procurement teams. He has just finished a good call with the head of procurement at a manufacturer with six hundred people. She asked for the site so she could share it with her CFO.
He opens the shared Slack Connect channel, #pilot-contracts, and pastes the homepage address with a short note: here is the site, the security page is in the footer. Slack builds the preview a second later. The bold blue title says Home. The grey line under it says Welcome to our website. The image is the purple gradient from behind the hero, with no words on it, because the image tag points at the background file.
Nothing in that card says contracts, procurement, or AI. Nothing says who the company is for. The head of procurement now has to forward a gradient and the word Home to a CFO who has never heard of them.
The next morning he posts on LinkedIn about a new feature, the Redline view, and links to its page. The card shows the same gradient and the same word, Home, because every page on the site shares one set of tags. Later he texts the link to an angel investor, and the same blank card arrives there too.
What the founder does after the link goes out
He starts typing a line of explanation under every link he sends, so the message does the job the card does not. In some chats he sends a screenshot of the hero instead of the link. Someone in the pilot channel replies asking whether this is the right site.
He has looked at his homepage hundreds of times. He has never looked at it as a two line card in someone else's Slack, because the preview only shows up on the other person's screen. He knows what the product is, so the word Home reads fine to him. To the CFO it reads like a site nobody finished.
More people see the card than see the homepage
Every person who receives the link sees the preview. Only some of them click. That is simple arithmetic, and it means the card has a larger audience than any section of the site, including the hero. For a sales led company, those viewers are often the exact people who sign the contract: the CFO, the security reviewer, the partner at the fund who gets the intro email.
The cost is priced rather than counted. A card that says Home tells a buyer this is a small vendor, before your product has a chance to say otherwise. It shapes who takes the next call and how hard procurement pushes. Over the median of about 616 days between seed and Series A, measured across all sectors, your homepage link gets pasted into more chats, decks and intro emails than anyone can count. Each one is a first impression you did not see.
What most advice gets wrong about OG images
Most guides treat the Open Graph image as a meta tag chore. Drop the logo on a brand colour, export it at the right size, tick the box, move on. That advice is wrong for a startup that sells to strangers. A logo tells people nothing until they already know the company, and the whole problem is that they do not.
The preview deserves the same thinking as a hero section. It has the same job in less space: say what this is and who it is for, in the words the buyer already uses. The difference is that the hero gets a whole screen and the card gets a thumbnail and two lines of text. So it needs more discipline, not less effort.
The good examples do this plainly. Look at how Stripe and Linear title their homepages for sharing. Stripe's og:title reads Stripe | Financial Infrastructure to Grow Your Revenue. Linear's reads Linear, then The system for product development. Each one is the company name plus what the company is. None of it is clever. All of it is legible at small size.
One image per page type, not one image for the whole site
A single site wide image is how the Redline page ended up saying Home. The fix is not to design forty images by hand. It is to design one template per kind of page and fill it in. Most early sites need five.
- Homepage. The category in the buyer's word and who it is for, for example Contract review for procurement teams, next to one real product screen cropped to a single moment.
- Feature pages. The feature name and the one result it gives, with the screen that shows it. The Redline view card should show a redlined clause, not the gradient.
- Blog posts. The post title, large, on a fixed layout with your logo small in a corner. The title is what makes someone open it.
- Case studies. The client's category and the outcome the study actually shows, never a number the study does not state.
- Careers and security. Plain titles that match what the reader is checking. A security reviewer forwarding your trust page wants to see the word Security, not your tagline.
Size is the easy part. Facebook's sharing guide asks for images of at least 1200 by 630 pixels, kept close to a 1.91 to 1 ratio, and that size works well for most apps. Keep the words big and away from the edges, since you cannot control how every app crops the card. If a phone screen shows the card at thumb size and you can still read the line, it passes.
The image should carry one idea, the same one your site leads with. On the Sawdust website we designed and built for a music licensing company, the page had to explain in one scroll why a single owner means a single license. A preview for a site like that has one job: get that idea across before the brand's producer even clicks.
The title and description lines do half the work
The image gets the attention, but the two text lines get read. The Open Graph protocol defines four basic tags: og:title, og:type, og:image and og:url, and most sites add og:description as well. Slack's docs say it crawls each link and looks for common Open Graph and X Card metadata to build the preview, so these tags decide what appears in the channel.
Write og:title as the name of the page plus what it is. Acme | Contract review for procurement teams beats Home every time. Write og:description as one plain sentence: what the product does, for whom, and what changes. Flags risky terms in supplier contracts before legal sees them. No slogans, no welcome.
These lines often match your search title and meta description, and that is fine as a starting point. But a share has a different reader. Someone searching already typed the problem. Someone receiving a link from a colleague has no context at all, so the line has to supply it.
A preview audit you can run this week
This takes an afternoon and needs no designer for the first pass.
- List your five most shared links. Usually the homepage, pricing, your newest feature page, the latest blog post and the security or careers page.
- Paste each one where it really gets shared. A private Slack channel, a LinkedIn post draft and a text to yourself. Screenshot every card side by side.
- Read the cards as a stranger. Cover the address bar and ask: from this card alone, what does this company do, and who is it for? If the answer is not on the card, write it down. The five second test works on previews too.
- Fix the text lines first. Give every page its own og:title and og:description. Most site builders have a field for this on each page, and it fixes the word Home on day one.
- Design the templates. One per page type, at 1200 by 630, with the category line large and one real product moment. Point each page's og:image at its own file, not at a background.
- Force a refresh. Apps cache previews, so an old card can linger after you fix it. LinkedIn's Post Inspector lets you paste a link and fetch the new preview. Then paste every link again and compare the screenshots.
Make it part of launch. Every new page gets its card checked before anyone shares it, the same way you would check that the page loads on a phone.
Before the next link goes out
A link preview is the smallest surface your company owns, and for most buyers it is the first one they see. Treat it as part of the same job as the hero: a stranger should know what the company is before they click. Studio Maydit designs websites for AI founders in the US, UK and Europe, built in Framer, Webflow or custom code, and a fixed scope project takes three to four weeks. If your site looks smaller than your company in the places it gets shared, book a call and send us the link you paste most.
