How to Add FAQ Schema in Blogger? What is FAQ Schema?
In recent times, using FAQ Schema in your blog post becomes very important for SEO. Due to this, the user also gets a lot of convenience, due to which the ranking of your post also gets better. Today we will know what is FAQ? FAQ How to use Schema Markup? How to add FAQ Schema in Blogger? You can increase the traffic of your blog/ website by using FAQ Schema or can get better SERP ranking in search engine.
How to Add FAQ Schema in Blogger?
If you just write Simple Text in Questions and Answer Format, then Crawlers will Crawl them like Simple Text. Because of which your FAQ will not show in Rich Results. To do this, you will also have to add some codes along with Question/Answers, about which we have told you step by step below. By adding FAQ schema in blogger, you can add your Target Keyword and this will help in rank your website on Google.
Follow these steps to add FAQ Schema in Blogger :-
First Login Your Blogger Dashboard.
Now Click on Left Side “Theme” tab
Then click on “Edit HTML” button from the customize drop down menu
Now Add Below Line between <head> to </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">If above mentioned line is already is there, then ignore it.
Add CSS Code
Now find css section and add below given css
<style>
.containerwidth {
width: 100%;
}
.wrapper {
background-color: #ffffff;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 5px;
-webkit-box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
}
.toggle,
.content {
font-family: "Poppins", sans-serif;
}
.toggle {
width: 100%;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 16px;
color: #111130;
font-weight: 600;
border: none;
outline: none;
cursor: pointer;
padding: 10px 0;
}
.content {
position: relative;
font-size: 14px;
text-align: justify;
line-height: 30px;
height: 0;
overflow: hidden;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
</style>
Now search </body> and Paste the JavaScript before </body><script>
//<![CDATA[
let toggles = document.getElementsByClassName("toggle");
let contentDiv = document.getElementsByClassName("content");
let icons = document.getElementsByClassName("icon");
for (let i = 0; i < toggles.length; i++) {
toggles[i].addEventListener("click", () => {
if (parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight) {
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
icons[i].classList.remove("fa-plus");
icons[i].classList.add("fa-minus");
} else {
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
icons[i].classList.remove("fa-minus");
icons[i].classList.add("fa-plus");
}
for (let j = 0; j < contentDiv.length; j++) {
if (j !== i) {
contentDiv[j].style.height = 0;
toggles[j].style.color = "#111130";
icons[j].classList.remove("fa-minus");
icons[j].classList.add("fa-plus");
}
}
});
}
//]]>
</script>
Now Finally Paste this code in your blogger, wherever you want to show your FAQ Schema
<style>.containerr{
width: 100%;
top: 50%;
left: 50%;
}
.containerr .heading{
background: #e22310;
border-radius: 7px 7px 0px 0px;
padding: 10px;
color: #fff;
text-align: center;
font-family: "Poppins";
}</style>
<div id='main-wrapper'>
<div class='containerr'>
<p class='heading'>FAQs</p>
<div class="boxaccordion">
<div class="containerwidth">
<div class="wrapper">
<button class="toggle">Question 1<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>Answer1</p>
</div>
</div>
</div>
<div class="wrapper">
<button class="toggle">Question 2<i class="fas fa-plus icon"></i></button>
<div class="content">
<p> answer 2</p>
<div class="wrapper">
<button class="toggle">Question 3<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>Answer 3</p>
</div>
</div>
</div>
</div>
</div>Conclusion: Today we learned how to add FAQ Schema in our Blogger post. If you liked our post then do share it with your friends too.
