Enverything to know about Open Graph

Open Graph controls how your links appear when shared and with a few adjustments you can completely transform your brand's first impression.

Portrait photo of Christian Huff, CFO at Iridium Works

Lucas Weiper

CEO

Table of Contents

Connect with us

This is also a heading
This is a heading

The hidden power of Open Graph and why your shared links might not look the way you want

Most people only notice Open Graph when it is missing.
A client recently messaged me on WhatsApp asking why our shared links always look so polished. Clean preview image. Matching title. Short description. Balanced layout. His previews looked random and inconsistent.

The reason is Open Graph.
And once you understand how it works you will never ignore it again.

What is Open Graph

Open Graph is a set of meta tags inside the HTML head of a webpage. These tags tell platforms like LinkedIn Facebook X or WhatsApp what should appear in the preview when a link is shared. Without these tags platforms guess the content often with poor results.

Why Open Graph matters

A link preview is the first impression of your website outside your website.
It influences how trustworthy professional and engaging your brand appears.
When done well it increases click through rates and brand consistency.

The most important Open Graph attributes

Below is a table containing the key attributes and what they do.

Attribute	Purpose
og:title	Defines the title shown in link previews
og:description	Short summary or teaser text
og:image	Preview image displayed when the link is shared
og:url	Canonical URL the preview belongs to
og:type	Defines the content type for better platform handling

Optional but useful attributes

Attribute	Purpose
og:site_name	Name of the website for brand consistency
og:locale	Defines language and region
og:image:width	Image width for better scaling
og:image:height	Image height for better scaling

Where Open Graph is used

Platforms that rely on Open Graph include:

LinkedIn
Facebook
WhatsApp
Slack
X
iMessage
Discord

Any modern platform that shows link previews uses Open Graph as the foundation.

How we used Open Graph to transform a client project

For a recent project we created a full Open Graph setup for every subpage.
We designed images matched titles with page intent wrote custom descriptions and added a dedicated Open Graph section inside the CMS for future blog posts.
The client was surprised how much this changed the perception of his brand.
Every shared link looked intentional instead of accidental.

Iridium Works Website: Open Graph Images in Figma

The benefits of proper Open Graph optimization

Strong first impression outside your website
Higher click through rates
Consistency across all social and messaging platforms
Better brand perception in group chats and communities
More control over how your content appears when shared

When you invest a few minutes per page you create a visual identity that follows your brand everywhere.

About the Author

Lucas is a serial entrepreneur with a passion for design and software development. Over the years he has build multiple companies and helped brands all over the world bring digital experiences to their customers. He writes about new technology, design trends and goes into depth on web technology.

Lucas Weiper

CEO

at Iridium Works

📍

Koblenz, Germany

Blog

Advanced Insights.

Access our exclusive whitepapers, expert webinars, and in-depth articles on the latest breakthroughs and strategic implications of webdesign, software development and AI.

Visit Blog