How to Convert the Yoast SEO FAQ Block into an Accordion

What’s missing from the Yoast SEO FAQ Block?

The Yoast SEO FAQ Block is missing styling and accordion behavior we commonly see utilized by FAQ sections on webpages.

Default Styling

The default styling does not provide the user experience users would expect. Yoast may have done this intentionally to allow developers the freedom and flexibility to style their own faqs sections.

This is what it looks like out of the box:

No Settings for the Yoast SEO FAQ Block
YOast SEO FAQ Block default styles

Custom Styling

With just a little custom css and javascript, we can create the user experience needed for a beautiful and functional FAQs section.

Here’s what it can look like:

Interaction Enhancement

Here’s a preview of a functioning FAQ accordion using the Yoast SEO FAQ Block

CodePen

CSS and Javascript Code to Create your own Yoast SEO FAQs Accordion

These styles define the visual presentation of the Yoast SEO FAQ Block on the frontend including the appearance of questions, the toggle functionality of expanding and collapsing answers, and specific styles for the block editor environment.

Use the following CSS:

CSS
/* Frontend Styles */

.schema-faq-section {
  background: white;
  margin: 1rem 0;
  border: 2px solid rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);
}

.schema-faq-question{
 cursor: pointer;
 display: flex;
 align-items: center;
 transition: opacity ease 0.25s;
 padding: 1rem;
 color: var(--wp--preset--color--primary);
 font-size: var(--wp--preset--font-size--x-large);
}

.schema-faq-question:hover {
  color: var(--wp--preset--color--secondary);
}

.schema-faq-question:after{
  width: 16px;
  height: 20px;
  display: inline-block;
  margin-left: auto;
  margin-right: 5px;
  vertical-align: top;
  color: inherit;
  content: "+";
}

.schema-faq-question.expanded:after{
  content: "-";
}

.schema-faq-question:hover{
  opacity: 0.75;
}

.schema-faq-answer{
  padding: 0 1rem 1rem 1rem;
  display: none;
}

.schema-faq-answer.default{
  display: block;
}

/* Backend Styles: Ensure all content is visible in the block editor */

.editor-styles-wrapper .schema-faq-question {
 cursor: text;
} 

.editor-styles-wrapper .schema-faq-answer {
 display: block;	
} 
CSS

This javascript code defines an accordion functionality for a Yoast FAQ block on a web page.

Use the following javascript:

JavaScript
jQuery(function($) {
	var yoast = {
		accordion: function() {
			var isAnimating = false; // Flag variable to track animation state

			$('.wp-block-yoast-faq-block').find('.schema-faq-question').click(function(event) {
				event.stopPropagation(); // Stop event propagation

				if (isAnimating) {
					return; // Ignore click if animation is in progress
				}

				isAnimating = true; // Set animation flag

				var answer = $(this).nextAll('.schema-faq-answer').eq(0);

				// Expand or collapse this panel
				answer.slideToggle(250, function() {
					$(this).toggleClass('expanded');
					$(this).prev('.schema-faq-question').toggleClass('expanded'); // Toggle 'expanded' class on question element
					isAnimating = false; // Reset animation flag after animation completes
				});

				// Hide the other panels
				$(".schema-faq-answer").not(answer).slideUp('fast');
			});

			$('.wp-block-yoast-faq-block .schema-faq-question').click(function(event) {
				event.stopPropagation(); // Stop event propagation

				if (isAnimating) {
					return; // Ignore click if animation is in progress
				}

				isAnimating = true; // Set animation flag

				$('.wp-block-yoast-faq-block .schema-faq-question').not($(this)).removeClass('expanded');
				$(this).toggleClass('expanded');

				isAnimating = false; // Reset animation flag
			});
		}
	};

	yoast.accordion();
});
JavaScript

Use FontAwesome for Custom Icons

If you are using FontAwesome, you can easily update the CSS code to use arrows instead of plus and minus characters using Font Awesome’s CSS Psuedo-elements.

