How to Add FAQ schema in Blogger : Complete Guide for beginners
Welcome back, friends. Today we are going to see how to add the Accordion FAQ block to bloggers' websites.
What is Accordion FAQ?
It is a frequently asked question block.
It contains questions and perspective answers. it's become easy for the search engine to show rich results as shown in the below image.
Benefits of Accordion FAQ?
✓BETTER CTR - Automatically your website CTR will increase.
✓ It gives a better understanding to your visitors.
✓Your post will have rich results on the search result page.
✓Eligible for Voice Search Result.
✓Best for SEO.
Step by step guide to Add FAQ Schema in Blogger?
STEP:#1
Before creating an FAQ to your blog post, you must add CSS code to your Template.
*/............Css code for Accordion FAQ block........../
<style>summary {
font-size: 19px;
font-weight: 600;
background-color: #F1F1F1;
color: #333;
isolation: isolate;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
border-radius: 0.25rem;
text-align: left;
cursor: pointer;
position: relative;
}
details > summary::after { position: absolute; content: "+"; right: 20px; } details[open] > summary::after { position: absolute; content: "-"; right: 20px; } details > summary::-webkit-details-marker { display: none; } details[open] summary ~ * { animation: sweep .5s ease-in-out; isolation: isolate; margin-bottom: 1rem; background-color: #EEEEEE; padding: 1rem; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }
</style>
*/---end of code---/
How to add it: go to Theme and click edit HTML and search </head> and paste the Above code, just above the head tag.
STEP:#2
Go to Blogger Dashboard and create a new post or open a post, where you need to add the FAQ.
STEP:#3
Open your post in HTML mode and paste the following HTML code, where you want to Place FAQ in your blog post.
*/...........HTML code for FAQ block ....... / <details> <summary>--your question here--</summary> <div class="$(function(AT-FAQ)"> <p> ---your answer here---- </p> </div> </details> <details> <summary>---your question here--</summary> <div class="$(function(AT-FAQ)"> <p> ---your answer here---- </p> </div> </details> */---end of code---/
STEP:#4
Here replace your questions in summary tag(replace "your questions here" to your questions) and replace your answers in p tags(replace "your answers here" to your answers).
STEP:#5
Go to this website and enter Questions in the question box and enter your answers in the answer box. If you want to add more questions simply "Add another question" and follow up process.
Once you completed, copy the below code and paste it after where you added the FAQ block. This code is not present in your post, Google does not take as rich results. You must add this code.
Then publish your post.
How to Validate FAQ Schema
You can validate whether a Faq schema is properly implemented or not by using Google’s Rich Results, Testing Tool.
Copy the URL of the FAQ Schema post and paste it into the URL section and click the test URL. If you do it properly there is no problem otherwise you have errors. If an error occurred you need to fix it, then only Google takes it as the richest snippet.
You can also check the preview of this FAQ schema. It will show you a test preview of the page in the Google search result.
How to Notify Google To Crawl It
If you added the FAQ Schema in your old post, you must notify Google.
How to do that: again copy the URL of FAQ Schema post and go to your Google Search Console under the URL inspection tool and paste the URL and enter. After that click "Request indexing". That's all Google automatically took as the richest snippet.
some Recommendations for adding the FAQ schema
- Keep the answer short and simple (160-200 character)
- Write FAQs to convince users to click links.
- Add minimum 3 FAQs, 5 or more is recommended
- Follow Google's FAQ content Guideline
Now you have successfully created the schema data and submitted it to Google.
If you have any queries please leave them in the comments. If you like this post please share your social media profiles.
Code source:https://www.techyleaf.in.
Thanks all.
Comments