HTML Meta Open Graph Tags

HTML

Summary

Websites/Apps are very inconsistent with how they implement the tags and which ones they use. Some even change it.

A few notes

  • use "theme-color" to change colour of accents
  • twitter:card is still required for certain features such as summary_large_image
  • Better to put too many tags than not enough
  • The rest is trial and error

Website

<head> <meta property="og:type" content="website"/> <meta property="og:site_name" context="Code Tips"/> <meta property="og:url" content="/html/meta-og-tags"/> <meta property="og:title" content="Meta Open Graph Tags"/> <meta property="og:description" content="Simple summary of common Open Graph Tag types."/> <meta property="og:image" content="https://codetips.libr.dev/codetipslogo.png"/> <meta property="og:image:secure_url" content="https://codetips.libr.dev/codetipslogo.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="806" /> <meta property="og:image:height" content="806" /> <meta property="og:image:alt" content="A shiny site logo" /> <meta name="theme-color" content="#ff9800"> </head> For a page that uses this, see Example 1

Preview

Meta Open Graph Tags

Simple summary of common Open Graph Tag types.

Article

<head> <meta property="og:type" content="article"/> <meta property="og:site_name" context="Code Tips"/> <meta property="og:url" content="/html/meta-og-tags"/> <meta property="og:title" content="Meta Open Graph Tags"/> <meta property="og:description" content="Simple summary of common Open Graph Tag types."/> <meta property="og:image" content="https://codetips.libr.dev/codetipslogo.png"/> <meta property="og:image:secure_url" content="https://codetips.libr.dev/codetipslogo.png" /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="806" /> <meta property="og:image:height" content="806" /> <meta property="og:image:alt" content="A shiny site logo" /> <meta name="twitter:card" content="summary_large_image" /> <!-- required --> <meta name="theme-color" content="#ff9800"> </head> For a page that uses this, see Example 2

Preview

Meta Open Graph Tags

Simple summary of common Open Graph Tag types.

Video

<head> <meta property="og:type" content="video"/> <meta property="og:site_name" context="Code Tips"/> <meta property="og:url" content="/html/meta-og-tags"/> <meta property="og:title" content="Meta Open Graph Tags"/> <meta property="og:description" content="Simple summary of common Open Graph Tag types."/> <meta property="og:image" content="https://codetips.libr.dev/codetipslogo.png"/> <meta property="og:video" content="https://www.w3schools.com/tags/movie.mp4"/> <meta property="og:video:secure_url" content="https://www.w3schools.com/tags/movie.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="320" /> <meta property="og:video:height" content="240" /> <meta name="theme-color" content="#ff9800"> </head> For a page that uses this, see Example 3

Preview

Meta Open Graph Tags

And more!

There are many more types (but I was unable to test) including:

  • Books
  • Profile
  • Music

Sources