Enables any web page to become a rich object in a social graph.
-
Specs: https://ogp.me/.
-
Specs for sharing links: https://developers.facebook.com/docs/sharing/opengraph
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.other" /> <!-- website -->
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
<meta property="fb:app_id" content="123456789" /><meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:locale" content="en_GB" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" /><html>
<head>
<title>The Adventures of Kira and Morrison</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "The Adventures of Kira and Morrison",
"startDate": "2025-07-21T19:00:00-05:00",
"endDate": "2025-07-21T23:00-05:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"location": {
"@type": "VirtualLocation",
"url": "https://operaonline.stream5.com/"
},
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "The Adventures of Kira and Morrison is coming to Snickertown in a can't miss performance.",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/event_offer/12345_201803180430",
"price": "30",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"validFrom": "2024-05-21T12:00"
},
"performer": {
"@type": "PerformingGroup",
"name": "Kira and Morrison"
},
"organizer": {
"@type": "Organization",
"name": "Kira and Morrison Music",
"url": "https://kiraandmorrisonmusic.com"
}
}
</script>
</head>
<body>
</body>
</html>Sample preview:
- Check this type and subtypes for shoppable. ...
...
...
???
<!-- COMMON TAGS -->
<meta charset="utf-8">
<title>%TITLE%</title>
<!-- Search Engine -->
<meta name="description" content="%DESCRIPTION%">
<meta name="image" content="%IMAGE_URL%">
<!-- Schema.org for Google -->
<meta itemprop="name" content="%TITLE%">
<meta itemprop="description" content="%DESCRIPTION%">
<meta itemprop="image" content="%IMAGE_URL%">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="%TITLE%">
<meta name="og:description" content="%DESCRIPTION%">
<meta name="og:image" content="%IMAGE_PREVIEW%">
<meta name="og:url" content="%URL%">
<meta name="og:site_name" content="%SITE_NAME%">
<meta name="fb:admins" content="%FACEBOOK_ID%">
<meta name="fb:app_id" content="%APP_STORE_ID%">
<meta name="og:type" content="website">type Metadata = {
title?: string
description?: string
keywords?: string[]
favicon?: string
author?: string
oEmbed?: {
type: 'photo' | 'video' | 'link' | 'rich'
version?: string
title?: string
author_name?: string
author_url?: string
provider_name?: string
provider_url?: string
cache_age?: number
thumbnails?: [{
url?: string
width?: number
height?: number
}]
}
twitter_card: {
card: string
site?: string
creator?: string
creator_id?: string
title?: string
description?: string
players?: {
url: string
stream?: string
height?: number
width?: number
}[]
apps: {
iphone: {
id: string
name: string
url: string
}
ipad: {
id: string
name: string
url: string
}
googleplay: {
id: string
name: string
url: string
}
}
images: {
url: string
alt: string
}[]
}
open_graph: {
title: string
type: string
images?: {
url: string
secure_url?: string
type: string
width: number
height: number
}[]
url?: string
audio?: {
url: string
secure_url?: string
type: string
}[]
description?: string
determiner?: string
locale: string
locale_alt: string
videos: {
url: string
stream?: string
height?: number
width?: number
tags?: string[]
}[]
article: {
published_time?: string
modified_time?: string
expiration_time?: string
author?: string
section?: string
tags?: string[]
}
}
}