Note: This is not the only want to handle adding custom icons, this is just one convenient way if you already are loading the FontAwesome font library.

FontAwesome CSS Psuedo-elements

Merge in the following code:

CSS
.schema-faq-question:after{
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  content: "\f107"; /* fa-angle-down */
}

.schema-faq-question.expanded:after{
  content: "\f106"; /* fa-angle-up */
}
CSS

Questions? Comments?

We’d love to hear your ideas. Let us know on twitter @afteractive

Yoast SEO FAQ Block and Structured Data

Schema Markup is a structured data vocabulary implemented using HTML tags to provide search engines with additional information about the content on a webpage. When it comes to FAQ (Frequently Asked Questions) content, using Schema Markup can offer several SEO (Search Engine Optimization) benefits. Here are some of them:

  1. Enhanced Search Engine Visibility: By implementing Schema Markup for FAQ content, you provide search engines with a clear structure and context for your FAQs. This helps search engines understand the questions and answers on your page more accurately. As a result, search engines may display your FAQs prominently in search results, such as in featured snippets or rich results, increasing your visibility and click-through rates.
  2. Improved Organic Search Rankings: Schema Markup can positively impact your organic search rankings. When search engines better understand the structure and relevance of your content through Schema Markup, they can provide more accurate search results to users. If your FAQ content is well-optimized and provides valuable answers, it may rank higher in search results, leading to increased organic traffic.
  3. Rich Snippets and Rich Results: Schema Markup allows you to create rich snippets, which are enhanced search results that display additional information beyond the standard title and meta description. With FAQ Schema Markup, you can potentially have your FAQs displayed as rich snippets in search results, attracting more attention and increasing click-through rates. Rich snippets provide a visual advantage over regular listings and can contribute to better SEO performance.
  4. Voice Search Optimization: As voice search becomes increasingly popular, Schema Markup can help optimize your FAQ content for voice-based queries. By structuring your FAQs using Schema Markup, you provide search engines with the necessary context to understand and deliver concise answers to voice search queries. This can enhance your chances of appearing in voice search results, driving more organic traffic to your website.
  5. Increased User Engagement: Schema Markup for FAQ content can lead to higher user engagement on your website. When users see relevant answers displayed in search results, they are more likely to click through to your website to find more information. By providing well-structured and informative FAQs, you can enhance user experience and increase the time spent on your site, which can indirectly benefit your SEO efforts.

Overall, implementing Schema Markup for FAQ content can provide various SEO benefits, including improved search engine visibility, higher organic rankings, enhanced click-through rates, optimized voice search performance, and increased user engagement. By leveraging structured data, you can enhance the discoverability and relevance of your FAQ content, ultimately driving more organic traffic to your website.

Yes, FAQ pages can be visible in Google search results by marking up FAQs with Structured Data. Google recognizes the value of FAQ content for users, as it provides concise answers to commonly asked questions. Depending on the implementation and optimization of your FAQ page, it can appear in various ways in search results:

  1. Rich Snippets: When your FAQ content is structured using Schema Markup, search engines like Google can display your FAQs as rich snippets in search results. Rich snippets typically include question and answer pairs, appearing prominently in a box format above the organic search results. This visibility can increase click-through rates and improve your website’s visibility.
  2. Featured Snippets: Google often displays featured snippets, also known as answer boxes, for search queries that have clear and concise answers. If your FAQ content provides comprehensive and relevant answers, it has the potential to be featured as a snippet at the top of search results, positioning your website as an authoritative source.
  3. Knowledge Panels: In some cases, when Google recognizes your website as a trusted and authoritative source of information, it may display your FAQ content in a knowledge panel. Knowledge panels are information boxes that appear on the right-hand side of search results, providing a summarized overview of the topic. If your FAQs contain valuable information, Google may include them in the knowledge panel for relevant search queries.
  4. Organic Search Results: Even without specific rich or featured snippets, well-optimized FAQ pages can still rank organically in search results. When users search for questions or topics related to your FAQs, your page can appear in the regular organic search results. By providing comprehensive and helpful answers, your FAQ page can attract organic traffic and improve your website’s visibility.

