CMSKite

Glossary · Sharing

Open Graph

Open Graph is a set of meta tags, such as og:title and og:image, that tells apps what to show when somebody shares a link: the title, picture and description in the preview card on WhatsApp, Facebook, LinkedIn or Slack. The protocol is published at ogp.me.

DashboardStart freeNo card. Your blog is live in a minute.

An example

The four tags every page needs (title, type, image and address), a description, and the article’s publishing date:

In the head of a post page · html
<meta property="og:type" content="article">
<meta property="og:title" content="How Much Does a Wedding Cake Cost?">
<meta property="og:description" content="Our 2026 prices for two- and three-tier wedding cakes, and how far ahead to order.">
<meta property="og:url" content="https://bakery.example/blog/wedding-cake-guide">
<meta property="og:image" content="https://bakery.example/images/wedding-cake.jpg">
<meta property="og:image:alt" content="A three-tier white wedding cake with fresh roses">
<meta property="article:published_time" content="2026-09-14T09:00:00+01:00">
<meta name="twitter:card" content="summary_large_image">

The last line is not Open Graph but X’s own card tag, asking for the large-picture preview. The og: tags use property, not name.

Why it matters for a small-business blog

Many readers of a small business’s blog never come from search. They come from a link in a WhatsApp group, an Instagram bio, a newsletter or a LinkedIn post. The preview card is what they see first, and a card with the post’s own photo and title is a better invitation than your logo or a blank box.

Common mistakes

  • Setting the tags with JavaScript. The apps that build previews read the HTML your server sends and do not run scripts. Tags added in the browser are not seen.
  • A short image address. Use the full https:// address of the image; an app cannot guess your domain.
  • No image, or the logo on every post. Without og:image apps show no picture or pick one themselves. Give each post its own.
  • An old preview after a change. Apps keep a copy of a link’s preview for a while. Facebook’s Sharing Debugger and LinkedIn’s Post Inspector fetch it again.
  • Forgetting the alt text. og:image:alt describes the picture for people who cannot see it.

How CMSKite handles it

  • One social image per post. Leave it empty and the post’s featured image is used.
  • On the free blog link, every post page has og:type article, title, description, address, image, site name, published and updated dates, section and tags, plus a large-picture card for X. The HTML comes from our server, so every app reads it.
  • With the embed, the script sets no Open Graph tags, and preview apps would not run it anyway: a link to a post on your site shows your blog page’s own preview. To share a post with its own picture, share its address on your free blog link, or render posts on your server with the API.
  • Through the API, each post has seo.ogImage with the same fallback; the Next.js example in Making your posts findable maps it to the tags above.

Sources

Questions

Why does my link preview show no picture?
Usually the page has no og:image, its address is not a full https address, or the tag is added by a script the preview app does not run. If you just fixed it, the app may still be showing an old copy.
Does Open Graph help SEO?
It is written for link previews, not for search results. Search engines read the title, meta description and structured data for those.

Checked