Frequently Asked Questions (FAQs) with Schema to Hugo

tips & tricks
1

Adding Frequently Asked Questions (FAQs) and FAQ Schema for Hugo - beginners edition—

  1. Add the code below in your single.html file inside the code that wraps your content ({{ .Content }}). e.g inside the opening <article> tag.
{{ if $faq }} itemscope itemtype="https://schema.org/FAQPage" {{ end }}

Which would look like this–

<article {{ if $faq }} itemscope itemtype="https://schema.org/FAQPage" {{ end }}>
{{ .Content }}
</article>
  1. Create an faq.html file inside layouts/shortcodes (base layouts folder or theme’s) and paste the code below in it
<div itemscope itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 itemprop="name">{{ with .Get "title" }}{{ . }}{{ end }}</h2>
    <div itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
    <div itemprop="text">{{ .Inner | markdownify }}</div>
    </div>
</div>

Change the h2 value to whatever pleases you or your content structure, if you don’t want the question to be a second level heading.
3. Add faq: true to your page’s front matter that you want to contain the FAQs, for example–

---
title: Hugo is Awesome
slug: "awesome-hugo"
faq: true
---
  1. Use the shortcode in your FAQ page as follows–
{{< faq title="<!-- insert the question here -->" >}}
  <!-- insert the answer here. Supports paragraphs, lists, etc.).
{{< /faq >}}

Validate your schema with Google’s structured data testing tools.

2 Likes
2

Thank you. I want to use Schema.org for other occasions. Like we have a API which delivers Schema.org event data and then include this. But I did not find the time to do this besides all other priorities. Schema.org is just a nice thing.

3

If you are also looking for other Schema, I made a “tips” post about that : Manage easily any SEO schema.org thru your different sites