How to Add Automatic Schema Markup in Blogger Post

Hello friends, if you also meet and are running your website on blogger.com, then you will have to enter the code manually many times. If you write an article, then you will also add FAQ in it and also implement FAQ Schema Markup Code to show it on Google.

For this you have to work twice as hard. But using our Blogger Automatic Schema Markup Code, you only have to put FAQ inside your article and this code will automatically work like Schema Markup.

In simple language, you can eliminate the hassle of Schema Markup Generator Tool by using this code of ours. That is, now you can show it in Google by putting FAQ in your blog without creating FAQ Schema Markup Code again and again.

Step 1

First of all go to your Blogger Dashboard and open the Theme section. Now there you will see the option of Edit Html, click on it.

Now you have to scroll down to the bottom. At the bottom you will see </body>. Now you do not have to do much, just copy the code given below and paste it just before </body>.

<b:if cond='data:view.isSingleItem'><script>
  var faq = document.getElementById("faq");
  var questions = faq.getElementsByTagName("h3");
  var answers = faq.getElementsByTagName("p");
  var faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": []
  };
  for (var i = 0; i &lt; questions.length; i++) {
    var question = questions[i].innerText;
    var answer = answers[i].innerText;
    faqSchema.mainEntity.push({
      "@type": "Question",
      "name": question,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": answer
      }
    });
  }
  var script = document.createElement("script");
  script.innerHTML = JSON.stringify(faqSchema);
  script.type = "application/ld+json";
  document.head.appendChild(script);
</script><style> #faq {margin-bottom: 20px;}#faq h3 {padding: 10px;background-color: #f1f1f1;font-size: 18px;font-weight: bold;border-bottom: 1px solid #ccc; margin-bottom: 12px; line-height:1.7;}#faq h3:before {content: "Q.";font-size: 18px;color: white;background-color: var(--header-color);padding: 2px 4px;border-radius: 4px;margin-right: 10px;}#faq p {padding: 0px 10px;margin: 0px 0px 10px;font-size: 15px;}#faq p:before {content: "Ans.";font-size: 15px;color: #000000;font-weight: bold;margin-right: 6px;}</style></b:if>

Step 2

You are almost done. Now you have to put this type of code inside your article in which you have to write FAQ i.e. questions and answers. These will display well on your blog and will also appear in Google's search results page.

<div id="faq">
  <h3>What is Question?</h3>
  <p>This is answer.</p>
  <h3>What is Question 2?</h3>
  <p>This is answer 2.</p>
</div>