Get traffic with FAQ on Google and how to insert with Rank Math SEO

When using RankMath SEOit has built-in support for a feature that is to insert the FAQ (Frequently Asked Questions) display box into the article content.

This feature not only helps create a simple FAQ section in the article, but also attracts visitors by displaying these questions in the search results, like the image below.

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 15
Show FAQ on search results

In this article, I will guide you through how to insert FAQ into articles that support Rank Math SEO, and beautify it as your display.

How to insert the FAQ of Rank Math SEO into the article

To insert the Rank Math SEO FAQ, you must use the block editor (also known as Gutenberg). If you use the Classic Editor plugin, remember to switch back to the block editor before you can insert it.

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 16

When writing articles in the block editor, you create an element with the name FAQ by Rank Math and add questions, like the image below.

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 17
How to add a RankMath SEO FAQ to an article

The best place to insert it is to insert it at the end of the article, as a kind of summary of the content you have presented before in the form of questions so that users can find useful information in this area.

Once added, the questions and answers will show up in posts like this one.

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 18
The FAQ shows up in the article, like a normal piece of text

Beautify RankMath SEO’s FAQ

By default, the FAQ section will display as a normal piece of content, completely without the accordion effect like on my blog.

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 16
Attract traffic with FAQ on Google and how to insert with Rank Math SEO 20
Display FAQ with accordion effect

I also always say that displaying the accordion-style FAQ like this is something I stole from the blog VietMoz ?. If you want to display this style, then insert CSS and JavaScript as follows.

See more:  How to create a simple Meta Box by yourself

You enter Appearance => Customizer (Interface => Customization) and find the Custom CSS or Additional CSS section and insert the following CSS code:

/** Rank Math SEO FAQ **/
#rank-math-faq {
	margin-top: 40px;
	border: 1px solid #e0e0e0;
	border-top: 4px solid #22a8e2;
	padding: 20px;
	position: relative
}
#rank-math-faq .rank-math-question {
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 28px;
	padding: 18px 0 13px;
	margin-top: 0;
	margin-bottom: 0;
	color: #333;
	position: relative;
	cursor: pointer
}

#rank-math-faq .rank-math-question:after {
	content: "";
	background: url(//TechtipsNReview.com/chevron-down-black.svg) no-repeat right center;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 1;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all .3s
}

#rank-math-faq .rank-math-question.faq-active:after {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg)
}

#rank-math-faq .rank-math-list-item:not(first-child) .rank-math-answer {
	display: none
}

#rank-math-faq .rank-math-list-item:not(:last-child) {
	border-bottom: 1px solid #f0f0f0
}

#rank-math-faq .rank-math-answer {
	padding: 0 10px
}

#rank-math-faq .rank-math-answer p,
#rank-math-faq .rank-math-answer {
	color: #666;
	background-color: #fff;
	font-size: 18px
}

You remember this image icon and change //TechtipsNReview.com/chevron-down-black.svg become your icon link. Sadly, if you delete or change the path, you will lose the drop down button right away.

Then you install the plugin Header and Footer Scripts and insert the following into Scripts in footer, or embed in the file .js on your theme you can:

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 16
<script>
(function($) {
    if ($('body').hasClass('single-post')) {
        $('#rank-math-faq').prepend('<h3 class="rank-math-title">Câu hỏi thường gặp</h3>');
        $('.rank-math-question').click(function(event) {
            if (!$(this).parent().find('.rank-math-answer ').is(":visible")) {
                $('.rank-math-question').removeClass('faq-active');
                $(this).addClass('faq-active');
                $('.rank-math-answer ').hide();
            } else {
                $(this).removeClass('faq-active');
            }
            $(this).parent().find('.rank-math-answer ').toggle(300);
        });
    }
})(jQuery);
</script>

Result:

Attract traffic with FAQ on Google and how to insert with Rank Math SEO 22

Congratulation you are successful.

4.6/5 – (24 votes)


Source: Get traffic with FAQ on Google and how to insert with Rank Math SEO
– TechtipsnReview

, , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *