Structured Data Cho AMP – Đánh Dấu Dữ Liệu AMP

Dữ liệu đánh dấu cho trang AMP theo chuẩn của schema.org được đánh dấu dưới 2 định dạng khác nhau là JSON-LD và microdata. Cũng gần giống như trang NON-AMP . Mặc dù hiệu quả khi sử dụng chúng gần như tương đương nhưng mình khuyên các bạn nên dùng JSON-LD nhé.
Đánh Dấu Dữ Liệu Cho Định Dạng bài Viết structured data markup format for Articles

Structured Data JSON LD 

<script type=”application/ld+json”>
//
// The document referenced in mainEntityOfPage should be the same as the
// canonical link above.
//
// Also, please be aware that some platforms that use AMP HTML have
// further restrictions with regards to some schema components.
//
// For example:
//
// * The leader “image” referenced in the markup below must appear
// somewhere on the AMP HTML document itself.
//
// * The URL for that “image” must precisely match the src of the
// amp-img tag.
//
// * All marked-up URLs should be absolute.
//
// * The “logo” dimensions must not exceed 600×60.
//
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“mainEntityOfPage”: “http://example.ampproject.org/article-metadata.html”,
“headline”: “Lorem Ipsum”,
“datePublished”: “1907-05-05T12:02:41Z”,
“dateModified”: “1907-05-05T12:02:41Z”,
“description”: “The Catiline Orations continue to begule engineers and designers alike — but can it stand the test of time?”,
“author”: {
“@type”: “Person”,
“name”: “Jordan M Adler”
},
“publisher”: {
“@type”: “Organization”,
“name”: “Google”,
“logo”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/logo.jpg”,
“width”: 600,
“height”: 60
}
},
“image”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/leader.jpg”,
“height”: 2000,
“width”: 800
}
}
</script>

Structured Data MicroData cho AMP

<h1 itemprop=”headline”>Lorem Ipsum</h1>
<h2 itemprop=”author” itemscope itemtype=”https://schema.org/Person”>
<span itemprop=”name”>Jordan M Adler</span>
</h2>
<time itemprop=”datePublished” datetime=”1907-05-05T12:02:41Z”>Sunday, May 5th 1907</time>
<time itemprop=”dateModified” datetime=”1907-05-05T12:02:41Z”></time>
<meta itemprop=”description” content=”The Catiline Orations continue to begule engineers and designers alike — but can it stand the test of time?”></meta>
<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img width=”600″ height=”60″ src=”http://cdn.ampproject.org/logo.jpg”></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/logo.jpg”></meta>
<meta itemprop=”width” content=”600″></meta>
<meta itemprop=”height” content=”60″></meta>
</div>
<meta itemprop=”name” content=”Google”></meta>
</div>
<div itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img src=”http://cdn.ampproject.org/leader.jpg” alt=”Lorem Ipsum?” height=”2000″ width=”800″></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/leader.jpg”></meta>
<meta itemprop=”width” content=”2000″></meta>
<meta itemprop=”height” content=”800″></meta>
</div>

Recipe json ld cho AMP

<script type=”application/ld+json”>
//
// The document referenced in mainEntityOfPage should be the same as the
// canonical link above.
//
// Also, please be aware that some platforms that use AMP HTML have
// further restrictions with regards to some schema components.
//
// For example:
//
// * The leader “image” referenced in the markup below must appear
// somewhere on the AMP HTML document itself.
//
// * The URL for that “image” must precisely match the src of the
// amp-img tag.
//
// * All marked-up URLs should be absolute.
//
// * The “logo” dimensions must not exceed 600×60.
{
“@context”: “http://schema.org/”,
“@type”: “Recipe”,
“mainEntityOfPage”: “http://example.ampproject.org/recipe-metadata.html”,
“name”: “Grandma’s Holiday Apple Pie”,
“image”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/leader.jpg”,
“height”: 200,
“width”: 200
},
“author”: {
“@type”:”Person”,
“name”:”Carol Smith”
},
“datePublished”: “2009-11-05”,
“dateModified”: “2009-11-05”,
“description”: “This is my grandmother’s apple pie recipe. I like to add a dash of nutmeg.”,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “4.0”,
“reviewCount”: “35”
},
“prepTime”: “PT30M”,
“cookTime”: “PT1H”,
“totalTime”: “PT1H30M”,
“recipeYield”: “1 9\” pie (8 servings)”,
“nutrition”: {
“@type”: “NutritionInformation”,
“servingSize”: “1 medium slice”,
“calories”: “250 cal”,
“fatContent”: “12 g”
},
“recipeIngredient”: [
“apples”,
“White sugar”
],
“recipeInstructions”: “1. Cut and peel apples\n 2. Mix sugar and cinnamon. Use additional sugar for tart apples.\n…”,
“publisher”: {
“@type”: “Organization”,
“name”: “Google”,
“logo”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/logo.jpg”,
“width”: 600,
“height”: 60
}
}
}
</script>

