# Adding OG Images to VibecodersPH: My Noob Experience > Link previews aren't optional, they're part of your brand. Here's how I, a design non-expert, added Open Graph images to our site. - Author: Jayson Cunanan - Published: 2025-09-29 (updated 2026-09-28) - Category: Web Development - Tags: Open Graph, Social Media, SEO, Meta Tags, Branding - Canonical URL: https://www.vibecoders.ph/blog/adding-og-images-vibecoders-noob-experience - Publisher: Vibe Coders PH (https://www.vibecoders.ph) > **Short answer:** Link previews on Slack, LinkedIn, X, and Facebook are powered by Open Graph meta tags, especially `og:image`. I fixed ours by designing a 1200x630px image with Bulktopus and ChatGPT for the mockup, then adding it to the codebase. The site now generates a unique preview image per page automatically. Those preview images you see on Slack, LinkedIn, Twitter (X), or Facebook when someone shares a link? They're called link previews, and they're still not that easy to make. Yes, there are services and APIs to help, but they all come with little annoyances depending on your experience. For me, I'm a total noob at this. Honestly, I didn't even want to do it. But these are the little things that make a brand. Imagine sending your startup site to an investor on LinkedIn chat and it just shows a blank gray box. This is my experience fixing it. ![Before: link preview without an OG image, showing a blank gray box instead of a thumbnail](/no-og.png) ## What even is Open Graph? If you ask your favorite AI agent "I want to improve link previews on social sites, guide me," you'll get something like: "Implement Open Graph meta tags and a Twitter Card." Open Graph is a protocol [originally developed at Facebook](https://ogp.me/) that lets any web page describe itself as a rich object when it's shared. Every page needs four core tags: `og:title`, `og:type`, `og:image`, and `og:url`. That's what tells Slack, LinkedIn, X, and Facebook what title, description, and image to show when someone shares your link. The catch: you actually need to design a proper image, and add it to your codebase. ## Choosing a tool I don't want to design images manually. I have no design skill. There are a bunch of options, but I ended up using [Bulktopus](https://www.bulktopus.com/). It's free, doesn't require sign-up for the basic tools, has no-code design, and comes with pre-built sizes for OG images. It has limitations though: few design options (colors, typography, fixed text locations), and I found I had to share to X or LinkedIn before I could download, which was annoying. But it works. The hardest part was the design itself. Luckily, ChatGPT helped brainstorm colors, text, and layouts, and even generated mockups. I couldn't replicate everything exactly in Bulktopus because of its limits, but it was enough to get started. Here's the OG image I ended up with: ![Final OG image with purple gradient and Vibe Coders PH branding](/og-image.png) Saved as `/public/og-image.png` (1200x630px). ## More pages need more OG images My coding agent suggested creating different OG images for different pages: `/public/og-image.png` for the main site, a projects-page version, a course version, and one per blog post. That means different statements, maybe even slight design changes for each. I left that as an exercise for our core members at the time. ## The bigger idea: automating OGs Here's where I started thinking about a business opportunity. What I actually wanted was for my coding agent, already aware of my brand, colors, text, and logo, to just make all OG images automatically and integrate them into the codebase. With MCP (see our [MCP guide](/blog/model-context-protocol-mcp-guide)), an AI agent could generate branding copy and design, create multiple OG variants, place them in the right folders, and update the meta tags automatically. Basically, recreate my whole workflow end to end. I still think that's worth building. ## Update, September 2026 We did eventually automate it. The site now generates a unique OG card per post at build time, at `/og/blog/.png`, pulling the post's category, title, author, and read time straight from its content instead of a hand-designed image. You can see one live at [`/blog/what-is-vibe-coding`](/blog/what-is-vibe-coding). No more Bulktopus round-trip for every new post, though the hand-designed brand version documented above is still what set the visual direction. ## Frequently asked questions ### Why did the link preview show a blank gray box before I added an image? Without an `og:image` tag, or with a broken image path, most platforms fall back to a blank placeholder or skip the image entirely. The `og:image` tag has to point to a reachable, correctly sized image for the preview to render. ### What size should an OG image be? 1200x630px is the standard most guides and tools, including Bulktopus, build around, and it renders correctly on Facebook, LinkedIn, X, Slack, and Discord. Facebook's own guidance caps the file at 8MB. ### How do I check whether my OG tags are actually working? Use [Facebook's Sharing Debugger](https://developers.facebook.com/tools/debug/) to preview how a link renders on Facebook and catch tag errors, and [LinkedIn's Post Inspector](https://www.linkedin.com/post-inspector/) to do the same for LinkedIn. Both also force the platform to re-scrape a cached preview. ### Can Next.js generate OG images automatically instead of designing them by hand? Yes. Next.js supports an `opengraph-image` file convention: either drop in a static image per route, or export a function using `ImageResponse` from `next/og` to generate one in code, per page, at build time. ### Do I need a different OG image for every single blog post? Not strictly, but it helps. A generic site-wide image works for the homepage and static pages; per-post images that include the post title give sharers more context and tend to get more clicks. ## Sources - [The Open Graph protocol](https://ogp.me/). - [opengraph-image and twitter-image file conventions](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image), Next.js documentation. - [Sharing Debugger](https://developers.facebook.com/tools/debug/), Meta for Developers. - [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/), LinkedIn. - [Bulktopus](https://www.bulktopus.com/), OG image generator.