Hello guys! In this article, I’m going to teach you how to create simple FAQ widget with schema using HTML. An FAQ widget in HTML is highly useful and important for improving user experience on your websites or blogs.
It helps provide quick and accessible answers to common questions. It allows your blog’s visitors to find relevant information without having to search through multiple pages or wait for customer support.
This makes it easy for readers to navigate efficiently and reduce bounce rates. From a design perspective, an FAQ in HTML website helps organize information in a compact, collapsible format, keeping pages uncluttered while still offering depth when needed.
Additionally, a well-implemented FAQ widget with schema code improve SEO. You can also include keyword-rich questions and answers to make it much easier for search engines to index your site or blog and improve its visibility.
Without much ado, I will show your FAQ HTML source code and give example of how it will appear on your website. Note, this FAQ html code works on all websites built with HTML computer language including Blogger and Wordpress.
FAQ HTML Code
Here’s FAQs HTML code with and without Schema:
FAQs with Schema
<!--[ Accordion (FAQPage) ]--><div class="showH" itemscope="" itemtype="https://schema.org/FAQPage">
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">Place_Your_FAQ_Title_Here</summary>
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">Place_Your_FAQ_Title_Here</summary>
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac alt" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">Place_Your_FAQ_Title_Here</summary>
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac alt" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">Place_Your_FAQ_Title_Here</summary>
<div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">Place_Your_FAQ_Answer_Here</p>
</div>
</details>
</div>
FAQs without schema
<!--[ Accordion (Grouped) ]-->
<div class="showH">
<details class="ac">
<summary>Place_Your_FAQ_Title_Here</summary>
<div>
<p>Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac">
<summary>Place_Your_FAQ_Title_Here</summary>
<div>
<p>Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac alt">
<summary>Place_Your_FAQ_Title_Here</summary>
<div>
<p>Place_Your_FAQ_Answer_Here</p>
</div>
</details>
<details class="ac alt">
<summary>Place_Your_FAQ_Title_Here</summary>
<div>
<p>Place_Your_FAQ_Answer_Here</p>
</div>
</details>
</div>
Note that you cannot FAQs components that have schema code at more than one places in a single post or page. It’s advisable to grouping all of FAQs in a single component. However, for FAQs that doesn’t have schema, you can use it in more than two places in a page.
Examples of the FAQs HTML Code
Here's the example of how the FAQs HTML Code will look:
Place_Your_FAQ_Title_Here
Place_Your_FAQ_Answer_Here
Place_Your_FAQ_Title_Here
Place_Your_FAQ_Answer_Here
Place_Your_FAQ_Title_Here
Place_Your_FAQ_Answer_Here
Place_Your_FAQ_Title_Here
Place_Your_FAQ_Answer_Here
In a nutshell, when you properly marked up FAQ html code, your pages may be eligible to have a rich result on Search and an Action on the Google Assistant, which can help your site reach the right users.
