Accordion FAQ with Structured Data Output

Elevate Your Brand with Structured Data Accordion FAQs

With our module, you're not just answering questions – you're creating an interactive experience. The Accordion style layout ensures that your FAQs are sleek, organized, and easily navigable, enhancing user experience.  

Our module seamlessly integrates Structured Data into your FAQs. What does that mean for you? It means your FAQs won't just live on your website; they'll also appear as rich snippets directly on Google's search engine results page (SERP). That's right – potential customers will see your FAQs at the top of their search results, increasing visibility and driving traffic to your site.  

We've got you covered for voice search enthusiasts, too. With Structured Data, your FAQs will be accessible through Google Assistant, making it easier for users to find the answers they need.  

  

What is an accordion FAQ? 

An expandable FAQs section helps you display text content in a sliding accordion format. Website visitors can click on each item to expand to show the full text. This is a great way to display responses to customers' frequently asked questions. Beyond that, you can display other detailed content uncovered by a simple click. 

 

How to setup?

Step 1: Purchase the FAQ accordion custom module for HubSpot by leadstreet. 
Step 2: Go to the Design Manager and open your template.  
Step 3: Add the FAQ accordion to the global content section. 
Step 4: Enable FAQ Accordion only for using the FAQ Accordion. 
Step 5: Enable Id+json output only for using the structured data output.  
Step 6: Apply your changes by clicking “Apply changes.” 

 

How to add your FAQ's to the custom module for HubSpot 

Step 1: Under FAQs, you’ll see “No FAQs yet”, if you are just starting. Click "Add one" into the Accordion FAQ Structured Data Module. 
Step 2: Add a question in the space for “Question”. This will appear as the FAQ sub header. 
Step 3: Add the answer as short paragraphs (1 or more) in the body text.  
Step 4: Enable Add image to add an image.
* See instructions below for more details.  
Step 5: Enable Expand by default if you want the FAQ to be expanded.
** See instructions below for more details.  
Step 6: You can edit the smart rules of the FAQ to show different content based on different contact lists or segments with your main response as a default. 
Step 7: Apply your changes by clicking “Apply changes.”  
Step 8: Add as many expandable FAQs as desired by clicking +Add in the top right corner. Repeat steps 2-5 and apply your changes. 

 

How to add an image to the accordion FAQ*  

Step 1: Enable “Add image” by ticking the text box (Answer)' in the Accordion FAQ module itself. 
Step 2: Choose the position of your image (left, right, top, bottom)  
Step 3: Add your image per FAQ. JPG and JPEG images are ideal for websites so as not to affect the image size and loading time. 
Step 4: Add image alt text based on keywords relevant to the topic. 
Step 5: Check and adjust your image's Size, Width and Height as needed.  
Step 6: Apply your changes. 

 

How to expand by default**

You can set the behavior of your accordion FAQ. You can adjust the settings so it expands by default when the page loads. See steps on how to set this up and the FAQ expand- collapse example below. 

Step 1: Go to the specific FAQ you want to edit. 
Step 2: Under the text editor and under the image options, you'll find the tick box for "Expand by default". 
Step 3: Enable this and apply your changes. 

 

How the FAQ accordion looks like when expanded by default 

How it looks without enabling the Expand by default option

 

How to test the Product Structured Data?

To test your structured data, use this tool from Google Search Central. 

Step 1: Google recommends starting with the Rich Results Test to see what Google rich results can generate for your page.   

Step 2: For generic schema validation, use the Schema Markup Validator to test all types of schema.org markup, without Google-specific validation. 

 

How the Accordion FAQ with Structured Data Output looks like 

 

 

Any Questions