Schemas makes it super easy to write schema.org microdata without extra cruft. Search engine operators like Google, Microsoft and Yahoo! will rely on this markup to improve search results.
<!-- BEFORE -->
<div itemtype="Product">
<span itemprop="brand">ACME</span> <span itemprop="name">Executive Anvil</span>
<img itemprop="image" src="anvil_executive.jpg">
<span itemprop="aggregateRating" itemtype="AggregateRating">
Average rating: <span itemprop="ratingValue">4.4</span>, based on
<span itemprop="ratingCount">89</span> reviews
</span>
<span itemprop="offers" itemtype="AggregateOffer">
from $<span itemprop="lowPrice">119.99</span> to
$<span itemprop="highPrice">199.99</span>
<meta itemprop="priceCurrency" content="USD">
</span>
</div>
<!-- AFTER -->
<div itemtype="http://schema.org/Product" itemscope>
<span itemprop="brand">ACME</span> <span itemprop="name">Executive Anvil</span>
<img itemprop="image" src="anvil_executive.jpg">
<span itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
Average rating: <span itemprop="ratingValue">4.4</span>, based on
<span itemprop="ratingCount">89</span> reviews
</span>
<span itemprop="offers" itemtype="http://schema.org/AggregateOffer" itemscope>
from $<span itemprop="lowPrice">119.99</span> to
$<span itemprop="highPrice">199.99</span>
<meta itemprop="priceCurrency" content="USD">
</span>
</div>
Schemas makes the itemscope
property totally optional. This is because the microdata spec says itemtype
must not be specified on elements that do not also have an itemscope
attribute.
Schemas makes the http://schema.org/
prefix totally optional. This is because all major search engines now recognize this common data vocabulary.
Add Schemas to your build tool:
npm install posthtml-schemas --save-dev
require('posthtml-schemas').process(YOUR_HTML, { /* options */ });
Add PostHTML to your build tool:
npm install posthtml --save-dev
Load Schemas as a PostHTML plugin:
posthtml([
require('posthtml-schemas')({ /* options */ })
]).process(YOUR_HTML, /* options */);
Add Gulp PostHTML to your build tool:
npm install gulp-posthtml --save-dev
Enable Schemas within your Gulpfile:
var posthtml = require('gulp-posthtml');
gulp.task('html', function () {
return gulp.src('./src/*.html').pipe(
posthtml([
require('posthtml-schemas')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});
Add Grunt PostHTML to your build tool:
npm install grunt-posthtml --save-dev
Enable Schemas within your Gruntfile:
grunt.loadNpmTasks('grunt-posthtml');
grunt.initConfig({
posthtml: {
options: {
use: [
require('posthtml-schemas')({ /* options */ })
]
},
dist: {
src: '*.html'
}
}
});
Type: Object|String
Default: "http://schema.org/"
Specifies the URL used to prefix your microdata vocabulary (itemtype
). You may also pass in an object of individual URLs for each vocabulary.