It’s important to note that the visibility of your FAQ content in search results can vary based on factors such as the competitiveness of the search query, the quality and relevance of your content, and the implementation of structured data. By optimizing your FAQ pages and utilizing Schema Markup, you can increase the chances of your FAQs appearing in prominent positions in search results, improving visibility and driving organic traffic.

The Yoast SEO FAQ Block is a feature provided by the Yoast SEO plugin, which is a popular SEO plugin for WordPress websites. The FAQ Block is a Gutenberg block that allows you to easily create and add FAQ content to your WordPress pages or posts.

With the Yoast SEO plugin installed and activated, you can utilize the FAQ Block to create structured FAQ content that is optimized for search engines. The block provides a user-friendly interface where you can add questions and corresponding answers.

The Yoast SEO FAQ Block offers the following features:

  1. Structured Data Markup: When you create an FAQ using the Yoast SEO FAQ Block, it automatically adds the necessary structured data markup, such as Schema.org markup, to the content. This structured data helps search engines understand the FAQ format and can potentially lead to enhanced visibility in search results.
  2. Schema Markup Options: The Yoast SEO plugin offers customization options for the FAQ Block, allowing you to specify the schema type and appearance of your FAQ content. You can choose from different schema types, such as FAQPage or QAPage, and customize the design, including colors and icons.
  3. SEO Optimization: The Yoast SEO plugin provides on-page SEO optimization features for the FAQ Block. It offers a content analysis tool that assesses the readability and SEO-friendliness of your FAQ content. It provides recommendations for improving the content, such as using relevant keywords, maintaining proper formatting, and ensuring readability.
  4. Google Search Appearance: The structured FAQ content created using the Yoast SEO FAQ Block has the potential to appear as rich results in Google’s search engine results pages (SERPs). This means that your FAQs can be displayed in an expanded format with questions and answers directly in the search results, increasing visibility and attracting more clicks.

Overall, the Yoast SEO FAQ Block is a helpful tool for creating and optimizing FAQ content on WordPress websites. It simplifies the process of adding structured FAQ content and provides SEO-related features to improve visibility and search engine performance.

Yes, the Yoast SEO FAQ does not come with any styling options within the WordPress Block Editor. You’ll need to add custom CSS and Javascript.

To change the default Yoast SEO FAQ Block into an accordion, you’ll need to apply custom css and javascript to your theme. There are a number of ways to do this, that we won’t cover in this article. This article assumes you have WordPress developer capabilities.

The following styles define the visual presentation of the Yoast SEO FAQ Block on the frontend including the appearance of questions, the toggle functionality of expanding and collapsing answers, and specific styles for the block editor environment.

Use the following CSS:

/* Frontend Styles */

.schema-faq-section {
  background: white;
  margin: 1rem 0;
  border: 2px solid rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);
}

.schema-faq-question{
 cursor: pointer;
 display: flex;
 align-items: center;
 transition: opacity ease 0.25s;
 padding: 1rem;
 color: var(--wp--preset--color--primary);
 font-size: var(--wp--preset--font-size--x-large);
}

.schema-faq-question:hover {
  color: var(--wp--preset--color--secondary);
}

.schema-faq-question:after{
  width: 16px;
  height: 20px;
  display: inline-block;
  margin-left: auto;
  margin-right: 5px;
  vertical-align: top;
  color: inherit;
  content: "+";
}

.schema-faq-question.expanded:after{
  content: "-";
}

.schema-faq-question:hover{
  opacity: 0.75;
}

.schema-faq-answer{
  padding: 0 1rem 1rem 1rem;
  display: none;
}

.schema-faq-answer.default{
  display: block;
}

/* Backend Styles: Ensure all content is visible in the block editor */

.editor-styles-wrapper .schema-faq-question {
 cursor: text;
} 

.editor-styles-wrapper .schema-faq-answer {
 display: block;	
} 

This javascript code defines an accordion functionality for a Yoast FAQ block on a web page.

