Skip to content

Instantly share code, notes, and snippets.

@MarkWarneke

MarkWarneke/_include_faq.html

Last active January 6, 2021 14:48
Show Gist options
  • Save MarkWarneke/a231225b53283917a30897eae1cb64ff to your computer and use it in GitHub Desktop.
Save MarkWarneke/a231225b53283917a30897eae1cb64ff to your computer and use it in GitHub Desktop.
Download ZIP
Generate Google Search Central Advanced SEO mark up FAQs with structured data using Jekyll Liquid https://developers.google.com/search/docs/data-types/faqpage
Raw
_include_faq.html
---
faqitems:
- question: This is a question1
answer: >-
This is my answer, and if you want [mailto](mailto:me@mymail.com)
- question: This is a question2
answer: >-
This is an answer with list elements:
- Element One.
- Element Two.
---
<div>
{% assign faqitems_is_not_empty = include.section.faqitems | is_not_empty %}
{% if faqitems_is_not_empty %}
<dl class="faq">
{% for faqitem in include.section.faqitems %}
<dt class="header">
{{ faqitem.question }}
</dt>
<dd class="panel">
{{ faqitem.answer | markdownify }}
</dd>
{% endfor %}
</dl><!-- .faq -->
</div>
<!--
https://developers.google.com/search/docs/data-types/faqpage
A Frequently Asked Question (FAQ) page contains a list of questions and answers pertaining to a particular topic. Properly marked up FAQ 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.
-->
{% assign faqitems_is_not_empty = faqitems | is_not_empty %}
{% if faqitems_is_not_empty %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{% for faqitem in include.section.faqitems %}
{
"@type": "Question",
"name": "{{ faqitem.question }}",
"acceptedAnswer": {
"@type": "Answer",
"text": "{{ faqitem.answer | markdownify | replace: '"', '\"' | strip_newlines }}"
}
}{% unless forloop.last %},{% endunless %}{% endfor %}
]
}
</script>
{% endif %}
Raw
generated_faq.html
<div>
<dl class="faq">
<dt class="header">
This is a question1
</dt>
<dd class="panel">
<p>This is my answer, and if you want <a href="mailto:me@mymail.com">mailto</a></p>
</dd>
<dt class="header">
This is a question2
</dt>
<dd class="panel">
<p>This is an answer with list elements:</p>
<ul>
<li>Element One.</li>
<li>Element Two.</li>
</ul>
</dd>
</dl><!-- .faq -->
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "This is a question1",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>This is my answer, and if you want <a href=\"mailto:me@mymail.com\">mailto</a></p>"
}
},
{
"@type": "Question",
"name": "This is a question2",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>This is an answer with list elements:</p><ul> <li>Element One.</li> <li>Element Two.</li></ul>"
}
}
]
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment