How to Implement FAQ Page Schema on Webflow Dynamic Collection List Pages

June 1, 2020

Introduction

This article will help you if you’re specifically looking to implement unique, PENALTY FREE FAQPage schema onto your Webflow website using dynamic collection list pages for page level integration. Increase organic visibility and CTR with FAQ’s, and by embedding schema directly into your Webflow site using this method, you’ll avoid the one common mistake people make with GTM.

  • What is FAQPage schema?
  • Two things I’ve learned when implementing FAQPage schema.
  • How to create FAQ Schema?
  • How to create FAQ’s in Webflow when using dynamic collection list. 

If you’re wondering even what FAQ Schema is, then I’ll briefly tell you but there are plenty of other amazing resources on line that will do a much better job of this such as by our friends at Moz and their learning resource for schema.org markup

Still if you don’t have time to check out their own incredibly thorough learning guide regarding schema.org and its various uses, then here’s my version along with full instructions on how to implement this nifty tactic within a Webflow collection list framework.

What is FAQ Schema?

So Google introduced rich snippets over a decade ago as a way to help the user gather information about their search more quickly. They are now a regular feature in search results appearing in some form on every search result be this a commercial query for local services, a broad request for information or a navigational query for a brand name. Some pages will show more rich results than others and there’s no way to predict when. They are basically designed to give users a quick and convenient summary about the results of their search, delivering succinct information at a glance.

Below you can see a search result that shows two rich snippets; one is a Featured Snippet with a panel containing information that should quickly answer the query term. The other is the People Also Asked box which contains related queries. The third box shows organic results. In this example none of the boxes are specifically showing content designated for FAQ albeit they may be answering what could be considered an FAQ and are displayed in a similar way.

FAQ’s when properly presented in a simple question and answer format and when this content is accurately marked up on your page it becomes eligible for the FAQPage Rich Snippet result. The purpose of implementing FAQ is to try and capture a fourth type of rich snippet as shown below. These are generated specifically by implementing FAQPage schema data type and quite simply look like this.

 

 

Sadly, even with the best of websites there is absolutely no guarantee your schema markup will trigger a Rich Snippet to be displayed in the search result. Fortunately they don’t take too long to set up, so it’s worth a shot.

Broadly speaking, you need to add your FAQ on page, and then a corresponding piece of JSPN-LD script in your web page that Google can read and that conforms to the rules set for structured data. That’s it.

On the subject of there being no guarantee for obtaining a Rich Snippet, unlike the power of backlinks improving your website ranking potential, Rich Snippets come with the caveat of being a search engine privilege; even if your site ranks top for all related searches and you have properly implemented FAQ markup on your page that answers the query being searched for, there is no guarantee that Google will reward a search with a Rich Snippet for the query. Bummer, eh?

To this end, it’s also therefore good to know that FAQ Schema do not technically impact on your rankings so that provides some relief but importantly they can increase click through rate to your website so can benefit your site indirectly as those additional clicks will indeed act as an indicator of relevancy which clearly aids your potential to rank. 

In fact SEO Agency Distilled tested this schema theory and witnessed an increase in organic clicks as a direct result of website search listing placements taking up a larger area in the SERP than it would have if shown without. Fairly conclusive and all we need to push ahead. So here goes. 

Two things we’ve learned when implementing FAQPage schema.

First of all, we’d be wrong to give you the key to adding markup to your Webflow website without highlighting two key risks that I’ve learned in getting them to work. Here are two things you’re best to avoid.

1.Don’t suffer a misuse penalty.

It’s vital to make sure your markup matches your page content. If you include JSON-LD script on your web site and the information is not available to see on the page, then whether this is intentional or not, you can trigger a negative response from Google in the form of a structured data manual action. The discrepancy can appear as a form of cloaking whereby the markup appears to be manipulated for the purpose of the bot whereas the page content is different. 

