GOOLYBIB OFFICES – WEEKLY MARKETING MEETING

Your boss is impressed with the output of the content team. However he's noticed that the FAQ schema is missing from all of the blog posts.

The content team have done a fantastic job with organic traffic growth.
However, I'm concerned as we're missing rich snippets on most of the blog content.
I don't want to involve the writers in adding JSON-ld schema.
They've already added FAQ's to the page, can we parse the html content and dynamically create FAQ schema using Google Tag Manager?

FAQ Schema is an incredibly powerful tool for businesses to use in order to provide helpful and accurate information to customers in search engine results. By implementing FAQ Schema, businesses can ensure that their answers to commonly asked questions appear directly in search engine result pages (SERPs). This can help to increase visibility and drive more traffic to a website.

Not only does FAQ Schema provide customers with direct answers to their questions, but it also helps boost a website’s SEO. Search engines take into consideration the presence of FAQ Schema when they rank pages, so by having it in place businesses can improve their overall ranking.

It is possible to implement FAQ Schema using JavaScript and Google Tag Manager (GTM). Javascript is a programming language that can be used to add structured data to web pages. With GTM, businesses can easily deploy the necessary JavaScript snippets to their website pages, making the process of implementing FAQ Schema much simpler.

Overall, FAQ Schema is an incredibly useful tool for businesses to use. Not only can it help provide customers with more accurate answers to their questions, but it can also help to boost a website’s SEO ranking. By implementing FAQ Schema using JavaScript and Google Tag Manager, businesses can make the process of adding structured data to their web pages much easier.

FAQ Schema

0:00 <affirmative>. Okay. So we've just been informed that a large amount of our writers have written these blog posts. But the problem is, is they haven't added the FAQ skim run.
0:10 And so what we're gonna explore today is a way that we could potentially automate this entire process, not only for the historical blog posts that have been written, but for the blog posts that will be continued to be written on any sites that you might run.
0:24 In our case, I've got one on a growing kombucha blog and we've got the FAQs already produced in a kind of FAQ accordion style with the question and the answer.
0:35 And so what we are really looking to do is to figure out, okay, we've got this kind of structure of the HG m L already structured.
0:43 Is there a way we could pass that HT M l and automatically wrap it on the client side with H G M L F FAQ schema?
0:52 And so what we can kind of do is we can have firstly have a look at the overall script and what I'll be going through this line by line.
0:59 And so let's just have a look at what this is doing. And so in this website in particular, we are looping over all the questions.
1:06 We're looping over all the answers. And then if the questions array length is greater than zero and the answers array length is greater than zero, then we start doing something where we take the questions and then we map that with a object type of question with the name of the question and the accepted answer, adding in a type of answer, and then getting the relevant answer from that answers array.
1:34 And then after that we then have this FAQ schema and we do this thing where we're doing dot create element script and then making it into a application LD plus JSON type stratifying that onto the N H M L and then appending that to the body.
1:50 So that's kind of the script in a nutshell. But before we do that, let's go through and just demo what you might need to change on your script.
2:00 Everything will stay exactly the same apart from these two lines here. And you can see in my case, I've got this questions and I'm looking for all the questions that have this class.
2:12 Notice here, we've got the dot for class. But let's go and have a look at this one in particular, right?
2:17 So you can go and inspect the DOM by clicking right click inspect. And if we go here, we can see what I'm looking to get is this here, right?
2:27 And so you can see here, this here WP Block theme aisle items, accordion item title, and you can right click on this.
2:36 And then what you can do is you can copy the selector. And so if I go into the console and if I just try questions, constant questions is equal to document dot query selector all, and then you put in your query selector.
2:54 And notice what we want to do is we probably don't want to do the specific id, we actually want to use this ID here because that's the class, right?
3:06 So if I go back in here and I add this class in and then add a.at the front of that, what we are really looking to do query selector all, There we go.
3:19 So what we're really looking to do is find something like this where we have a unique class for every question.
3:27 Yeah. And as well as that, we also need to change, and you'll probably need to change your one here. And in my case, this is the one I'm looking for.
3:37 So if I was to just type document, query selector all, and then put in the class what that class is there, and so you'll see I don't get any here.
3:50 However, if these opened up, then you'll see I actually do get some of these nodes coming through potentially. We just see so again, actually mine is what I'm looking for is this one in particular here like that.
4:16 So again, that's what I would store the answers in. And so that's the only bit of the script you're actually gonna need to change.
4:26 The rest is all gonna be done for you. Where it's basically just making sure there's questions and answers. And then as well as that, then just attaching the right answer to each question.
4:35 And then this is the kind of magic where we are kind of dynamically on the client's side, creating this js o n script that's added to the inner H M O and appended to the, the document body.
4:48 Cool. So that's kind of the script in a nutshell. And then we're able to dynamically inject gt sorry, dynamically inject the schema onto the client side.
5:00 But the question you may be asking is how do we kind of make sure that this works? And the obvious answer would be to go to something like Google Search Console.
5:08 And you can see if I have a look here and we go and have a look, you can see that all those FAQs are actually coming fraught directly from the client side which is really, really good.
5:18 So it means that our writers won't need to necessarily get involved with that. But the other thing that we're gonna have to consider is adding this on inside of somewhere.
5:28 So you could maybe add that inside of the PHP template script. That might be somewhere you might decide to add that.
5:35 But for our demo, what we're gonna be showing you is how you could add that in gtm. So what I want you to do is I want you to go into Google Tag Manager, pause this video, load up Google Tag Manager, get up into your website.
5:46 You've changed the class for the questions, and you've made sure you're getting the relevant questions. You've changed the Quar class for the answers, and you're making sure you get the relevant answers.
5:58 And then once you've done that, you just need to create a custom tag and you're gonna go into the custom tag and you're gonna create crust cr custom h cml, and then you're gonna paste your script here, click support document dot, right?
6:12 Cuz we'll need to write to the dump. And then you're gonna set a trigger, but the trigger you're gonna do is on the window loaded trigger instead of the page view.
6:22 And that means that the whole dom will have already been loaded by this point, which means that when that content first gets rendered, we are waiting for that entire page s render, which means as soon as this piece of JavaScript runs, we've, we've always got all the DOM content.
6:39 So there's never any race conditions. We are simply waiting for the page to load. And then once that page is loaded, we then run this custom h email script, remember to tick support document dot, right click save, and then you'll have a tag that looks a little bit like this, and then you'll obviously need to submit and click publish and click skip.
7:00 And so that's kind of how you can take that script and then add that directly to your site. So the real magic is kind of happening in this script, and we've, you'll only ever have to change two lines of code for that.
7:14 Consider as long as you've got a H C M L class for each question and a HTML class for each answer.
7:21 And if you don't, then I'd kind of recommend restructuring your future FAQ accordions going forward so that you can easily use this kind of script on multiple websites.
7:31 And so that's kind of it. We've, we've sort of demoed this script in how you are automatically extracting questions and answers.
7:38 We're dynamically injecting that FAQ schema onto the client's side. We've showed you how you could deploy that into a gtm container.
7:49 And then once that's up and running, you'll find that naturally as you add these FAQ accordions going forward you'll be able to easily easily able to just basically just keep publishing, add your FAQ accordions, and then you'll find that FAQ schemers automatically applied.
8:08 So cool. See you in the next one.

What's the benefit of using Google Tag Manager for FAQ schema generation?

What parts of the FAQ schema script need changing?

Is a client side implementation of FAQ schemas as robust as a server side implementation?

Imagine your writers have written 100 blog posts with FAQ's. You're researching whether it's possible to automatically add FAQ schema without their input.

Vexpower Learning Certificate of Completion

Congratulations Karun Walia 💪