Skip to content

Instantly share code, notes, and snippets.

@eywu
Last active March 2, 2023 19:41
Show Gist options
  • Save eywu/7f698e633f0c24b07643fe47cc3d27e6 to your computer and use it in GitHub Desktop.
Save eywu/7f698e633f0c24b07643fe47cc3d27e6 to your computer and use it in GitHub Desktop.
Various HTML patterns found for FAQ markup
<!-- Unordered List Semantic Markup (Recommended) //-->
<h3>Frequently Asked Questions (FAQ)</h3>
<ul>
<li class="faqItem">
<p class="question">This is a question?</p>
<p class="answer">This is an answer</p>
</li>
<li class="faqItem">
<p class="question">This is a question?</p>
<p class="answer">This is an answer</p>
</li>
</ul>
<!-- Basic Semantic Markup //-->
<h3>Frequently Asked Questions (FAQ)</h3>
<div>
<h4 class="question">This is a question?</h4>
<p class="answer">This is an answer</p>
</div>
<div>
<h4 class="question">This is a question?</h4>
<p class="answer">This is an answer</p>
</div>
<!-- Feeling 'Extra'? Try section, details, summary //-->
<h3>Frequently Askwed Questions (FAQ)</h3>
<section>
<details open>
<summary class="question">This is a question>?</summary>
<p class="answer">This is an answer</p>
</details>
</section>
<section>
<details open>
<summary class="question">This is a question?</summary>
<p class="answer">This is an answer</p>
</details>
</section>
<!-- Via Google Documentation https://developers.google.com/search/docs/appearance/structured-data/faqpage#examples //-->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "What is the return policy?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>Most unopened items in new condition and returned within <b>90 days</b> will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store.</p><p>Online purchases may be returned via a major parcel carrier. <a href=https://example.com/returns> Click here </a> to initiate a return.</p>"
}
}, {
"@type": "Question",
"name": "How long does it take to process a refund?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We will reimburse you for returned items in the same way you paid for them. For example, any amounts deducted from a gift card will be credited back to a gift card. For returns by mail, once we receive your return, we will process it within 4–5 business days. It may take up to 7 days after we process the return to reflect in your account, depending on your financial institution's processing time."
}
}]
}
</script>
@eywu
Copy link
Author

eywu commented Mar 2, 2023

These are examples of the HTML structured found on popular websites that have the FAQ SERP features on their Google listings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment