How to use JSON-LD in my page that already have content?

Question

I have a website that I created just to test my CSS, JS and PHP skills. I have written data in simple HTML tags. Now I heard about Microdata, RDFa and JSON-LD. And Google recommends using JSON-LD for structured data whenever possible.

So I just want to ask, in Schema.org Microdata format, they tell to add various attributes to the HTML tags which can be done simply by putting attributes in my already written HTML tags. But If I want to use JSON-LD as Google recommends, how am I supposed to do that?

Should I have to rewrite my whole content by removing it from HTML tags and write it in script format (as defined in JSON-LD)?

For example, the image below contains the output of the code I wrote in simple HTML tags with their properties in CSS followed by a snippet of codes for this.

<h2>Timing</h2>
    <p><?php echo $Timing; ?></p>
</div>
<div class="site-info">
    <h2>Days</h2>
    <p><?php echo $OpeningDays; ?></p>
</div>
<div class="site-info">
    <h2>Bus Stand</h2>
    <p><?php echo $BusStandName; ?></p>
</div>
<div class="site-info">
    <h2>Bus Numbers</h2>
    <p><?php echo $BusNumbers; ?></p>
</div>
<div class="site-info">
    <h2>Tariff</h2>
    <p><?php echo $Fees; ?></p>
</div>

So how now I have to edit my code (given for example) to make it structured data in JSON-LD without affecting the actual design of the page?

Answer 1

Nothing wrong with Microdata or RDFa

First of all, ignore Google’s recommendation if you are fine with using Microdata or RDFa. I think there are only two cases where you should use JSON-LD instead of Microdata/RDFa:

• If you have to add structured data with client-side JavaScript.
• If it’s too hard for you to add Microdata’s/RDFa’s attributes to your existing HTML elements.

In all other cases, it should be preferable to use Microdata or RDFa (comparison) instead of JSON-LD, because you don’t have to duplicate your content.

If I understand your case correctly, you don’t seem to use JavaScript to add it, and it seems that it would be easy for you to add the attributes to your existing HTML elements (even easier than adding a separate script element), so I would recommend to go with RDFa.

How to add JSON-LD

You don’t touch your existing HTML/content. Instead, you

• add a script element somewhere (can be in the head or the body), and
• add your structured data to it (thereby duplicating your content).

If you don’t want to use some JSON-LD PHP library for this purpose, you could generate the JSON-LD similar to how you generate your HTML.

So if you have this somewhere on your page to show the name of a person

<div>
  <p>Name: <?php echo $Name; ?></p>
</div>

you could add this to your JSON-LD script to add this person and its name

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "<?php echo $Name; ?>"
}
</script>

For comparison: How to add Microdata

<div itemscope itemtype="http://schema.org/Person">
  <p>Name: <span itemprop="name"><?php echo $Name; ?></span></p>
</div>

For comparison: How to add RDFa

<div typeof="schema:Person">
  <p>Name: <span property="schema:name"><?php echo $Name; ?></span></p>
</div>