Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Programmable “link preview” thumbnails for your website's pages (ogimg.io)
18 points by lot3oo on Dec 17, 2021 | hide | past | favorite | 9 comments



Hi HN,

After years of doing SAAS apps for others in the agency world, I'm finally working on own first ever SAAS app!

It lets you easily add these dynamic, templated "Link preview" images to your pages so that when they are shared, a nice picture with tailored information can be shown instead of a generic stock image or something irrelevant.

It's not a new idea: github.com and dev.to already do this (you can see custom pictures for every link), but it requires a lot of infrastructure work / puppeteer configuration that not every one can afford to do.

This service allows any site (Wordpress, shopify, laravel, react, vue etc...) to easily add them.

This is the first time I share it online. I'm at a point where I need to gather feedback from real users. At the moment it's completely free, but if it gains traction and higher traffic sites use it, I will have to add paid plans to make it sustainable. Free account will still work but with a capped amount of requests (that should be high enough for smaller sites to stay on a free plan)...

While I'm here, any better name ideas for the project? I stuck with ogimg.io, but turns out my friends see this as "Original Gangster images" instead of "Open Graph images"...

Anyways, first ever full-on SAAS product I roll out on my own so I'm pretty excited to see where it goes!


> I'm at a point where I need to gather feedback from real users. At the moment it's completely free, but if it gains traction and higher traffic sites use it, I will have to add paid plans to make it sustainable

You can check out bannerbear (and bunch of others) who are already in this space. There is a clear need here. Wish you Good luck for your first SAAS journey.


Very nice. og:image should be static, and I guess you render it once and cache the result on your site. I wish there is an easy way to download the rendered result and free you the burden of hosting the image. In other word, make it more like a og:image designer for free. You can charge money for the convenience of hosting the result.


Hi Derek, thanks for trying it out! I think adding a download button would be a good idea indeed, but maybe it's not clear enough how to "use" your template. The point of having it hosted by this external service was that it can dynamically generate all your pictures, for all your content, based on your content's data.

In JavaScript, for example, on a theoretical blog site, you could configure it like this:

const article = await fetchArticle(router.query.id);

const queryString = new URLSearchParams(article).toString();

const url = `https://cdn.ogimg.io/v1/u/your-name/blog?${queryString}`;

// add this in the <head> where appropriate...

<meta property="og:image" content="${url}" />

This will add nice pictures for all your articles at once based on your template.

I think I need to make this more clear!


I understand; I was thinking from your angle. Rendering and hosting images is a big effort, what if someone change the query string slightly and you would lose the caching opportunity?

With a static site generator I can make the og:image generation part of the build process and host the result myself. Less burden for you, more security for me.


Ah I see what you mean. This would be an easily supported use case actually (you can already do it by using the same URL and downloading the picture, but it's not documented). I need to add more documentation regarding this!

Thanks for sharing!


This is cool for sites without their own custom images. It’s picking up my custom images but cropping them and overlaying content which mostly obscures them, which I wouldn’t expect.


Yeah the use-cases I'm going for are sites that have a lot of content (pages), which would take too much time to create a custom image for each page.

Ex: blog posts, products, buy/sell sites, etc.

If your page already has a custom image made in photoshop with text on it, it's not very useful (as you would want to use your custom image anyways).

This needs to be clearer on the home page, thanks for trying it!


My site has a piece of generated art unique to each page. There’s no text on the images, but all of the metadata required to show a “card” format is present (and tested/working on several platforms).

You could probably detect a scenario where all of that is already present and maybe noop or have a more minimal presentation tailored for that.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: