parse-open-graph
Version:
Open Graph parser for browser
143 lines (139 loc) • 8.77 kB
HTML
<html lang="en">
<head prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# sitemap: https://kashajs.github.com/kasha/ns/sitemap#">
<meta charset="utf-8">
<title>Arrival of a Train at La Ciotat</title>
<meta property="og:title" content="Arrival of a Train at La Ciotat">
<meta property="og:description" content="L'arrivée d'un train en gare de La Ciotat is an 1895 French short black-and-white silent documentary film directed and produced by Auguste and Louis Lumière. Its first public showing took place in January 1896.">
<meta property="og:site_name" content="Open Graph protocol examples">
<meta property="og:type" content="video.movie">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="zh_CN">
<meta property="og:locale:alternate" content="ja_JP">
<meta property="og:url" content="http://examples.opengraphprotocol.us/video-movie.html">
<meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/train.jpg">
<meta property="og:image:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/images/train.jpg">
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="328">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/75.png">
<meta property="og:image:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/images/75.png">
<meta property="og:image:width" content="75">
<meta property="og:image:height" content="75">
<meta property="og:image:type" content="image/png">
<meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
<meta property="og:image:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/images/50.png">
<meta property="og:image:width" content="50">
<meta property="og:image:height" content="50">
<meta property="og:image:type" content="image/png">
<meta property="og:audio" content="http://examples.opengraphprotocol.us/media/audio/1khz.mp3">
<meta property="og:audio:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3">
<meta property="og:audio:type" content="audio/mpeg">
<meta property="og:audio" content="http://examples.opengraphprotocol.us/media/audio/250hz.mp3">
<meta property="og:audio:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3">
<meta property="og:audio:type" content="audio/mpeg">
<meta property="og:video" content="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf?src=http%3A%2F%2Fexamples.opengraphprotocol.us%2Fmedia%2Fvideo%2Ftrain.mp4">
<meta property="og:video:secure_url" content="https://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf?src=https%3A%2F%2Fd72cgtgi6hvvl.cloudfront.net%2Fmedia%2Fvideo%2Ftrain.mp4">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="472">
<meta property="og:video:height" content="296">
<meta property="og:video" content="http://examples.opengraphprotocol.us/media/video/train.mp4">
<meta property="og:video:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/video/train.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="472">
<meta property="og:video:height" content="296">
<meta property="og:video" content="http://examples.opengraphprotocol.us/media/video/train.webm">
<meta property="og:video:secure_url" content="https://d72cgtgi6hvvl.cloudfront.net/media/video/train.webm">
<meta property="og:video:type" content="video/webm">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="320">
<meta property="article:published_time" content="1972-06-18">
<meta property="article:author" content="http://examples.opengraphprotocol.us/profile.html">
<meta property="article:section" content="Front page">
<meta property="article:tag" content="Watergate">
<meta property="book:author" content="http://examples.opengraphprotocol.us/profile.html">
<meta property="book:isbn" content="978-1451648539">
<meta property="book:release_date" content="2011-10-24">
<meta property="book:tag" content="Steve Jobs">
<meta property="book:tag" content="Apple">
<meta property="book:tag" content="Pixar">
<meta property="video:director" content="http://examples.opengraphprotocol.us/profile.html">
<meta property="video:director" content="http://examples.opengraphprotocol.us/profile2.html">
<meta property="video:actor" content="http://examples.opengraphprotocol.us/profile.html">
<meta property="video:actor:role" content="Role in Move">
<meta property="video:writer" content="http://examples.opengraphprotocol.us/profile.html">
<meta property="video:series" content="http://www.imdb.com/title/tt1520211/">
<meta property="video:release_date" content="1895-12-28">
<meta property="video:duration" content="50">
<meta property="video:tag" content="La Ciotat">
<meta property="video:tag" content="train">
<meta property="music:creator" content="http://open.spotify.com/user/austinhaugen"/>
<meta property="music:release_date" content="2011-04-19">
<meta property="music:musician" content="http://open.spotify.com/artist/1dfeR4HaWDbWqFHLkxsg1d">
<meta property="music:musician" content="http://open.spotify.com/artist/0oSGxfWSnnOXhD2fKuz2Gy">
<meta property="music:album" content="http://open.spotify.com/album/7rq68qYz66mNdPfidhIEFa">
<meta property="music:album:track" content="2">
<meta property="music:duration" content="236">
<meta property="music:song" content="http://open.spotify.com/track/0pfHfdUNVwlXA0WDXznm2C">
<meta property="music:song:disc" content="1">
<meta property="music:song:track" content="1">
<meta property="music:song" content="http://open.spotify.com/track/2aSFLiDPreOVP6KHiWk4lF">
<meta property="music:song:disc" content="1">
<meta property="music:song:track" content="2">
<meta property="profile:first_name" content="John">
<meta property="profile:last_name" content="Doe">
<meta property="profile:gender" content="male">
<meta property="profile:username" content="johndoe">
<meta property="sitemap:changefreq" content="hourly">
<meta property="sitemap:priority" content="1">
<meta property="sitemap:news:publication:name" content="The Example Times">
<meta property="sitemap:news:publication:language" content="en">
<meta property="sitemap:news:genres" content="PressRelease, Blog">
<meta property="sitemap:news:stock_tickers" content="NASDAQ:A, NASDAQ:B">
<meta property="sitemap:image:loc" content="http://examples.opengraphprotocol.us/media/images/train.jpg">
<meta property="sitemap:image:caption" content="The caption of the image.">
<meta property="sitemap:image:geo_location" content="Limerick, Ireland">
<meta property="sitemap:image:title" content="The title of the image.">
<meta property="sitemap:image:license" content="https://creativecommons.org/licenses/by/4.0">
<meta property="sitemap:image:loc" content="http://examples.opengraphprotocol.us/media/images/75.png">
<meta property="sitemap:image:caption" content="caption">
<meta property="sitemap:image:geo_location" content="Shanghai, China">
<meta property="sitemap:image:title" content="title">
<meta property="sitemap:image:license" content="https://creativecommons.org/licenses/by/4.0">
<meta property="sitemap:video:thumbnail_loc" content="http://www.example.com/thumbs/123.jpg">
<meta property="sitemap:video:title" content="Grilling steaks for summer">
<meta property="sitemap:video:tag" content="steak">
<meta property="sitemap:video:tag" content="beefsteak">
<meta property="sitemap:video:restriction" content="IE GB US CA">
<meta property="sitemap:video:restriction:relationship" content="allow">
<meta property="sitemap:video:price" content="1.99">
<meta property="sitemap:video:price:currency" content="EUR">
<meta property="sitemap:video:thumbnail_loc" content="http://www.example.com/thumbs/456.jpg">
<meta property="sitemap:video:title" content="Yummy Pork Rib Sour Soup Cooking With Long bean">
<meta property="sitemap:video:tag" content="prok">
<meta property="sitemap:video:tag" content="bean">
</head>
<body>
<pre></pre>
<script type="module">
import openGraph from '../src/index.js'
const result = openGraph.parseFromDocument({
// these tag has attributes
alias: {
'sitemap:video:player_loc': 'sitemap:video:player_loc:_',
'sitemap:video:restriction': 'sitemap:video:restriction:_',
'sitemap:video:platform': 'sitemap:video:platform:_',
'sitemap:video:price': 'sitemap:video:price:_',
'sitemap:video:uploader': 'sitemap:video:uploader:_'
},
arrays: [
'sitemap:image',
'sitemap:video',
'sitemap:video:tag'
]
})
console.log(result)
document.querySelector('pre').textContent = JSON.stringify(result, null, 2)
</script>
</body>
</html>