HowTo JSON-LD Markup

• 4pavelm777

• September 16, 2022 at 10:44 am

Hi!
I’m looking for code , that will help me to integrate HowTo Markup Scheme in JSON-LD format.

P.S. I have code for FAQ markup in JSON-LD. If anybody will need, just let me know 🙂

• John Huebner

• September 17, 2022 at 12:24 pm

More information/details are needed? Was there supposed to be a link to something in your question? Are you trying to use ACF fields as the data? Where are these fields located?

• 4pavelm777

• September 19, 2022 at 4:36 am

Hi, John!
Im using ACF PRO & trying to integrate Google HowTo markup into my site:

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "HowTo",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
      },
      "name": "How to tie a tie",
      "totalTime": "PT2M",
      "video": {
        "@type": "VideoObject",
        "name": "Tie a Tie",
        "description": "How to tie a four-in-hand knot.",
        "thumbnailUrl": "https://example.com/photos/photo.jpg",
        "contentUrl": "http://www.example.com/videos/123_600x400.mp4",
        "embedUrl": "http://www.example.com/videoplayer?id=123",
        "uploadDate": "2019-01-05T08:00:00+08:00",
        "duration": "P1MT10S"
      },
      "supply": [
        {
          "@type": "HowToSupply",
          "name": "A tie"
        }, {
          "@type": "HowToSupply",
          "name": "A collared shirt"
        }
      ],
      "tool": [
        {
          "@type": "HowToTool",
          "name": "A mirror"
        }
      ],
      "step":[
        {
          "@type": "HowToStep",
          "name": "Preparations",
          "text": "Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
          "image": "https://example.com/1x1/step1.jpg",
          "url": "https://example.com/tie#step1"
        }, {
          "@type": "HowToStep",
          "name": "Crossing once",
          "text": "Cross the long end over the short end. This will form the basis for your knot.",
          "image": "https://example.com/1x1/step2.jpg",
          "url": "https://example.com/tie#step2"
        }, {
          "@type": "HowToStep",
          "name": "Second crossing",
          "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",
          "image": "https://example.com/1x1/step3.jpg",
          "url": "https://example.com/tie#step3"
        }, {
          "@type": "HowToStep",
          "name": "Loop in",
          "text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",
          "image": "https://example.com/1x1/step4.jpg",
          "url": "https://example.com/tie#step4"
        }, {
          "@type": "HowToStep",
          "name": "Pull and tighten",
          "text": "Pull the long end through that new loop and tighten to fit!",
          "image": "https://example.com/1x1/step5.jpg",
          "url": "https://example.com/tie#step5"
        }
      ]
    }
    </script>

Source: https://developers.google.com/search/docs/advanced/structured-data/how-to

Fo every value i created field: name, image, text etc.

So i’m looking for those people, who already did this. Here you can see an example for faq markup:

<?php if (have_rows('faq')) : ?>

  <?php while (have_rows('faq')) : the_row(); ?>

    <h3 class="playfair bold extra-margin"><?php the_sub_field('faq_section_name'); ?> (<?php echo count(get_sub_field('faq_section')); ?>)</h3>

    <?php if (have_rows('faq_section')): ?>

    <ul class="accordion" data-accordion data-allow-all-closed="true">
      <?php while (have_rows('faq_section')): the_row(); ?>
        <li class="" data-accordion-item>
          <a href="#" class="accordion-title yantramanav bold"><?php the_sub_field('faq_question'); ?></a>
          <div class="accordion-content yantramanav light" data-tab-content>
          <?php the_sub_field('faq_answer'); ?>
          </div>
        </li>
      <?php endwhile; ?>
    </ul>

  <?php endif; ?>

  <?php endwhile; ?>

  <?php 
    
    global $schema;

    $schema = array(
    '@context'   => "https://schema.org",
    '@type'      => "FAQPage",
    'mainEntity' => array()
    );

    if ( have_rows('faq') ) {

    while ( have_rows('faq') ) : the_row();

      if ( have_rows('faq_section') ) {

        while ( have_rows('faq_section') ) : the_row();

          $questions = array(
            '@type'          => 'Question',
            'name'           => get_sub_field('faq_question'),
            'acceptedAnswer' => array(
            '@type' => "Answer",
            'text' => get_sub_field('faq_answer')
              )
              );

              array_push($schema['mainEntity'], $questions);

        endwhile;

      }

    endwhile;

    function bakemywp_generate_faq_schema ($schema) {

      global $schema;

      echo '<!-- Auto generated FAQ Structured data by Bakemywp.com --><script type="application/ld+json">'. json_encode($schema) .'</script>';

    }

    add_action( 'wp_footer', 'bakemywp_generate_faq_schema', 100 );

  }

  ?>

<?php endif; ?> 

• John Huebner

• October 6, 2022 at 11:17 am

You would do this just like any coding for ACF, but replacing the values in the json with the ACF field values.

What about your code is not working?

The how to schema does not match what you are trying to do for a FAQ.

I have not coded something like this and I have not seen any examples of doing this. All I can do is help you with code if you have specific questions or problems, but I can’t do all the coding for you.

• 4pavelm777

• October 6, 2022 at 11:24 am

Hi, John!
I’m already did HowTo markup in Json format 🙂 Anyway thanks for your replies! Good luck!