Recipe microdata cho amp

<h1 itemprop=”name”>Grandma’s Holiday Apple Pie</h1>
<div itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img src=”http://cdn.ampproject.org/leader.jpg” height=”200″ width=”200″></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/leader.jpg”></meta>
<meta itemprop=”width” content=”200″></meta>
<meta itemprop=”height” content=”200″></meta>
</div>
<amp-img itemprop=”image” src=”http://cdn.ampproject.org/leader.jpg” height=”200″ width=”200″/></amp-img><br>
By <span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Carol Smith</span>
</span>
Published: <time datetime=”2009-11-05″ itemprop=”datePublished”>
November 5, 2009</time>
<time datetime=”2009-11-05″ itemprop=”dateModified”></time>
<p itemprop=”description”>This is my grandmother’s apple pie recipe. I like to add a dash of nutmeg.</p>
<p itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>4.0</span> stars based on
<span itemprop=”reviewCount”>35</span> reviews </p>
<p>Prep time: <time datetime=”PT30M” itemprop=”prepTime”>30 min</time></p>
<p>Cook time: <time datetime=”PT1H” itemprop=”cookTime”>1 hour</time></p>
<p>Total time: <time datetime=”PT1H30M” itemprop=”totalTime”>1 hour 30 min</time></p>
<p>Yield: <span itemprop=”recipeYield”>1 9″ pie (8 servings)</span></p>
<p><span itemprop=”nutrition” itemscope itemtype=”http://schema.org/NutritionInformation”>
Serving size: <span itemprop=”servingSize”>1 medium slice</span><br>
Calories per serving: <span itemprop=”calories”>250 cal</span><br>
Fat per serving: <span itemprop=”fatContent”>12 g</span><br>
</span></p>
<p>Ingredients:<br>
Thinly-sliced <span itemprop=”ingredients”>apples</span>:
6 cups<br>
<span itemprop=”ingredients”>White sugar</span>:
3/4 cup<br>
…<br>
</p>
<p>
Directions:<br>
<div itemprop=”recipeInstructions”>
1. Cut and peel apples<br>
2. Mix sugar and cinnamon. Use additional sugar for tart apples.<br>
…<br>
</div>
</p>
</div>
<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img width=”600″ height=”60″ src=”http://cdn.ampproject.org/logo.jpg”></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/logo.jpg”></meta>
<meta itemprop=”width” content=”600″></meta>
<meta itemprop=”height” content=”60″></meta>
</div>
<meta itemprop=”name” content=”Google”></meta>
</div>

Review JSON LD cho AMP

<script type=”application/ld+json”>
//
// The document referenced in mainEntityOfPage should be the same as the
// canonical link above.
//
// Also, please be aware that some platforms that use AMP HTML have
// further restrictions with regards to some schema components.
//
// For example:
//
// * The leader “image” referenced in the markup below must appear
// somewhere on the AMP HTML document itself.
//
// * The URL for that “image” must precisely match the src of the
// amp-img tag.
//
// * All marked-up URLs should be absolute.
//
// * The “logo” dimensions must not exceed 600×60.
//
{
“@context”: “http://schema.org/”,
“@type”: “Review”,
“mainEntityOfPage”: “http://example.ampproject.org/review-metadata.html”,
“itemReviewed”: {
“@type”: “Restaurant”,
“name”: “Legal Seafood”
},
“reviewRating”: {
“@type”: “Rating”,
“ratingValue”: “4”
},
“name”: “A good seafood place.”,
“author”: {
“@type”: “Person”,
“name”: “Bob Smith”
},
“reviewBody”: “The seafood is great.”,
“publisher”: {
“@type”: “Organization”,
“name”: “Google”,
“logo”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/logo.jpg”,
“width”: 600,
“height”: 60
}
}
}
</script>

Review Microdata cho AMP

<div itemprop=”itemReviewed” itemscope itemtype=”http://schema.org/Restaurant”>
<h1 itemprop=”name”>Legal Seafood</h1>
</div>
<p itemprop=”name”>A good seafood place</p>
<p itemprop=”reviewBody”>The Seafood is great</p>
<div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
<p><span itemprop=”ratingValue”>4.0</span> out of 5</p>
</div>
<p>By <span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Bob Smith</span></span> from Google</p>
<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img width=”600″ height=”60″ src=”http://cdn.ampproject.org/logo.jpg”></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/logo.jpg”></meta>
<meta itemprop=”width” content=”600″></meta>
<meta itemprop=”height” content=”60″></meta>
</div>
<meta itemprop=”name” content=”Google”></meta>
</div>

Sport Article JSON LD cho AMP

