Skip to content
Generate schema.org microdata in HTML
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML Schema pHTML

NPM Version Build Status Support Chat

pHTML Schema lets you write shorter schema.org microdata in HTML. Search engine operators like Google, Microsoft and Yahoo! will rely on this markup to improve search results.

<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>

<!-- becomes -->

<div itemtype="https://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="https://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="https://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>

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/schema

Node

Add pHTML Schema to your project:

npm install @phtml/schema --save-dev

Use pHTML Schema to process your HTML:

const phtmlSchema = require('@phtml/schema');

phtmlSchema.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlSchema = require('@phtml/schema');

phtml([
  phtmlSchema(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Schema runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

schema

The schema option determines the URL used to prefix your microdata vocabulary (itemtype).

phtmlSchema({ schema: 'http://schema.org/' })
<!-- becomes -->

<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>

The schema option also accepts an object of individual URLs for each vocabulary. The * key can be used as a default.

phtmlSchema({
  schema: {
    '*': 'http://schema.org/',
    AggregateOffer: 'https://schema.org/'
  }
});
<!-- becomes -->

<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="https://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>
You can’t perform that action at this time.