Here’s a structured breakdown of what this document is showing:
Overview
The Open Graph Protocol (OGP) allows any webpage to become a “rich object” within a social graph (such as Facebook, LinkedIn, or other platforms). By adding <meta> tags inside the <head> of an HTML page, developers can specify how the page should appear when shared.
Required Metadata
Every page needs four core properties:
- og:title – Title of the object (e.g., “The Rock”).
- og:type – The object’s type (e.g.,
website,video.movie, etc.). - og:image – A representative image (URL).
- og:url – The canonical URL (permanent ID in the graph).
Optional Metadata
Additional recommended properties include:
- og:audio – An audio file.
- og:description – A short description.
- og:determiner – Word before title (e.g., “the”).
- og:locale / og:locale:alternate – Page locale(s).
- og:site_name – Parent site name.
- og:video – A related video.
Structured Properties
Some objects (image, video, audio) allow extended metadata:
- For images:
og:image:url,og:image:secure_url,og:image:type,og:image:width,og:image:height,og:image:alt.
- For videos:
- Same properties as image.
- For audio:
og:audio,og:audio:secure_url,og:audio:type.
Arrays
Multiple <meta> tags can be used if a property has several values (e.g., multiple og:image entries).
Object Types
- Music:
music.song,music.album,music.playlist,music.radio_station. - Video:
video.movie,video.episode,video.tv_show,video.other. - Articles/Books/Profiles/Payments/Websites:
article,book,payment.link,profile,website.
Each has its own additional metadata (e.g., book:isbn, article:author, video:actor).
Supported Data Types
The spec defines valid types for properties:
- Boolean
- DateTime (ISO 8601)
- Enum
- Float
- Integer
- String
- URL
Developer Tools
- Facebook Debugger
- Google Rich Snippets Testing Tool
- Libraries in PHP, Python, Ruby, Java, Perl, etc.
✅ In short: This HTML is the official Open Graph Protocol documentation, which explains how to add OGP <meta> tags in a webpage’s <head> section so platforms like Facebook, LinkedIn, or Twitter can generate rich previews.
Would you like me to summarize this into a practical implementation guide (with a modern example for SEO + social sharing), or do you prefer a line-by-line explanation of the HTML you pasted?