CÁCH CHÈN FAQ CỦA RANK MATH SEO VÀ HIỂN THỊ TRÊN GOOGLE

Nhiều bạn khi lướt web sẽ bắt gặp những câu hỏi dưới một địa chỉ website của trang tìm kiếm đó là faq của Rank Math SEO plugin với tính năng như hình dưới đây.

Rank Math SEO

Đó là việc họ đã chèn hộp hiển thị FAQ (Frequently Asked Questions – Câu hỏi thường gặp) vào trong nội dung bài viết đó.

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 này lên kết quả tìm kiếm, điều này giúp thể hiện nhiều hơn nội dung mà người xem có thể quan tâm, giống như ảnh trên.

Trong bài viết này, mình sẽ hướng dẫn cách chèn FAQ vào bài viết có hỗ trợ trong Rank Math SEO.

ĐIỀU KIỆN VÀ CÁCH ĐỂ CHÈN FAQ CỦA RANK MATH SEO VÀO BÀI VIẾT.

Để chèn được FAQ của Rank Math SEO, bạn phải sử dụng khung soạn thảo kiểu khối (block editor, hay còn gọi là Gutenberg). Nếu bạn dùng plugin Classic Editor thì nhớ chuyển lại qua khung soạn thảo kiểu khối 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 dưới đây.

khung soạn thảo kiểu khối

Vị trí chèn nên chèn vào cuối bài viết, như một kiểu tóm tắt lại nội dung bạn đã trình bày trước đó theo dạng các câu hỏi để người dùng có thể tìm được thông tin bổ ích tại khu vực này.

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ư kiểu này.

FAQ hiển thị trong bài viết

LÀM ĐẸP FAQ CỦA RANK MATH SEO

Mặc định phần FAQ nó sẽ hiển thị như một đoạn nội dung bình thường, hoàn toàn không có hiệu ứng accordion (hiệu ứng click vào mũi tên chỉ xuống sẽ hiện nội dung).

Hiển thị FAQ với hiệu ứng accordion

Nếu bạn muốn hiển thị kiểu thế này thì chèn CSS và JavaScript như sau.

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:

[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(//icon.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
}

[/code]

Bạn nhớ tải icon mũi tên chỉ xuống hoặc icon bất kỳ mà bạn muốn và thay vào //icon.svg thành link icon của bạn nhé.

Sau đó bạn cài plugin Header and Footer Scripts và chèn đoạn sau vào Scripts in footer, hoặc nhúng vô tập tin .js trên theme của bạn đều được:

[code]

<script>
(function($) {
if ($(‘body’).hasClass(‘single-post’)) {
$(‘#rank-math-faq’).prepend(‘<h3 class=”rank-math-title”>Rank Math vs Yoast — FAQ</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>

[/code]

Kết quả:

Trước.

Sau.

Vậy là bạn đã hoàn thành cách chèn FAQ vào bài viết có hỗ trợ trong Rank Math SEO.

Đơn vị thiết kế website uy tín

Web MTP là đơn vị cũng cấp các dịch vụ cần thiết để vận hành và quản trị website một cách tốt nhất.

Website: https://webmtp.com/

Liên hệ: 0931.912.379

Cảm ơn các bạn đã theo dõi các bài viết tại Web MTP. Và trong thời gian chờ đợi bài viết tiếp theo, các bạn có thể tham khảo các bài viết liên quan hấp dẫn khác tại website này nhé!

Hướng dẫn thiết kế website cơ bản bằng WordPress từ A-Z – Phần 1