By Mehdi HassanWhat are Open Graph tags?
Open Graph tags are a set of HTML meta tags, placed in a page's head, that describe the page to social platforms and messaging apps. Facebook introduced the Open Graph protocol, and today LinkedIn, Slack, Discord, iMessage, WhatsApp and most other apps read it to build link previews.
When someone pastes your URL, the app fetches the page, reads the og tags and draws a card with your image, title and description. If the tags are missing, the app guesses from the page content, often badly. It's one of the technical terms in our SEO and AEO glossary.
Which Open Graph meta tags do you need?
Five Open Graph tags cover almost every case. X also reads its own twitter:card tag, which you set to summary_large_image for a full-width image card.
Tag | What it controls | Tip |
|---|---|---|
og:title | The bold headline in the card | Write it for a feed, not for search |
og:description | One or two lines under the title | State the benefit, not the brand |
og:image | The preview image | 1200 by 630 pixels is the size most platforms recommend |
og:url | The canonical address of the page | Match your canonical URL |
og:type | What kind of content it is | website for pages, article for posts |
twitter:card | The card format on X | summary_large_image for a big image |
Open Graph tags don't directly affect Google rankings. They affect what happens after someone shares your page, which shapes clicks, mentions and how people talk about you. Structured data does a different job, covered in what is schema markup.
How do og images affect launch shares?
The og image is most of the preview card, so it decides whether a shared launch link gets noticed in a crowded feed. On launch day, your link is pasted into LinkedIn posts, Slack channels and group chats, and each paste is a small ad you don't pay for.
We do this on our own blog: every Designify post gets its own generated og image showing the article title, its topic and the author's name, rather than one generic logo card. When a post is shared in Slack or on LinkedIn, the card tells the reader what the article is about before they click. Next.js makes this practical with ImageResponse, which renders the image from code instead of a design file; the opengraph-image convention is covered in the Next.js docs.
- Say the point in the image. A short headline beats a logo alone.
- Design for small sizes. Cards show tiny on phones, so use large type and few words.
- Keep the important part central. Some apps crop the edges.
- Make one per key page. Your homepage, pricing page and launch post each deserve their own.
Hypothetical example: a launch with and without og tags
For example, suppose a startup posts its new feature page on launch morning without og tags. LinkedIn pulls the first image on the page, a cropped team photo, and the title reads "Home". The post gets scrolled past.
With tags set, the same link shows a 1200 by 630 image reading "Automated invoicing for agencies", a clear title and a one-line benefit. Same post, same audience, but the card now does the explaining. That's why og tags belong on every launch page checklist.
How do you keep Open Graph tags right during a migration?
Open Graph tags are easy to lose when you move platforms, because each builder stores them differently. Webflow, Framer and Next.js all support them, but the fields don't carry over automatically. Our guide to migrating metadata, schema and Open Graph covers the mapping, and image SEO in migrations covers the image files themselves.