Use the following javascript:

jQuery(function($) {
	var yoast = {
		accordion: function() {
			var isAnimating = false; // Flag variable to track animation state

			$('.wp-block-yoast-faq-block').find('.schema-faq-question').click(function(event) {
				event.stopPropagation(); // Stop event propagation

				if (isAnimating) {
					return; // Ignore click if animation is in progress
				}

				isAnimating = true; // Set animation flag

				var answer = $(this).nextAll('.schema-faq-answer').eq(0);

				// Expand or collapse this panel
				answer.slideToggle(250, function() {
					$(this).toggleClass('expanded');
					$(this).prev('.schema-faq-question').toggleClass('expanded'); // Toggle 'expanded' class on question element
					isAnimating = false; // Reset animation flag after animation completes
				});

				// Hide the other panels
				$(".schema-faq-answer").not(answer).slideUp('fast');
			});

			$('.wp-block-yoast-faq-block .schema-faq-question').click(function(event) {
				event.stopPropagation(); // Stop event propagation

				if (isAnimating) {
					return; // Ignore click if animation is in progress
				}

				isAnimating = true; // Set animation flag

				$('.wp-block-yoast-faq-block .schema-faq-question').not($(this)).removeClass('expanded');
				$(this).toggleClass('expanded');

				isAnimating = false; // Reset animation flag
			});
		}
	};

	yoast.accordion();
});

Make sure to include the following CSS to target the WordPress Block Editor backend.

/* Backend Styles: Ensure all content is visible in the block editor */

.editor-styles-wrapper .schema-faq-question {
 cursor: text;
} 

.editor-styles-wrapper .schema-faq-answer {
 display: block;	
} 

Yes there is! You can find that plugin here at WordPress.org: Turn Yoast SEO FAQ Block to Accordion Plugin. Depending on your preferences, you may prefer to to use the custom approach because it allows you to custom it to your theme and performance requirments.

To make your pages eligible for FAQ rich snippets in Google using structured data, you can follow these steps:

  1. Implement Schema Markup: Start by adding the necessary structured data markup to your FAQ content. Google supports the use of Schema.org markup for FAQs. You can include the following properties in your structured data:
  • @type: Set this to "FAQPage" to indicate that your content is in the form of FAQs.
  • mainEntity: Use this property to define the individual FAQ items within the FAQPage. Each FAQ item should have properties like name (the question) and acceptedAnswer (the answer).
  1. Structure the Markup: Ensure that your FAQ structured data is correctly structured using JSON-LD (JavaScript Object Notation for Linked Data) format. JSON-LD allows you to embed the structured data within the HTML code of your webpage. Place the structured data script in the <script> tags within the <head> section or directly before the closing </body> tag of your page.
  2. Markup Placement: Add the FAQ structured data markup to the relevant page that contains the FAQs. You can either include the markup directly on the page that lists the FAQs or on the individual FAQ pages.
  3. Provide Comprehensive Answers: Make sure your FAQ content provides clear and concise answers to the questions. Google favors comprehensive and valuable answers when determining eligibility for rich snippets. Avoid using duplicate or generic answers across multiple FAQ items.
  4. Test with Google’s Structured Data Testing Tool: To ensure your markup is valid and recognized by Google, use the Structured Data Testing Tool (currently available as a beta version called the Rich Results Test). Paste the URL of your page or the markup code directly into the tool and check for any errors or warnings. This tool provides insights into how Google interprets your structured data.
  5. Monitor Search Console: Keep an eye on your Google Search Console account for any potential issues or notifications related to your FAQ structured data. The Search Console can provide insights into how your structured data is performing and whether it is generating rich snippets in search results.

Remember that while implementing structured data and following these steps can increase the likelihood of your pages being eligible for FAQ rich snippets, there is no guarantee that Google will always display them. Google’s algorithms determine which content appears as rich snippets based on various factors, including relevance, quality, and user intent.

Related WordPress Insights


Take the next steps towards a better performing website

Get a WordPress website Get an SEO Audit Get WordPress Support