ZipKit
Glossary

Open Graph

Open Graph is a metadata protocol that lets a web page declare its own title, type, image and URL through og: meta tags, so social platforms can build a link preview. Four properties are required: og:title, og:type, og:image and og:url. The protocol is published at ogp.me and is based on RDFa, which is why the tags use the property attribute instead of name.

How it works

You place meta tags in the head of the page. A crawler from a chat app or social network fetches the HTML, reads the og: tags and builds the preview card from them. Put the tags in the HTML your server sends, so that a crawler that reads only the raw response still finds them.

  • Required: og:title (the object's title), og:type (for example website or article), og:image (an image URL) and og:url (the canonical URL, used as the permanent ID).
  • Optional: og:description (one to two sentences), og:site_name, og:locale (default en_US), og:audio, og:video and og:determiner.
  • Structured image properties: og:image:width, og:image:height, og:image:type, og:image:secure_url and og:image:alt. The spec says a page that sets og:image should also set og:image:alt.
  • Arrays: repeat the same tag for multiple values. The first tag from the top wins when a consumer can only use one.
  • Namespaces: the spec examples declare the og prefix with a prefix attribute on the html or head element, as in the markup below.
<head prefix="og: https://ogp.me/ns#">
<meta property="og:title" content="ZipKit Pricing" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/pricing/" />
<meta property="og:image" content="https://example.com/img/pricing.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Pricing table with three plans" />
</head>

Running a small Python html.parser script over that markup prints each property with its value and then checks the four required tags:

og:title         ZipKit Pricing
og:type          website
og:url           https://example.com/pricing/
og:image         https://example.com/img/pricing.png
og:image:width   1200
og:image:height  630
og:image:alt     Pricing table with three plans
missing required: none

What size should an og:image be?

Use at least 1200 x 630 pixels. Facebook's sharing documentation says this gives the best display on high-resolution devices, sets 600 x 315 as the minimum for a large image card, 200 x 200 as the smallest allowed dimension, and 8 MB as the file size limit. The Open Graph spec itself defines no size, only the width and height properties that declare it.

Common pitfalls

  • Missing required tags: a page with only og:title and og:type has no og:image or og:url, and the same parser check reports missing required: ['og:image', 'og:url']. Add all four.
  • Relative image URLs: the spec limits its URL type to the http and https protocols, and every example in it is absolute. Use the full https URL, not a path like /img/a.png.
  • Tags added late by JavaScript: a fetcher that only reads the HTML response never sees them. Render the tags on the server.
  • Replacing the image at the same URL: Facebook caches images by their URL, so a new file at the old address will not update. Its docs say to use a new URL for a new image and keep the old one online for existing shares.
  • og:url that disagrees with the canonical URL: the spec uses og:url as the object's permanent ID, so variants of one page can look like different objects. Keep it equal to the page's Canonical URL.
  • Blocking the fetcher: if robots.txt or a firewall rule stops the platform's crawler from reading the page, it cannot read the tags either.

Related terms

  • Canonical URL — og:url should match the page's canonical address.
  • Structured data — a separate markup layer for search engines, where Open Graph targets link previews.
  • robots.txt — controls whether a crawler may fetch the page that carries the tags.
  • Hreflang — og:locale and og:locale:alternate describe languages for previews, while hreflang does it for search.

See also

  • Term: Canonical URL — keep og:url consistent with the page's canonical address.