The same risk applies to any other type of spammy behaviour such as manipulating the purpose of data types for different content such as with this example of a certain UK based SEO agency using Book schema to markup their Google review ratings, which in turn can trigger a Rich Snippet for Book reviews (the book review snippet occupies more real estate than the straight review schema. 

To date this particular company continues to benefit from such a tactic but for how long is in question.

At the same time worth noting, Google will not officially penalise you for any implementation errors in your markup if the content is correct, but at the same time not only will they not award Rich Snippets to pages with markup errors and in theory Google could consider your faulty markup as an overall indicator of poor quality thus resulting in a potential erosion of authority. 

Look, just do it properly ok?!

 

2. It’s absolutely fine to use GTM but if you can embed in your site instead of using GTM then it’s well worth the effort.

There are numerous resources available telling you how to use GTM to implement structured data. Indeed it’s very easy to get up and running, and well advised especially if your website does not allow for custom code, you don't know how to add custom code, or if you don’t have the resources or help on hand to edit webpage code. GTM is a super powerful tool that makes it possible under these circumstances and can indeed work for you, but using GTM can also come with its problems. 

The first thing to note; John Mueller has quietly advised against “relying” on GTM for schema. He also explains how Google will only really use structured data if it’s visible on the page. GTM is firing a script for the purpose of injecting custom script on to a page based on a page or event trigger, and it would seem that unless you’re running a particularly complicated website with excessive javascript that could impact on crawlability, then there’s probably some chance that your structured data could be misread or even missed. This is untested theory but I’ve read examples where people have spent far too much time trying to unpick their FAQ’s that are generating rich snippets with incorrect answers!

The other issue with GTM, and this I feel is far more valid. By using GTM you will need to build the content on the page, and then manually implement your tags across the various pages where you want them to feature, and where lots of pages exist with FAQ there is certainly room for error not least when copying / pasting the actual text from the web page in to your tag and then verifying that it matches. What if you have 100 product pages and have written FAQ for all of them? What if you return to the page to make an edit but fail to update the tag on GTM? Sure you’ll test them all one by one as you go, but returning to edit the FAQ and failing to amend GTM and the mistake could go unnoticed until it flags in search console as a manual action.

Bottom line is, if and wherever possible, embed within your website page, but use GTM if there’s no other way.

How to create FAQ Schema?

‍Again, this article is not a schema for dummies guide book; we are concerned with FAQPage schema and specifically how to do this within Webflow. However it’s worth knowing that there are lots of other common uses for schema that most websites will find association with such as reviews, products, people, books and of course FAQ, and so it’s well worth exploring them to see if they can help your website in some way. A simple one to target is Local Business which helps your GMB panel show the right information such as the correct telephone number and address. There are many different types of schema that you can use to markup your page and these can be found at schema.org

‍Here is the basic process for FAQPage schema (and in fact other types of) markup :

  1. Decide which markup data type you’re going to use - this could be an event, book review etc. You should only markup content that appears on the page. In our case we’re using FAQ.
      
  2. I’d send you to Google Markup helper, however not all data types are covered here and quite pointlessly this tool does not offer help for FAQ.

I’ll therefore show you the other tool that I like to use which is Merkel’s Schema Markup Generator. Here you can select the type of markup (ie FAQPage) and the tool spits out the script you need.

  1. Embed the schema markup within the page that contains your (FAQ) content.
  2. Test your markup using Google’s Schema validator.
  3. Crawl your page and wait.

That’s basically it.

So I am now going to tell you how to create FAQPage schema for your Webflow website specifically for where you’re publishing content onto a collection list template page. 

How to create FAQ’s in Webflow when using dynamic collection list. 

Before we go into this, it’s essential that you have a set number of FAQ created for every single collection list page otherwise you will end up with empty fields within your schema, and as mentioned earlier that’s not a good idea. In which case, use GTM. You can still use this method to render the FAQ on the page but you’d need to hold back on the custom embed.

I’m currently looking at a solution here which will be to add an IF statement operator to precede the <script> tag with the condition being if the FAQ fields are empty that the schema script will not run. I’ll update this post once I’ve finished testing what I think could work.

If anything, without the luxury of an inclusion script this process will encourage you to create FAQ’s for all of your collection pages and that can only increase your chances of winning a rich results

  1. Create your FAQ’s.

You probably already know this, but to create FAQ’s that have a chance of getting featured you should really first undertake a process of keyword research to identify long tail key phrases that people might be searching for with respect to your page content. If you’re not familiar with keyword research I suggest heading to Google Ads Keyword planner to get started and I’ve also explained keyword research in surface depth in my article explaining how to write blog content that ranks which should at least get you up and running. 

There’s a fair amount of trial and error at this point; finding key phrases that both have traffic and are achievable in terms of difficulty is the key; if you’re targeting highly coveted keywords with commercial intent from a weak domain then you’ve little chance of getting featured. Pick your battles!

Once you have decided on which FAQ’s to publish and markup, you need to create their answer and the rule of thumb here being that you explain the answer in the most informative but succinct way possible. Be specific, accurate and don’t waffle otherwise the content might appear unsuitable for FAQ.

To build out the information I like to use a Google Doc and you can also use unicode / emoji characters and hyperlinks here as Google will also pull these through to the SERP although there’s some debate around how long this feature will stay. Still whilst they are available, and the wide reaching and tested opinion is that they help click through, it's worth doing.

 

  1. Create your FAQ fields in webflow collection list and name them.

In Webflow you’ll already have a website with pages and a collection list that could be for products, blog posts, services or whatever else you've deemed list worthy. Whatever you’re marking up the beauty of this method is that your web page will only render the FAQ content blocks that have content, so there’s no chance of any empty boxes or unexpected gaps on the live page. However the schema script will still run in the background so it’s important as mentioned above to make sure you’ve created FAQ for every page.

Go to the specific Collection list Settings and create several new fields. Use memorable names to make it easier to reference them later such as FAQ Question 1, FAQ Answer 1, and so on.

  1. Enter the FAQ content.

Now you go into the collection item itself and copy from your Google Doc the FAQ questions and answers, one at a time, in the order how you want them to display and with any links or unicode emoji’s included. 

  1. Generate your schema markup.

Now you need to use a schema markup generator and as already said I’m using Merkel’s tool; here you select FAQ Page and copy the resulting output.

  1. Embed your script.

In the collection page template you need to cmd-E and select “EMBED” and by selecting the settings for this block you open the code editor. Here you need to paste the raw schema markup from your markup generator into the code editor.

  1. Add in the dynamic field tags.

The markup clearly lacks any Question or Answer text so you next need to add in the field tags. This will populate the custom code script with your text specific to the collection page that’s rendering the content. This is why it’s important to have content that will pull through or the schema will be empty. 

 

 

 

  1. Create text blocks in your collection page template . 

You’ll obviously create as many text blocks as there are Q and A, so for 3 x Q&A that’s 6 blocks all tagged accordingly. Plus maybe one the FAQ Header. Make sure you’re tagging each question with the correct answer.

 

  1. Add styling.

Finish editing any styling for these text blocks perhaps you would like to use a different font or size. Preview your design and check the tags are pulling through and once you’re happy that everything is working as required, publish your changes to your live domain. 

  1. Test they’re rendering and the schema is pulling via the embed.

Now if you look at View Source, cmd-f and type schema you’ll immediately see the markup is now showing as embedded within your page. You can also see the published live page clearly showing an identical version as they’re both pulling from the same content source. 

  1. Validate.

You can now check for errors by entering the URL into Google's structured data testing tool which helps to highlight any flaws with your implementation. It’s also useful to use Google’s rich results checker which is a nifty too to confirm whether your page is eligible for rich results and all being well the latter will ideally show you something along the lines of this.

 

 

 

  1. The penultimate step to take is to get the ball rolling by re-crawling your web page using Google Search Console and if you’re feeling really playful, climb on to Bing Webmaster if you’re feeling really playful as Bing also responds to structured data!

  2. Patience!

You’ve created FAQ content, published on your page within a collection list, created the markup, tested and validated. Now you must leave it alone. If you fiddle about with it you could essentially put the whole process back to square one. Google will decide whether to include your page as a rich result. It’s a bit of a gamble in that you might not be ranking for the search query you’re trying to answer and by entering the content on to your page you may start to rank for that term, and the purpose of implementing FAQ Page schema is to prompt Google to select your page for the Rich Snippet when that query is input. So this is why you need to be patient. It might never happen. If they do, they’re never permanent. The point is, at least you tried!

Summary

So that's it folks. Webflow is an amazing platform to use and for most SEO use cases there's a method, technique or workaround. Implementing schema is one of many SEO tactics you can employ when trying to rank your web page content and fortunately Webflow makes it fairly straight forward.

So get involved, have fun and good luck earning those rewards!

 

 

 

 

 


Grow your business.
Don't try this alone. I have the experience to help take your ideas from dream to reality putting you online, making you look good and bringing you customers.
Start Now

Contact us  :  020 7454 2602