Skip to main content
Image for post: Structured data for HTML pages

Structured data for HTML pages

Improving SEO with microdata and JSON-LD

Google Search Console recommends to use structured data inside HTML pages. You can improve your bredcrumbs and insert a JSON or HTML with microdata inside your web pages to let google know about the contents of your page and help it to create a better index with your informations. In fact they say: "Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general."
Let's see how you can add them into your pages

Insert JSON data in the page using the script tag

Google recommends this first possibility. You can read more about JSON-LD on moz.com or in the official website where they explain how you can integrate JSON-LD into your backend and show them in the application. Here is an example about adding JSON data using the script tag.


<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Grandma's Holiday Apple Pie",
  "author": "Elaine Smith",
  "image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
  "description": "A classic apple pie.",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4",
    "reviewCount": "276",
    "bestRating": "5",
    "worstRating": "1"
  },
  "prepTime": "PT30M",
  "totalTime": "PT1H",
  "recipeYield": "8",
  "nutrition": {
    "@type": "NutritionInformation",
    "servingSize": "1 medium slice",
    "calories": "230 calories",
    "fatContent": "1 g",
    "carbohydrateContent": "43 g",
  },
  "recipeIngredient": [
    "1 box refrigerated pie crusts, softened as directed on box",
    "6 cups thinly sliced, peeled apples (6 medium)",
    "..."
  ],
  "recipeInstructions": [
    "1...",
    "2..."
   ]
}
</script>

Microdata

Microdata is the second possibility. I prefer this option to be honest because you have only to add or update your HTML code. Here is a complete exampe:


<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>

RDFa

From the official website: "RDFa is an extension to HTML5 that helps you markup things like People, Places, Events, Recipes and Reviews. Search Engines and Web Services use this markup to generate better search listings and give you better visibility on the Web, so that people can find your website more easily.".

I consider using RDFa more complex than microdata but you are free to choose between all possibility. I have choosen the Microdata and you?
Happy coding!

 

 

Share this post

This website and/or any sub domains use cookies to understand how you to improve your experience.