src/Micrometa/Tests/Fixture/json-ld/jsonld-examples.html
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8"/>
<link href="https://plus.google.com/+Jsonldexamples" rel="publisher">
<meta content="56f4c883bc1f76f1237c4e8764611364" name="p:domain_verify"/>
<link href="/sitemap.xml" rel="sitemap" title="Sitemap" type="application/xml"/>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="0177aced80d17ce1" name="yandex-verification"/>
<link href="https://jsonld-examples.com/" rel="canonical">
<link href="/favicon.ico" rel="shortcut icon">
<link href="/favicon.ico" rel="icon" sizes="16x16 32x32 64x64">
<link href="/favicon-192.png" rel="icon" sizes="196x196" type="image/png">
<link href="/favicon-160.png" rel="icon" sizes="160x160" type="image/png">
<link href="/favicon-96.png" rel="icon" sizes="96x96" type="image/png">
<link href="/favicon-64.png" rel="icon" sizes="64x64" type="image/png">
<link href="/favicon-32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/favicon-57.png" rel="apple-touch-icon">
<link href="/favicon-114.png" rel="apple-touch-icon" sizes="114x114">
<link href="/favicon-72.png" rel="apple-touch-icon" sizes="72x72">
<link href="/favicon-144.png" rel="apple-touch-icon" sizes="144x144">
<link href="/favicon-60.png" rel="apple-touch-icon" sizes="60x60">
<link href="/favicon-120.png" rel="apple-touch-icon" sizes="120x120">
<link href="/favicon-76.png" rel="apple-touch-icon" sizes="76x76">
<link href="/favicon-152.png" rel="apple-touch-icon" sizes="152x152">
<link href="/favicon-180.png" rel="apple-touch-icon" sizes="180x180">
<meta content="#FFFFFF" name="msapplication-TileColor">
<meta content="/favicon-144.png" name="msapplication-TileImage">
<meta content="/browserconfig.xml" name="msapplication-config">
<meta content="The most complete JSON-LD Examples for marking up your entire website with schema.org."
name="description">
<meta content="website" property="og:type"/>
<meta content="758182280951719" property="fb:app_id"/>
<meta content="100012316748963" property="fb:profile_id"/>
<meta content="https://jsonld-examples.com/" property="og:url">
<meta content="JSON-LD Examples - schema.org" property="og:title">
<!-- 1200x630 -->
<meta content="http://jsonld-examples.com/images/social/big-FrontPage.png" property="og:image">
<meta content="https://jsonld-examples.com/images/social/big-FrontPage.png" property="og:image:secure_url">
<meta content="image/png" property="og:image:type"/>
<meta content="630" property="og:image:height"/>
<meta content="1200" property="og:image:width"/>
<!-- 150x150 -->
<meta content="http://jsonld-examples.com/images/social/small-FrontPage.png" property="og:image">
<meta content="https://jsonld-examples.com/images/social/small-FrontPage.png" property="og:image:secure_url">
<meta content="image/png" property="og:image:type"/>
<meta content="150" property="og:image:height"/>
<meta content="150" property="og:image:width"/>
<meta content="The most complete JSON-LD Examples for marking up your entire website with schema.org."
property="og:description">
<meta content="JSON-LD Examples" property="og:site_name"/>
<meta content="October 16, 2016" property="og:updated_time"/>
<meta content="true" property="og:rich_attachment"/>
<meta content="en_US" property="og:locale">
<meta content="summary_large_image" name="twitter:card">
<meta content="@JSONLD_Exampes" name="twitter:site">
<meta content="JSON-LD Examples - schema.org" name="twitter:title">
<meta content="The most complete JSON-LD Examples for marking up your entire website with schema.org."
name="twitter:description">
<meta content="https://jsonld-examples.com/images/social/medium-FrontPage.png" name="twitter:image">
<script type="application/ld+json">[
{
"@context": "https://schema.org",
"@type": "WPHeader",
"@id": "https://jsonld-examples.com/#header_website",
"image": {
"@type": "imageObject",
"@id": "header_website_picture",
"url": "https://jsonld-examples.com/images/header_website.png",
"height": "140",
"width": "1400"
}
},
{
"@context": "https://schema.org",
"@type": "WPSideBar",
"@id": "https://jsonld-examples.com/#sidebar_left"
},
{
"@context": "https://schema.org",
"@type": "WPSideBar",
"@id": "https://jsonld-examples.com/#sidebar_right"
},
{
"@context": "https://schema.org",
"@type": "WPFooter",
"@id": "https://jsonld-examples.com/#footer_website"
}
]
</script>
<script type="application/ld+json">{
"@context": "http://www.schema.org",
"@type": "WebSite",
"hasPart": [
{
"@type": "WPHeader",
"@id": "https://jsonld-examples.com/#header_website"
},
{
"@type": "WPSideBar",
"@id": "https://jsonld-examples.com/#sidebar_left"
},
{
"@type": "WPSideBar",
"@id": "https://jsonld-examples.com/#sidebar_right"
},
{
"@type": "WPFooter",
"@id": "https://jsonld-examples.com/#footer_website"
}
],
"Publisher": {
"@type": "Organization",
"@id": "https://jsonld-examples.com#organization"
},
"Author": {
"@type": "person",
"@id": "https://jsonld-examples.com/contribute/author/andrew-ders-smith.php#andrewderssmith"
},
"editor": {
"@type": "person",
"@id": "https://jsonld-examples.com/contribute/author/andrew-ders-smith.php#andrewderssmith"
},
"image": [
{
"@type": "imageObject",
"url": "https://jsonld-examples.com/images/social/big-FrontPage.png",
"height": "630",
"width": "1200",
"isFamilyFriendly": "yes"
},
{
"@type": "imageObject",
"url": "https://jsonld-examples.com/images/social/medium-FrontPage.png",
"height": "220",
"width": "440",
"isFamilyFriendly": "yes"
},
{
"@type": "imageObject",
"url": "https://jsonld-examples.com/images/social/small-FrontPage.png",
"height": "150",
"width": "150",
"isFamilyFriendly": "yes"
}
],
"potentialAction": {
"@type": "SearchAction",
"target": "https://jsonld-examples.com/search.php?q={search_term}",
"query-input": "required name=search_term"
},
"copyrightYear": "2016",
"datePublished": "August 27, 2016",
"dateModified": "October 16, 2016",
"isBasedOnUrl": "https://schema.org",
"name": "JSON-LD Examples",
"inLanguage": "en-US",
"isFamilyFriendly": "yes",
"keywords": "JSON-LD Examples, schema.org",
"url": "https://jsonld-examples.com/",
"description": "The most complete JSON-LD Examples for marking up your entire website with schema.org."
}
}
</script>
<script type="application/ld+json">{
"@context": "http://www.schema.org",
"@type": "Organization",
"@id": "https://jsonld-examples.com#organization",
"name": "JSON-LD Examples",
"url": "https://jsonld-examples.com",
"email": "webmaster@jsonld-examples.com",
"numberOfEmployees": "1",
"employee": {
"@type": "Person",
"@id": "https://jsonld-examples.com/contribute/author/andrew-ders-smith.php#andrewderssmith"
},
"founder": {
"@type": "Person",
"@id": "https://jsonld-examples.com/contribute/author/andrew-ders-smith.php#andrewderssmith"
},
"logo": {
"@type": "ImageObject",
"url": "https://jsonld-examples.net/images/logo.png",
"width": "600",
"height": "60"
},
"image": {
"@type": "ImageObject",
"url": "https://jsonld-examples.net/images/image.png",
"width": "1024",
"height": "768"
},
"description": "3rd party site dedicated to schema.org and JSON-LD. Providing high quality minimum and recommended markups, as well as blog about JSON-LD and schema.org",
"sameAs": [
"https://www.facebook.com/jsonldexamples/",
"https://plus.google.com/+Jsonldexamples",
"https://twitter.com/JSONLDExamples",
"https://github.com/jsonld-markups",
"https://www.pinterest.com/jsonld/",
"https://json-ldexamples.tumblr.com/"
]
}
</script>
<title>JSON-LD Examples - Schema.org</title>
</head>
<body>
<!-- Google Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-78423494-4', 'auto');
ga('send', 'pageview');
</script> <!-- Facebook 2.7 SDK -->
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '758182280951719',
xfbml: true,
version: 'v2.7'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="container">
<header id="header_website">
<img alt="Header JSON-LD Examples" id="header_website_picture" src="/images/header_website.png">
</header>
<!-- Sidebar Left/NAV -> Phone droptown -->
<aside id="sidebar_left">
<nav id="main_nav">
<strong>Stuff</strong>
<ul>
<li><a href="https://jsonld-examples.com/">Home</a></li>
<li><a href="https://jsonld-examples.com/blog/index.php">Blog</a></li>
<li><a href="https://jsonld-examples.com/contribute/contact.php" rel="nofollow">Contact</a></li>
</ul>
<strong>JSON-LD Examples</strong>
<ul>
<li><a href="https://jsonld-examples.com/schema.org/code/article-markup.php">Article</a>
<ul>
<li><a
href="https://jsonld-examples.com/schema.org/code/article/newsarticle-markup.php">NewsArticle</a>
</li>
<li><a
href="https://jsonld-examples.com/schema.org/code/article/socialmediaposting-markup.php">SocialMediaPosting</a>
<ul>
<li><a
href="https://jsonld-examples.com/schema.org/code/article/socialmediaposting/blogposting-markup.php">BlogPosting</a>
</li>
</ul>
</li>
<li><a
href="https://jsonld-examples.com/schema.org/code/article/techarticle-markup.php">TechArticle</a>
</li>
</ul>
</li>
<li><a href="https://jsonld-examples.com/schema.org/code/blog-markup.php">Blog</a></li>
<li><a href="https://jsonld-examples.com/schema.org/code/breadcrumblist-markup.php">BreadcrumbList</a>
</li>
<li><a href="https://jsonld-examples.com/schema.org/code/movie-markup.php">Movie</a></li>
<li><a
href="https://jsonld-examples.com/schema.org/code/organization-markup.php">Organization</a>
</li>
<li><a href="https://jsonld-examples.com/schema.org/code/webpage-markup.php">WebPage</a></li>
<li><a href="https://jsonld-examples.com/schema.org/code/website-markup.php">WebSite</a></li>
</ul>
</nav>
</aside>
<!-- Main content -->
<main id="main_content">
<div id='cse-search-form' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', { language: 'en', style: google.loader.themes.V2_DEFAULT });
google.setOnLoadCallback(function () {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{ label: 'Relevance', key: '' }, { label: 'Date', key: 'date' }];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var customSearchControl = new google.search.CustomSearchControl('007153254985494848176:cfioj22ugo0', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly('https://jsonld-examples.com/search.php', 'q');
options.setAutoComplete(true);
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<style type='text/css'>
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #666666;
background-color: #CECECE;
background-image: none;
filter: none;
}
</style>
<header>
<img alt="JSON-LD Examples Front Page" src="/images/front_page.png">
</header>
<article>
<h1>JSON-LD Examples!</h1>
<p>
This site is meant as a guidance on how you can implement markups from <a
href="https://schema.org" rel="nofollow" target="_blank">Schema.org</a> with JSON-LD the best
and/or the most detailed way. It contain complete examples which are already validated by
Google's <a href="https://search.google.com/structured-data/testing-tool/u/0/" rel="nofollow"
target="_blank">Structured Data Testing Tool</a>
</p>
<section>
<h2>What is JSON-LD?</h2>
<p>
JSON-LD is a lightweight but powerful Linked Data format which is easy to read and
understand for humans.
</p>
<blockquote cite="https://en.wikipedia.org/wiki/JSON-LD">
JSON-LD, or JavaScript Object Notation for Linked Data, is a method of encoding Linked Data
using JSON. It was a goal to require as little effort as possible from developers to
transform their existing JSON to JSON-LD. This allows data to be serialized in a way that is
similar to traditional JSON<br>
<small> - Wikipedia</small>
</blockquote>
</section>
<section>
<h2>Why JSON-LD?</h2>
<p>
While it is unknown if it give you any ranking benefits as of today, <a
href="https://developers.google.com/search/docs/guides/intro-structured-data?hl=en"
rel="nofollow" target="_blank">Google recommend it</a> Even if it don't give you any ranking
benefits it DO give you:
</p>
<ul>
<li>Rich Snippets</li>
<li>Branding benefits such as logo next to name</li>
<li>Social proofs such as reviews</li>
<li>Looking better in SERP's with:
<ul>
<li>Breadcrumbs</li>
<li>Site Links</li>
<li>Searchbar</li>
<li>Among more</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>How to JSON-LD?</h2>
<p>
You can put your JSON-LD code everywhere on the document, and it will still validate
perfectly. Even outside of the HTML tags. If you use tools to automate it such as <a
href="https://www.google.no/analytics/tag-manager/" rel="nofollow" target="_blank">Google
Tag Manager</a>, it actually put it AFTER your closing html tag. That might be a indicator
showing us it is the best practice, or it might just be the most convenient thing to do when
they code the manager. Or they just don't want to disturb your own code for when you read
the source at a loaded page.
</p>
</section>
<section>
<h2>Alternative markup's</h2>
<p>
There are other ways to markup your schema.org:
</p>
<section>
<h3>Microdata</h3>
<blockquote
cite="https://developers.google.com/search/docs/guides/intro-structured-data?hl=en">
An open-community HTML specification used to nest structured data within HTML content.
Like RDFa, it uses HTML tag attributes to name the properties you want to expose as
structured data.<br>
<small>- Google</small>
</blockquote>
<p>
You put microdata in the actual HTML tags such as html, body, head, meta, div, span and
basically everyone else. This is the second in line best practice if there are
particular JSON-LD markups you don't manage to do.
</p>
</section>
<section>
<h3>RDFa</h3>
<blockquote
cite="https://developers.google.com/search/docs/guides/intro-structured-data?hl=en">
An HTML5 extension that supports linked data by introducing HTML tag attributes that
correspond to the user-visible content you want to describe for search engines.<br>
<small>- Google</small>
</blockquote>
<p>
Have no experience with it myself, but from what I've read, it is hard and tedious with
a lot of possibilities for errors. JSON-LD is just a much easier and better way.
</p>
</section>
</section>
</article>
</main>
<!-- Sidebar Right -->
<aside id="sidebar_right">
<!-- Social Media follow -->
<div class="social_follow">
<strong>Follow me on:</strong>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/jsonldexamples/"
target="_blank"></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/JSONLDExamples" target="_blank"></a>
<a class="googleplusBtn smGlobalBtn" href="https://plus.google.com/+Jsonldexamples/"
target="_blank"></a>
<a class="linkedinBtn smGlobalBtn" href="https://www.linkedin.com/in/andrewderssmith"
target="_blank"></a>
<a class="pinterestBtn smGlobalBtn" href="https://www.pinterest.com/jsonld/"
target="_blank"></a>
<a class="tumblrBtn smGlobalBtn" href="https://json-ldexamples.tumblr.com/" target="_blank"></a>
<a class="rssBtn smGlobalBtn" href="http://feeds.feedburner.com/Json-ldExamples"></a>
</div>
</div>
<!-- Social Media Share -->
<strong>Share Page!</strong>
<ul class="social-buttons">
<li class="button__share button__share--facebook">
<a data-locationKey="u" data-shareUrl="http://www.facebook.com/sharer.php" data-titleKey="t"
href="#">
<i aria-hidden="true" class="fa fa-facebook"></i>
</a>
</li>
<li class="button__share button__share--googleplus">
<a data-shareUrl="https://plus.google.com/share" href="#">
<i aria-hidden="true" class="fa fa-google-plus"></i>
</a>
</li>
<li class="button__share button__share--twitter">
<a data-extraGet="via=Mentor_Computer&hashtags=ComputerMentor" data-shareUrl="https://twitter.com/share" data-titleKey="text"
href="#">
<i aria-hidden="true" class="fa fa-twitter"></i>
</a>
</li>
<!-- optional Twitter username of content author (don’t include “@”)
optional Hashtags appended onto the tweet (comma separated. don’t include “#”) -->
<li class="button__share button__share--linkedin">
<a data-shareUrl="http://www.linkedin.com/shareArticle" href="#">
<i aria-hidden="true" class="fa fa-linkedin"></i></a>
</li>
<!-- can add &mini=true -->
<li class="button__share button__share--reddit">
<a data-shareUrl="http://reddit.com/submit" href="#">
<i aria-hidden="true" class="fa fa-reddit"></i>
</a>
</li>
<li class="button__share button__share--digg">
<a data-shareUrl="http://digg.com/submit" href="#">
<i aria-hidden="true" class="fa fa-digg"></i>
</a>
</li>
<li class="button__share button__share--tumblr">
<a data-shareUrl="http://www.tumblr.com/share/link" data-titleKey="name" href="#">
<i aria-hidden="true" class="fa fa-tumblr"></i>
</a>
</li>
<!-- can add &description= -->
<li class="button__share button__share--stumbleupon">
<a data-shareUrl="http://www.stumbleupon.com/submit" href="#">
<i aria-hidden="true" class="fa fa-stumbleupon"></i>
</a>
</li>
<li class="button__share button__share--delicious">
<a data-shareUrl="https://delicious.com/save" href="#">
<i aria-hidden="true" class="fa fa-delicious"></i>
</a>
</li>
<!-- can add &provider= // [provider] is the Company who is sharing the url -->
<li class="button__share button__share--wordpress">
<a data-locationKey="u" data-shareUrl="http://wordpress.com/press-this.php" data-titleKey="t"
href="#">
<i aria-hidden="true" class="fa fa-wordpress"></i>
</a>
</li>
<!-- can add &s=[post-desc]&i=[post-img] -->
<li class="button__share button__share--pocket">
<a data-shareUrl="https://getpocket.com/save" href="#">
<i aria-hidden="true" class="fa fa-get-pocket"></i>
</a>
</li>
<li class="button__share button__share--pinterest">
<a data-shareUrl="https://pinterest.com/pin/create/bookmarklet/" data-titleKey="description"
href="#">
<i aria-hidden="true" class="fa fa-pinterest"></i>
</a>
</li>
<!-- can add &media=[post-img] &is_video=[is_video] If the content is a video or not -->
</ul>
<script>
console.clear();
function handleShareButtonClick(event) {
event.preventDefault();
var url = this.dataset.shareurl;
var params = [];
if (this.dataset.locationkey) {
params.push([
encodeURIComponent(this.dataset.locationkey),
encodeURIComponent(document.location)
].join("="));
} else {
params.push(["url", encodeURIComponent(document.location)].join("="));
}
if (this.dataset.titlekey) {
params.push([
encodeURIComponent(this.dataset.titlekey),
encodeURIComponent(document.title)
].join("="));
} else {
params.push(["title", encodeURIComponent(document.title)].join("="));
}
if (this.dataset.extraget) {
params.push(
this.dataset.extraget
);
}
url = url + "?" + params.join("&");
//console.log(url);
window.open(url);
}
var shareButtons = Array.prototype.slice.call(
document.body.querySelectorAll(".button__share a")
);
shareButtons.forEach(function (e) {
e.addEventListener("click", handleShareButtonClick);
});
</script>
<strong>IRC!</strong>
<p>
##jsonld-examples<br>
chat.freenode.net(6667)
</p>
<ul>
<li>Latest blogposts:</li>
<li><a href="https://jsonld-examples.com/blog/posts/all-in-one-schema-with-json-ld.php">All in one
markup</a></li>
</ul>
</aside>
<!-- Footer -->
<footer id="footer_website">
<ul class="enable_parent_row">
<li>© Copyright 2016 @ Andrew Ders Smith</li>
<li><a href="https://jsonld-examples.com/contribute/contact.php">Contact</a></li>
<li><a href="https://jsonld-examples.com/legal/privacy-policy.php">Privacy Policy</a></li>
<li><a href="https://jsonld-examples.com/legal/terms-of-service.php">Terms of Service</a></li>
</ul>
</footer>
</div>
</body>
</html>