When someone pastes a link to a web tool into a chat app, the app fetches the page and builds a little preview card: a title, a short description, and an image. If the page has no Open Graph tags, the preview falls back to whatever the crawler guesses — usually the first text it finds and no image at all. That first impression is worth getting right, especially for a tool whose whole point is a single pasted link.

I learned this while building ramrom.io, a free video downloader. My homepage was working fine in the browser, but whenever I shared it in WhatsApp or on Facebook, the preview looked empty. There was a title and nothing else — no image, no description. It looked like a dead link.

What Open Graph actually is

Open Graph is a set of <meta> tags in the <head> of a page. They tell crawlers what the page is, in a vocabulary they understand. The essential ones are:

<meta property="og:title" content="RamRom — Free TikTok, Instagram & YouTube Video Downloader"> <meta property="og:description" content="Paste a video link, pick a quality, and download it. No sign-up, no app to install."> <meta property="og:type" content="website"> <meta property="og:url" content="https://ramrom.io/"> <meta property="og:image" content="https://ramrom.io/og-image.png">

The og:image is the one people forget, and it matters most. A preview card without an image looks unfinished. A preview card with one looks like a real product. The image needs to be an absolute URL — a relative path will not work, because the crawler is fetching it from its own servers, not from your site.

The image itself

The recommended size is 1200 by 630 pixels, roughly a 1.91:1 ratio. That is the size Facebook and most chat apps crop to. I made mine a simple design: the site name, a short line about what it does, and a plain background. No need for a designer — a flat colour background with clear text reads better at small sizes than a busy screenshot.

Two mistakes I made here. First, I used a relative path for the image and wondered why it never appeared. Second, I uploaded an image that was 1200 pixels wide but only 200 tall. Facebook cropped it into a thin strip and it looked worse than nothing. Keep the ratio close to 1.91:1 and test it with the sharing debugger before you call it done.

Twitter cards are a separate tag

Twitter, now X, reads Open Graph tags as a fallback, but its own card tags take priority. If you want the large image card there, add:

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="RamRom — Free Video Downloader"> <meta name="twitter:description" content="Paste a video link, pick a quality, and download it."> <meta name="twitter:image" content="https://ramrom.io/og-image.png">

You do not need a Twitter account for these to work. The crawler reads the tags and builds the card.

Per-page tags for a multi-page tool site

A single homepage card is not enough when a site has tool pages. My TikTok, Instagram, and YouTube downloader pages each describe a different thing, so each one gets its own title and description. I keep the same og:image across pages — one strong image is enough — but the title and description change per page.

I do this by hand in each HTML file. It is a few extra lines per page, and that is fine. A templating system would help on a bigger site, but on a site of eighteen pages the manual approach keeps me honest: I actually read what each page says before I ship it.

Testing before sharing

Never trust that the tags work until a crawler has actually read them. Facebook's Sharing Debugger and Twitter's Card Validator both fetch the page and show you exactly what the card will look like. They also show you the raw tags they found, which is how I caught my relative-path mistake.

One more thing: these tools cache what they fetch. If you fix a tag and re-test immediately, you will often see the old version. Both debuggers have a button to scrape the page again and clear the cache. Use it, or you will spend an hour fixing something that was already fixed.

Open Graph tags are ten lines of HTML. They take an afternoon to add properly, and they change how every shared link looks. For a tool that lives or dies on people pasting links, that is time well spent.