Structured Data Markup To Improve Your Website SEO Rank

What is Structure Data Markup?

The Structure Data Markup helps the search engines to understand the contextual meaning of the content of your web page. This helps to understand the each elements of the web page which it describes or displayed to the viewers. By understanding the content of the web page by the search engines, results in providing the best results in the SERP.

In order to achieve the Structure Data Markup a Data Vocabulary should be followed.

The schema.org is a universally accepted standardized data vocabulary recognized by the major search engines like Google, Bing and Yahoo.

The schema can be implemented using the markup languages such as Microdata, Json-Ld and RDFa

What are Microdata?

Microdata is a type of semantic mark-up structure to describe elements on a web page. This can be implemented to any web page using HTML properties to define each item by using the associated attributes (Properties) of the specific item type.

For example,

Let the item type be a ‘Person’ and its associated attributes are the

Property name, Property url and Property title

Itemscope – is an indicator that the content within this <div> is an item.

Itemtype – describes what the item type is, here we use Invoice, LocalBusiness, Person, PriceSpecification, Product, Order.

Itemprop – describes each property of the specific item.

Then it can be applied to HTML tags to describe each property as shown below code block which is marked-up for invoice to a person. You can get this here

<div itemscope itemtype="http://schema.org/Invoice">
  <h1 itemprop="description">New furnace and installation</h1>
  <div itemprop="broker" itemscope itemtype="http://schema.org/LocalBusiness">
    <b itemprop="name">ACME Home Heating</b>
  </div>
  <div itemprop="customer" itemscope itemtype="http://schema.org/Person">
    <b itemprop="name">Jane Doe</b>
  </div>
  <time itemprop="paymentDueDate">2015-01-30</time>
  <div itemprop="minimumPaymentDue" itemscope itemtype="http://schema.org/PriceSpecification">
    <span itemprop="price">0.00</span>
    <span itemprop="priceCurrency">USD</span>
  </div>
  <div itemprop="totalPaymentDue" itemscope itemtype="http://schema.org/PriceSpecification">
    <span itemprop="price">0.00</span>
    <span itemprop="priceCurrency">USD</span>
  </div>
  <link itemprop="paymentStatus" href="http://schema.org/PaymentComplete" />
  <div itemprop="referencesOrder" itemscope itemtype="http://schema.org/Order">
    <span itemprop="description">furnace</span>
    <time itemprop="orderDate">2014-12-01</time>
    <span itemprop="orderNumber">123ABC</span>
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/Product">
      <span itemprop="name">ACME Furnace 3000</span>
      <meta itemprop="productId" content="ABC123" />
    </div>
  </div>
  <div itemprop="referencesOrder" itemscope itemtype="http://schema.org/Order">
    <span itemprop="description">furnace installation</span>
    <time itemprop="orderDate">2014-12-02</time>
    <div itemprop="orderedItem" itemscope itemtype="http://schema.org/Service">
      <span itemprop="description">furnace installation</span>
    </div>
  </div>
</div>

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight Linked Data format. It is easy for humans to read and write. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale.

JSON-LD helps the webmasters to define Structure Data Markup the content of the web page by using the types and properties. 

Let’s take the same example as in the above Microdata in the JSON-LD version below

<script type="application/ld+json">
{
    "@context": "http://schema.org/",
    "@type": "Invoice",
    "broker": {
      "@type": "LocalBusiness",
      "name": "ACME Home Heating"
    },
    "accountId": "xxxx-xxxx-xxxx-1234",
    "customer": {
      "@type": "Person",
      "name": "Jane Doe"
    },
    "paymentDueDate": "2015-01-30",
    "minimumPaymentDue": {
      "@type": "PriceSpecification",
      "price": 0.00,
      "priceCurrency": "USD"
    },
    "totalPaymentDue": {
      "@type": "PriceSpecification",
      "price": 0.00,
      "priceCurrency": "USD"
    },
    "paymentStatus": "http://schema.org/PaymentComplete",
    "referencesOrder": [
      {
        "@type": "Order",
        "description": "furnace",
        "orderDate": "2014-12-01",
        "orderNumber": "123ABC",
        "paymentMethod": "http://purl.org/goodrelations/v1#ByInvoice",
        "orderedItem": {
          "@type": "Product",
          "name": "ACME Furnace 3000",
          "productId": "ABC123"
        }
      },
      {
        "@type": "Order",
        "description": "furnace installation",
        "orderDate": "2014-12-02",
        "paymentMethod": "http://purl.org/goodrelations/v1#ByInvoice",
        "orderedItem": {
          "@type": "Service",
          "description": "furnace installation"
        }
      }
    ]
}
</script>

As we discussed above its very easy to read and write the JSON-LD.