# 10 Amazing og:image Inspiration 🎨✨

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd9c6edpeb1ko47n3j0v.png)

> 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](https://calendly.com/)** 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](https://images.ctfassets.net/k0lk9kiuza3o/6GX3BEB2StTLRWYuFW9UBj/23d815c203c7f9dbd25a024ce1842ee8/Homepage.png) 

### 2. Billi

**[Billi](https://billi.app/)** 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. 

![Billi og:image](https://billi.app/static/img/billi/share.png)


### 3. Notion

**[Notion](https://www.notion.so/)**, 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](https://pbs.twimg.com/card_img/1431822999066316800/vDVmITIR?format=jpg&name=large)


## 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](https://unshift.jp)** has a very unique design, which intrigued the client/visitor to find out who is the awesome designer behind that banner.

![Unshift og:image](https://unshift.jp/img/common/ogp.png)

### 5. Ali Ali

**[AliAli](https://alitwotimes.com/)**, as a commercials director showcase their masterpiece straight from their `og:image`. Check it out!

![Aliali og:image](https://alitwotimes.com/wp-content/themes/aliali/src/assets/img/og-image.jpg)


### 6. Julia Johnson

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

![Julia John og:image](https://www.juliajohnson.com/resources/images/social-share.png)


## Blog 

### 7. How Many Plants

**[How Many Plants](https://howmanyplants.com/)**, if you are a plant lover, are you intrigued to click on it? I'm sure you do!

![How many plants og:image](https://uploads-ssl.webflow.com/5f4e8114a9640d4aa2c637c4/606612f5dece3e9f9f64e387_home%20metatag-export.png)


### 8. Dev.to

**[Dev.to](https://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](https://hcti.io/v1/image/67314343-007c-423c-93e9-fdfdf20506f8)

### 9. IndieHackers

**[Indiehackers](https://www.indiehackers.com/)**, 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](https://storage.googleapis.com/indie-hackers.appspot.com/shareable-images/posts/ab51c3d51c)


### 10. Daily Dev

Lastly, another dynamic `og:image` that showcase the blog easily. Check out **[Daily Dev](https://daily.dev/)** to see the awesome design.

![Daily Dev og:image](https://assets.website-files.com/5e0f1144930a8bc8aace526c/5ef3ba7c65db641419abf576_ffbjjh3yv9u8ue6zp954.png)

# 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!


***