HowTo JSON-LD FAQ Page

So you can easily integrate JSON-LD for questions & answers (FAQ) and benefit from the special presentation e.g. in the SERPs of Google.

• you research W-questions about your product/topic
• you integrate the question + answer using the dialog in your editor
• save the post/page and you will find the preformatted and schema.org marked content box in the frontend
• with the check mark at “Render HTML” you can decide if the content should be displayed on your website or if you only want to output the JSON-LD in source code

If you use Gutenberg in your WordPress installation, you don’t have to pay attention to anything else. Even if you want to answer several questions on one page, just add several FAQs within one block (NOTE: several questions within one block – not several blocks on one page).

In the old WordPress Editor (TinyMCE) this is a bit more complicated, because you have to work with shortcodes.
The problem: in the TinyMCE no dynamic shortcodes work. A shortcode can only interpret a fixed defined thing. But multiple questions are dynamic (1 – n questions & answers).
Therefore we decided to offer two shortcodes:

• Single FAQ – thought if you only have a FAQ and want to get into the Answer-Box at Google. Here you can also design the answer and provide it with links
• Multi FAQ – intended for several FAQs on one page, e.g. to extend your snippet on Google. You can’t insert links into the answer here, because the quotation marks in HTML within a shortcut are automatically removed by the TinyMCE.

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
                    {
                "@type": "Question",
                "name": "W-Frage 1?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Man kann die Inhalte auch <a href=\"https://deineURL.com\">formatieren<\/a> z.B. als <b>LISTE</b>:\n<ul><li>Listenpunkt 1<\/li><li>Listenpunkt 2<\/li><li>Listenpunkt 3<\/li><li>Listenpunkt 4<\/li><\/ul>"
                    }
            	},
	        {
                "@type": "Question",
                "name": "W-Frage 2?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Eine weitere Antwort und falls Du magst auch ein <a href=\"https://deineURL.com\">Link<\/a>."
                    }
                 },
                 {
                "@type": "Question",
                "name": "W-Frage 3?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Einfach nur eine Textantwort. Nutzt z.B. die Cliffhanger-Technik, um die Klicks zu erhalten."
                     }   
                }
         ]
    }
</script>

#Making settings in the Gutenberg FAQ block

Just click on the right margin in the block settings. Important: select the whole block, not the individual questions … 😉

• change headline
• set your own CSS class
• determine whether areas should be open or closed (accordion)

#Single FAQ shortcode for TinyMCE

[sc_fs_faq sc_id="fs_faqUniqueID" html="true/false" headline="p or h2-h6" img="img-id-231" question="Deine Frage" img_alt="img-alt text" css_class="your-class"]Deine Antwort – diese kannst du formatieren wie Du magst; inkl. Links[/sc_fs_faq]

#Multi FAQ shortcode for TinyMCE

[sc_fs_multi_faq headline-0="h3" question-0="Deine Frage 1" answer-0="Deine Antwort 1" image-0="" headline-1="h3" question-1="Deine Frage 2" answer-1="Deine Antwort 2" image-1="" headline-2="h2" question-2="Deine Frage 3" answer-2="Deine Antwort" count="3" html="true" css_class=""]

FAQ

#Screenshots