Khi sử dụng plugin Rank Math SEO, có hỗ trợ sẵn tính năng đó là chèn FAQ hiện thị trên google (Câu hỏi thường gặp) vào trong nội dùng bài viết của chúng ta.

Tính năng này không chỉ giúp tạo một phần FAQ đơn thuần trong bài viết mà còn thu hút lượt truy cập bằng việc hiện thị các câu hỏi lên kết quả tìm kiếm trên google, giống như ảnh dưới:

Trong bài viết này Win2t sẽ hướng dẫn các bạn cách chèn FAQ vào bài viết có hỗ trợ trong Rank Math SEO, và làm đẹp nó như kiểu hiện thị trên.

HƯỚNG DẪN THÊM FAQ CỦA Rank Math SEO VÀO BÀI VIẾT

Để chèn được FAQ của Rank Math vào thì bạn phải sử dụng khung soạn thảo kiểu mới của wordpress 5x (Block Editor, hoặc được gọi là Gutenberg). Nếu bạn dùng khung soạn thảo kiểu cũ Classis Editor thì nhớ chuyển lại qua khung soạn thảo kiểu khối mới của wordpress 5 thì mới chèn được nhé.

Khi viết bài ở khung soạn thảo kiểu khối, bạn tạo một Element với tên FAQ by Rank Math và thêm các câu hỏi, giống như ảnh sau.

Vị trí mà câu hỏi FAQ nên chèn nhất là vào cuối bài viết, như kiểu tóm tắt lại nội dung toàn bộ bài viết đó.

Sau khi thêm hoàn tất, các câu hỏi và câu trả lời nó sẽ hiện thị trong bài viết như sau:

CÁCH LÀM ĐẸP CHO PHẦN FAQ RANK MATH SEO

Mặc định FAQ sẽ hiện thị như một đoạn nội dung bình thường, hoàn toàn không có các hiệu ứng accordion như sau:

Để có thể có hiệu ứng như trên các bạn cần thêm đoạn code sau vào trong css và JavaScript nhé.

Bạn vào Appearance => Customizer (Giao diện => Tùy biến) và tìm mục Custom CSS hoặc Additional CSS rồi chèn đoạn mã CSS sau vào:

/** 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(//thachpham.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
}

Bạn nhớ thay lại link icon trong file css sau /chevron-down-black.svg thành link icon của bạn nhé.

Sau đó các bạn cài Plugin Header and Footer Scripts và chèn đoạn code sau vào scrips in footer, hoặc thêm vào file .js trên giao diện của bạn cũng được.

<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>

Kết quả như sau:

Chúc các bạn thành công.