pHTML Schema

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>