Designing an eye-capturing og:image can be easy, and can be difficult. That's why, let's look at some of the awesome design that I've curated here. But before that, just in case you don't know what is og:*, here's a small preview of what og can do to display your website beautifully on Facebook.

Facebook display OG

So, what is og? Well, we will leave it for another article.

10 list of `og:image` inspiration

SaaS

1. Calendly

As a popular software, Calendly no doubt has one of the most simple and beautiful og:image. Just a simple screenshot of your landing page is sufficed. If you are building a Software-as-a-Service, this approach is highly encouraged! Calendly og:image

2. Billi

Billi is another software that has a beautiful preview link when shared on social media.(Facebook, Twitter, Discord, etc.). The emphasis on Mobile Device as shown in the og already provides the visitors that this is a mobile apps before landing on their websites.

3. Notion

Notion, is well-known for its minimalistic design, and flexible integrations with a tons of software. The monotone art, with white background style really distinguished them from the other SaaS.

Notion og:image

Portfolio (Agency/Personal)

4. Unshift

For a agency/personal website, first impression is always the key to client's heart. When you share your website on social media. Unshift has a very unique design, which intrigued the client/visitor to find out who is the awesome designer behind that banner.

Unshift og:image

5. Ali Ali

AliAli, as a commercials director showcase their masterpiece straight from their og:image. Check it out!

Aliali og:image

6. Julia Johnson

Another awesome screenshot of landing page as og:image, who says that style only applicable to SaaS? 😉

Blog

7. How Many Plants

How Many Plants, if you are a plant lover, are you intrigued to click on it? I'm sure you do!

How many plants og:image

8. Dev.to

Dev.to is a Developer focused community. This is not the normal og:image, this is the dynamic image that auto-generated for every blogpost that has no cover photo.

Devto og:image

9. IndieHackers

Indiehackers, let developers and entrepreneur to share they strategies and revenue, thus og:image design is so awesome in attracting anyone scrolling through social media.

Indiehacker og:image

10. Daily Dev

Lastly, another dynamic og:image that showcase the blog easily. Check out Daily Dev to see the awesome design.

Daily Dev og:image

That's it!

If you are interested to see more information regarding og:* (Open Graph Protocol), follow me or join the newsletter!

See ya! Cheers!

10 Amazing og:image Inspiration 🎨✨

Comments

More from this blog

Idea to Production in 2 days, thanks to...

I Design, You Build! - Frontend Challenge #4 (Supabase version)

I Design, You Build! - Frontend Challenge #3

Supabase Hacktoberfest Hackathon

I Design, You Build! - Frontend Challenge #2

10 list of `og:image` inspiration