Add the FAQPage Structured Data (rich result) to an FAQ section powered by the Webflow CMS

This article is for people who follow the following 5 criteria:

1. You use the Webflow CMS to manage your Frequently Asked Questions throughout your site.
2. You want to improve your SEO by adding the Rich Result (Structured Data) FAQPage to your FAQ sections.
3. You want this solution to work even for nested CMS items.
4. You want to make your life easy: updating the CMS content should automatically update the Rich Result code.
5. You are not looking for a hack, you are looking for a real solution that Google recommends.

The short answer is: this solution works even if you use nested Webflow CMS collections.

Many webflow experts swear by the Webflow CMS feature. It combines easy content management with the superpower of the Webflow designer interface. You can even nest CMS lists inside CMS items. Here is a tutorial.

Nested CMS lists have many benefits. Your content becomes more manageable: manage articles on one side, manage FAQs on another. You can store more content: 30 CMS fields per collection, two collections, that’s 60... I think. Your design freedom also increases thanks to these new CMS fields.

JSON-LD Scripts

The first method is the JSON-LD method. Here, we add a <script> tag with a json inside it. The JSON has a specific format. Here is an example for NewsArticle.

You can add this to your HTML Head or the HTML document (this works as well). And with webflow CMS, you can add variables directly in the content like you see in the image.

Microdata: the HTML based technique

The other way is Microdata. It leverage HTML attributes (additional information in the HTML opening element. This means don’t really need to add the content a second time.

You do need to add and respect the nomenclature of the HTML attributes for Microdata.

Here is an example for NewsArticle in Microdata.4 HTML attributes need to appear in the HTML document in order to work: itemscope, itemtype, itemprop, content. itemscope is a bollean attribute, meaning you don’t need to add a key-value pair, just add that one word. itemtype is the attribute that will help you define the strucutre data type, so for example, you will have itemtype="https://schema.org/NewsArticle" for adding NewsArticle rich results. itemprop further details what data in wihting this HMTL element. they refer to inforamtion necessary for the RR to be conplete. ex: itemprop="datePublished". Finally, we have content, content="2024-01-05T08:00:00+08:00" will add the actual content.

See example below.

You need to add the right microdata HTML custom attributes to the right elements in your collection list. To summarize, you first need to tell google where to look for the FAQ section, then you need to tell Google where to find the FAQ item, etc.

1/ Identify the section

Add these HTML attributes to the collection list element, a-faq-collection_list in the image above:

• itemscope=”itemscope”
• itemtype=”https://schema.org/FAQPage”

2/ identify the FAQ item

Add these HTML attributes to collection item element, a-faq_item_w in the image above:

• itemscope=”itemscope”
• itemprop=”mainEntity”
• itemtype=”https://schema.org/Question”

3/ identify the question

Add this HTML attribute to a paragraph or Heading tag, a-faq-answer_h3 in the image above:

• itemprop=”name”

4/ identify the answer

Add these HTML attributes to a wrapper, a-faq-answer_div in the image above:

• itemscope=”itemscope”
• itemprop=”acceptedAnswer”
• itemtype=”https://schema.org/Answer”

Add this HTML attributes to the p containing the answer, a-faq-answer_p in the image above

• itemprop=”text”

The best way to test is to verify with Google’s rich result testing tool. Here is the link. You can paste the URL, or simply a code snippet (see the tab above the input). The URL way has the advantage of being comprehensive, it will look at everything on the page, the Code snippet way, is much much faster.

I would not use the Schema.org test, the reason is, Google’s rules are more strict that Schema.org, even though, Schema.org is the organization that invented and keep the protocol alive.