We are currently working on developing the MishMash webpages. Since I don’t like adding and editing the same information in multiple places, I have been interested in whether the MishMash pages can (as far as possible) “automagically” collect information from other locations.
When setting up our partner events pages, I realised that it was possible to collect most of the useful information (title, location, date, image) from the metadata of the pages already hosted on other websites. This makes it much easier to add partner events than if we had to set up our own pages on MishMash.no, which would also duplicate much content. The standard making this happen is called Open Graph. Since I didn’t know about this before I began my little adventure, here is a short overview.
The History of Open Graph
Open Graph was introduced by Facebook in 2010 as a way for any web page to declare itself as a “rich object”: something with a defined type, a canonical URL, a title, a description, and an image. The idea is formalised in the Open Graph protocol, and the name comes from Facebook’s ambition at the time to build a “social graph” connecting content across the web. On a sidenote, I could mention that, at the time, Facebook was still a positive force, but it quickly went downhill, and I decided to leave the sinking ship in 2014.
All the current problems with Facebook aside, the Open Graph specification was simple and useful enough that it was quickly adopted everywhere. Today, most social platforms, chat applications, and search engines read Open Graph tags when deciding how to display a shared link.
How Open Graph works
Open Graph tags live in the <head> section of an HTML page as <meta> tags with a property attribute prefixed by og:. A minimal set for a blog post looks like this:
<head>
<meta property="og:title" content="Understanding the Open Graph Standard" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.arj.no/2026/04/23/open-graph-explained/" />
<meta property="og:description" content="What Open Graph is, where it came from, and how it lets web pages share structured information." />
<meta property="og:image" content="https://www.arj.no/images/2026/04/open-graph-preview.jpg" />
</head>
That is all you need. When a web page fetches that URL, it reads these five tags and builds the preview card from them. No JavaScript runs, no API is called, it is simply static, declarative HTML.
The core tags
The official specification defines a small set of basic tags that every page should include:
| Tag | Purpose |
|---|---|
og:title | The title as it should appear in a share preview |
og:type | The type of content: website, article, profile, book, etc. |
og:url | The canonical URL of the page |
og:image | An image to show in the preview (ideally 1200×630 px) |
og:description | A one- or two-sentence summary |
og:site_name | The name of the overall site |
og:locale | The language, e.g. en_US or nb_NO |
Beyond the basics, the specification also defines richer type-specific tags. For og:type = "profile", for instance, you can add:
| Tag | Purpose |
|---|---|
profile:first_name | Given name |
profile:last_name | Family name |
profile:username | A short identifier |
profile:gender | Gender |
For og:type = "article":
| Tag | Purpose |
|---|---|
article:published_time | ISO 8601 publication date |
article:author | Profile URL of the author |
article:tag | One or more topic tags |
The Twitter/X Cards parallel system
Open Graph is not the only standard around. I came across Open Graph while exploring implementing Twitter Cards on another web page. This “standard” was developed by Twitter (now X) and uses name rather than property attributes:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Open Graph: How web pages talk to each other" />
<meta name="twitter:description" content="What Open Graph is and how it works." />
<meta name="twitter:image" content="https://www.arj.no/images/2026/04/open-graph-preview.jpg" />
As far as I can see, many platforms fall back to the og: tags when Twitter Card tags are absent, so if you implement Open Graph properly, you get decent Twitter previews for free.
The Schema.org family
Of course, there is a bigger story to be told as well. Schema.org JSON-LD is a richer, more expressive alternative backed by Google, Microsoft, and others. This standard can represent complex relationships; a Person who is a member of an Organisation which is a funder of a ResearchProject, for example.
For most practical purposes, the two complement each other. Open Graph is a simple standard which is good for social sharing and simple scraping. Schema.org JSON-LD is good for rich results and structured knowledge graphs. For the MishMash directory, I am primarily considering using Open Graph tags so far. However, we may want to move on to explore using a JSON-LD Person block when we get to that part.
How this blog uses Open Graph
I didn’t know this before now, but this Hugo-based blog uses the PaperMod theme, which automatically generates Open Graph tags for every page and post. The og:title comes from the front matter title, og:description from description, and og:image from the cover.image field. That is the beauty of structured, machine-readable data: you write something once, and it automagically connects to other things.
Thanks to CoPilot for helping with implementing Open Graph support on the MishMash website and for writing a draft for this blog post.