<script type=”application/ld+json”>
//
// The document referenced in mainEntityOfPage should be the same as the
// canonical link above.
//
// Also, please be aware that some platforms that use AMP HTML have
// further restrictions with regards to some schema components.
//
// For example:
//
// * The leader “image” referenced in the markup below must appear
// somewhere on the AMP HTML document itself.
//
// * The URL for that “image” must precisely match the src of the
// amp-img tag.
//
// * All marked-up URLs should be absolute.
//
// * The “logo” dimensions must not exceed 600×60.
//
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“mainEntityOfPage”: “http://example.ampproject.org/sports-article-metadata.html”,
“headline”: “The Toronto Wildcats defeat the San Jose Stars 4-2”,
“url”: “https://intense-heat-6570.firebaseapp.com/index.html”,
“datePublished”: “2016-04-01T12:00:00Z”,
“dateModified”: “2016-04-01T12:00:00Z”,
“description”: “The Toronto Wildcats defeat the San Jose Stars 4-2”,
“author”: {
“@type”: “Person”,
“name”: “Jeff Kingyens”
},
“publisher”: {
“@type”: “Organization”,
“name”: “Google”,
“url”: “https://google.com”,
“logo”: {
“@type”: “ImageObject”,
“url”: “https://intense-heat-6570.firebaseapp.com/logo.png”,
“width”: 600,
“height”: 60
}
},
“about”: {
“@context”: “http://schema.org”,
“@type”: “SportsEvent”,
“name”: “Toronto Wildcats vs San Jose Stars | 2015-2015 Regular Season | FHL”,
“startDate”: “2016-04-01T02:30:00Z”,
“location”: {
“@context”: “http://schema.org”,
“@type”: “LocalBusiness”,
“address”: {
“@type”: “PostalAddress”,
“addressLocality”: “The SAP Center”,
“addressRegion”: “CA”,
“streetAddress”: “525 W Santa Clara St, San Jose, CA 95113, United States”
},
“name”: “The SAP Center”,
“description”: “an indoor arena located in San Jose, California. Its primary tenant is the San Jose Sharks of the National Hockey League, for which the arena has earned the nickname \”The Shark Tank\””,
“telephone”: “850-648-4200”
}
},
“image”: {
“@type”: “ImageObject”,
“url”: “https://upload.wikimedia.org/wikipedia/commons/4/4b/Ice_Hockey_sharks_ducks.jpg”,
“height”: 614,
“width”: 922
}
}
</script>

Video JSON LD cho AMP

<script type=”application/ld+json”>
//
// The document referenced in mainEntityOfPage should be the same as the
// canonical link above.
//
// Also, please be aware that some platforms that use AMP HTML have
// further restrictions with regards to some schema components.
//
// For example:
//
// * The leader “image” referenced in the markup below must appear
// somewhere on the AMP HTML document itself.
//
// * The URL for that “image” must precisely match the src of the
// amp-img tag.
//
// * All marked-up URLs should be absolute.
//
// * The “logo” dimensions must not exceed 600×60.
//
{
“@context”: “http://schema.org”,
“@type”: “VideoObject”,
“mainEntityOfPage”: “http://example.ampproject.org/video-metadata.html”,
“name”: “The Audience is programing”,
“description”: “A programming audience”,
“thumbnailUrl”: “http://cdn.ampproject.org/leader.jpg”,
“uploadDate”: “2015-02-05T08:00:00+08:00”,
“duration”: “PT1M33S”,
“contentUrl”: “https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4”,
“interactionCount”: “2347”,
“publisher”: {
“@type”: “Organization”,
“name”: “Google”,
“logo”: {
“@type”: “ImageObject”,
“url”: “http://cdn.ampproject.org/logo.jpg”,
“width”: 600,
“height”: 60
}
}
}
</script>

Video Data Structured Mircrodata cho AMP

<h2 itemprop=”name”>The Audience is programing</h2>
<p itemprop=”description”>A programming audience</p>
<meta itemprop=”thumbnailUrl” content=”http://cdn.ampproject.org/leader.jpg”></meta>
<meta itemprop=”uploadDate” content=”2015-02-05T08:00:00+08:00″></meta>
<meta itemprop=”duration” content=”PT1M33S”></meta>
<meta itemprop=”contentUrl” content=”https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4″></meta>
<meta itemprop=”interactionCount” content=”2347″></meta>
<amp-video
src=”https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4″
width=”358″
height=”204″
layout=”responsive”
controls></amp-video>
<div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
<div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img width=”600″ height=”60″ src=”http://cdn.ampproject.org/logo.jpg”></amp-img>
<meta itemprop=”url” content=”http://cdn.ampproject.org/logo.jpg”></meta>
<meta itemprop=”width” content=”600″></meta>
<meta itemprop=”height” content=”60″></meta>
</div>
<meta itemprop=”name” content=”Google”></meta>
</div>