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.
So, what is og? Well, we will leave it for another article.
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!
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.
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.
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.
AliAli, as a commercials director showcase their masterpiece straight from their
og:image. Check it out!
Another awesome screenshot of landing page as
og:image, who says that style only applicable to SaaS? 😉
How Many Plants, if you are a plant lover, are you intrigued to click on it? I'm sure you do!
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.
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.
Lastly, another dynamic
og:image that showcase the blog easily. Check out Daily Dev to see the awesome design.
If you are interested to see more information regarding
og:* (Open Graph Protocol), follow me!!!
See ya! Cheers!