Blocks

FAQ Structured Data Block

by Creator 2

The FAQ Structured Data Block allows you to create questions and answers with visual elements on your page… and include those questions and answers as “structured data” in the page head that is used by Google to index and display your site/page using that data. Google listings for pages with FQPage markups will include those questions and answers as an accordion right there in the search results.

Settings Overview

  • Block Settings
    • Structured Data Only : Exclude the block from the page DOM, and include the FAQPage markup data in the page head.
    • Margins : All AMP Publisher blocks have a Top Margin and Bottom Margin setting allowing you to create space without having to insert a spacing block. [tutorial]
    • Text – Font : Includes all styling options available for text. [tutorial]
  • Title : Text object node with styling settings.
  • Question Styling / Answer Styling : Includes text alignment and all styling options available for text as overrides to any styles entered in Block Settings.
  • Q & A Options & Styling
    • Display the “Q” and “A” : Include stylized line prefixes using the letters “Q:” & “A:” or your own customized text.
    • “Q” Text / “A” Text : Edit the prefix text displayed before the question line. You may enter any text you wish, be sure to adjust the Width setting to suit the text and font size.
    • Q&A Width in Pixels : Adjust the fixed width of the prefix to allow for text, font size, and/or to create space between the prefix and it’s line.
    • Vertical Alignment : Choose how to align the “Q” & “A” vertically beside the question & answer text.
    • Text – Font : Includes all styling options available for text. Styling applied to the “Q&A” are independent from the colors used for the question and answer.

Object Map (DOM)

  • root object (div) targeted node from the Block Settings panel : Container object used to manage button layout in root DOM or other blocks.
    • title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block.
    • question wrapper (div) : untargeted node : Row object that contains side-by-side child objects.
      • q object (div) : targeted node from the Q&A Options & Styling panel : Fixed width object that contains the question’s “Q” Text.
      • question object (div) : targeted node from the Question Styling panel : Responsive width object that contains the Question text.
    • answer wrapper (div) : untargeted node : Row object that contains side-by-side child objects.
      • a object (div) : targeted node from the Q&A Options & Styling panel : Fixed width object that contains the answer’s “A” Text.
      • answer object (div) : targeted node from the Answer Styling panel : Responsive width object that contains the Answer text.

Example

It is an example question with no real answer, this answer is an answer with no real question.

This example includes the “Q” & “A” prefixes and adds some styling to the question text.

  • Insert an FAQ Structured Data Block into the page/post.
    • Enter some text into the Title field in the block editor. This example uses “Optional Title”.
    • Enter text into the Question text field.
    • In the Answer area, insert any combination of heading, list and paragraph blocks to create the content. Heading blocks are allowed in the FAQ block answer (also in markups).
    • That’s it for the basics. You question and answer will be shown on the page, and included Google search results (pending indexing).
  • Styling the Q&A is also an option. The example above includes “Q:” and “A:” prefixes for the question and answer and some styling enhancements for the question. You have options for changing and styling the prefixes, as well as a full set of styling settings for each node.
    • Enable the Q & A prefixes.
      • Open the Q & A Options & Styling panel in the block inspector (sidebar).
      • Turn on the Display the “Q” & “A” setting. This will include the Q&A prefixes.
      • Enter something into the “Q” Text field, this will become the new question prefix.
      • Adjust the Q&A Width in Pixels setting to allow for the width of the new prefix.
      • You may also change the Vertical Alignment of the Q&A in relation to their respective question & answer text.
    • Style the question with some colors and shadow.
      • Open the Question Styling panel.
      • Set the Font Color setting to white.
      • Set the Text Shadow setting to black.
      • Turn on the Double Shadow setting to create more impact from the text shadow.

Comments are closed.