Yoast SEO FAQ with a Stylish Accordion Design
If you are using Yoast SEO in WordPress, you probably know the importance of adding FAQs for SEO benefits. FAQs improve user experience and help search engines display FAQ rich results in Google search. But the default Yoast FAQ style looks too simple and not very attractive.
That’s why we created a custom Yoast FAQ accordion style – smooth, modern, and mobile-friendly. This style makes your FAQs interactive, user-friendly, and visually engaging, while still keeping the structured FAQ schema intact for SEO.
File Location: WordPress Dashboard > Appearance > Theme File Editor > Theme Functions add this code at bottom and Click Update File. That’s it. see this image for easy understand
// WebnQ.com Responsive FAQ Accordion Styles & Script for Yoast SEO
function custom_yoast_faq_styles_scripts() {
// CSS
wp_add_inline_style( 'wp-block-library', '
/* FAQ Container */
.schema-faq {
margin: 20px 0;
}
/* Each FAQ Section */
.schema-faq-section {
margin-bottom: 15px;
}
/* Each Question */
.schema-faq-question {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px 45px 15px 15px;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: background 0.3s ease, border-radius 0.3s ease;
font-weight: 600;
font-size: 16px;
line-height: 1.4;
display: block;
}
.schema-faq-question:hover {
background: #f1f1f1;
}
/* Answer (hidden by default) */
.schema-faq-answer {
display: none;
border: 1px solid #ddd;
border-top: none; /* merge with question border */
border-radius: 0 0 8px 8px;
padding: 15px;
font-size: 15px;
color: #444;
line-height: 1.6;
background: #fff;
}
/* Plus/Minus icon */
.schema-faq-question::after {
content: "+";
font-size: 20px;
font-weight: bold;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease, content 0.3s ease;
color: #333;
}
.schema-faq-question.active::after {
content: "−";
}
/* Active question styling */
.schema-faq-question.active {
border-radius: 8px 8px 0 0; /* only top rounded */
background: #f0f8ff;
margin-bottom: 0;
}
/* Responsive Fix */
@media (max-width: 768px) {
.schema-faq-question {
font-size: 15px;
padding: 12px 40px 12px 12px;
}
.schema-faq-answer {
font-size: 14px;
padding: 12px;
}
.schema-faq-question::after {
font-size: 18px;
right: 12px;
}
}
@media (max-width: 480px) {
.schema-faq-question {
font-size: 14px;
padding: 10px 35px 10px 10px;
}
.schema-faq-answer {
font-size: 13px;
padding: 10px;
}
.schema-faq-question::after {
font-size: 16px;
right: 10px;
}
}
' );
// JS
wp_add_inline_script( 'jquery-core', '
document.addEventListener("DOMContentLoaded", function () {
const questions = document.querySelectorAll(".schema-faq-question");
questions.forEach((q) => {
q.addEventListener("click", function () {
const isActive = this.classList.contains("active");
// Close all
document.querySelectorAll(".schema-faq-answer").forEach((ans) => ans.style.display = "none");
document.querySelectorAll(".schema-faq-question").forEach((qq) => qq.classList.remove("active"));
if (!isActive) {
this.classList.add("active");
const answer = this.nextElementSibling;
if (answer) {
answer.style.display = "block";
}
}
});
});
});
');
}
add_action( "wp_enqueue_scripts", "custom_yoast_faq_styles_scripts" );
Why Use Custom Yoast FAQ Style?
- SEO Benefits – The Yoast FAQ block automatically adds FAQ Schema, helping your site rank better.
- Better UX – Visitors can expand and collapse answers smoothly.
- Mobile Responsive – Looks great on all devices.
- Clean Design – Each question and answer are clearly separated with borders and smooth animations.
- One Open at a Time – Keeps the layout neat and professional.
Features of This FAQ Accordion
- Smooth expand and collapse animation
- Connected border design between question and answer
- Plus/Minus toggle icons
- Highlighted active question background
- Mobile optimized for smaller screens
How to Add This FAQ Style
- Copy the custom code we provided into your theme’s functions.php file.
- Add your FAQs using the Yoast SEO FAQ block inside the WordPress editor.
- Your FAQ section will now display in a professional accordion style, while still keeping the FAQ schema.
By combining Yoast SEO FAQ Schema with this accordion design, you are not only making your site search engine friendly but also improving user engagement, which indirectly boosts SEO performance.
This Yoast SEO FAQ accordion style is the best way to make your FAQs attractive, interactive, and SEO-optimized. Instead of showing plain static answers.
See also Rank Math FAQ WebNQ Style
Frequently Asked Questions
How do I style the Yoast FAQ block in WordPress?
You can style the Yoast FAQ block using custom CSS and JavaScript. By adding accordion effects, you can make questions expandable with a smooth design.
Does Yoast FAQ support accordion style by default?
No. Yoast SEO only provides structured data FAQ schema. You need to add your own CSS and JS code to enable accordion-style FAQs in WordPress.
Will customizing Yoast FAQ affect SEO?
No. Custom styling affects only the frontend look. The schema markup generated by Yoast remains the same, so your SEO benefits stay intact.
Can I add this Yoast FAQ style without plugins?
Yes. You can add the CSS and JS code directly into your functions.php file or use a child theme. No extra plugins are required.
Is this Yoast FAQ style mobile-friendly?
Yes. With responsive CSS, the accordion FAQ works smoothly on all devices including mobiles and tablets.
