Structured data for HTML pages
Structured data is a way to annotate and mark up your HTML pages with machine-readable information that can be used by search engines and other applications to better understand the content of your pages.
There are several different formats for structured data, including JSON-LD, Microdata, and RDFa. These formats allow you to add specific types of information to your HTML pages, such as the name and description of a product, the author of an article, or the event details of a calendar event.
To use structured data, you will need to add specific HTML tags to your pages that contain the structured data. For example, you might add a <div> element with a itemscope attribute to define the start of a structured data item, and then add other elements with itemprop attributes to specify the properties of that item.
Once you have added structured data to your pages, you can use tools such as the Google Structured Data Testing Tool to validate that your structured data is correctly formatted and can be understood by search engines and other applications.
Overall, using structured data can help improve the visibility and discoverability of your content online, and can make it easier for search engines and other applications to understand and interpret the content of your pages.
Google Search Console recommends using structured data inside HTML pages. You can improve your breadcrumbs 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 information. 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 to 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 on 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 of 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 example:
<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 possibilities. I have chosen the Microdata and you?
Happy coding!