How to add FAQ Schema in your WordPress website using the right JSON-LD format

You can include FAQ schema (smart markup code), also known as structured data, to your website pages to assist Google to recognize a FAQ section. With the FAQ schema visible on your page, Google may decide to reward you with an improved search result listing that includes FAQs below your website.

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is a lightweight data-interchange format designed to enable easy exchange of data over the internet. It is a way to represent linked data using JSON syntax. Linked data is a method of exposing, sharing, and connecting data on the web by using uniform resource identifiers (URIs) to identify and link to data.

JSON-LD provides a way to add structured data to web pages, making it easier for search engines and other applications to understand the content on a page. It is particularly useful for websites that want to provide data to search engines or other applications in a structured format.

JSON-LD is a type of markup language, which means it can be used to add additional information to a web page without changing the appearance of the page. This additional information can be used by search engines and other applications to provide more detailed information about the content on a page.

Overall, JSON-LD is a powerful tool for web developers and marketers who want to make their content more easily discoverable and understandable by both humans and machines.

What is FAQ?

Frequently Asked Questions is an acronym. It frequently consists of a single page with a list of inquiries and responses on a certain topic, service, or organization. An FAQ is frequently used as a technique to lighten the pressure on the customer service staff. Also, it’s used for showing that you understand potential client concerns and can address them.

Do you need an FAQ?

The answer depends. Normally, if you need to answer a lot of queries from clients in a FAQ, it suggests that your content is not offering these answers and you should provide one that does.

What format should be used?

The JSON format should look like this?

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is Projects Engine?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Projects Engine provides code and tutorials for your themes and plugins you need to create remarkable sites on WordPress that will drive your business forward faster.The primary purpose of this site is to give high-quality WordPress tips, tricks, hacks, and other tools to help WordPress developers improve their site(s) and skills.Projects Engine was founded in December 2020 by Dragi Postolovski."
      }
    },
    {
      "@type": "Question",
      "name": "How to edit the WooCommerce single product template programmatically?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "You may use a variety of WooCommerce hooks to delete any feature from a single product template. Each one can operate for a particular set of items, so make sure you use the right hook, WooCommerce callback function, and a priority value."
      }
    }
  ]
}

Don’t forget to remove all of the unnecessary elements from the answers. You should remove all hyperlink tags and paragraphs. For example:

"text": "<p>You may use a variety of WooCommerce hooks to delete any feature from a single product template. Each one can operate for a particular set of items, so make sure you use the right hook, WooCommerce callback function, and a priority value.</p>"

Use this code to remove all of the unnecessary HTML elements. The answer should be clean without any HTML tags in it.

function pe_filter_schema_content( $answer ) {
    $answer = preg_replace(
        array(
            '/ {2,}/',
            '/<!--.*?-->|\t|(?:\r?\n[ \t]*)+/s'
        ),
        array(
            ' ',
            ''
        ),
        $answer 
    );

    return strip_tags( $answer );
}

When you are building the schema, make sure it is placed right after the list of your FAQ list. This function will return the full HTML that is needed to have the perfect FAQ list and schema. Of course, it needs to be styled first with a little bit of CSS. Display the list on any page where you’d like to have the FAQ list.

function display_faq( $list ) {
    if ( !$list ) {
        return '';
    }

    $output  = '<div class="faq-list">';
    $ldJSON = [];

    foreach ( $list as $item ) {
        $question = $item['question'];
        $answer = $item['answer'];

        $output .= "<a href='javascript:void(0)' role='tab' aria-expanded='false'>
                        <h3 class='faq_tittle'>$question</h3>
                    </a>
                    <div class='item-answer' role='tabpanel' aria-hidden='true'>
                        $answer
                    </div>";

        $ldJSON[] = [
            "@type"=> "Question",
            'name' => $question,
            'acceptedAnswer' => array(
                '@type'=>'Answer',
                'text'=> pe_filter_schema_content( $answer )
            )
        ];
    }

    $output .= '</div>';
    $output .= '<script type="application/ld+json">
      {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": ' . json_encode( $ldJSON ) . '
      }
      </script>';

    return $output;
}