Khi bạn cài RankMath SEO thì phần FAQ sẽ hiển thị mặc định khá là Basic. Cho nên ở bài viết này Công Việt Blog sẽ hướng dẫn bạn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions).
Bạn có thể xem demo hiển thị FAQ trong bài viết này: Hướng dẫn đăng ký mở tài khoản ngân hàng MB Bank online
Với hiệu ứng FAQ của RankMath SEO như web của mình bạn sẽ có hiệu ứng đóng mở khi click, giúp website của bạn nhìn chuyên nghiệp hơn rất nhiều so với khi để mặc định.
Mặc định FAQ RankMath SEO chưa hỗ trợ hiệu ứng này, chỉ cho phép bạn hiển thị như một đoạn text cơ bản như đang viết bài mà thôi. Để đáp ứng nhu cầu SEO FAQ schema thì hầu như nhiều bạn đã tìm cách chèn FAQ vào website bằng nhiều cách.
Thêm FAQ bằng RankMath SEO
Đầu tiên phải thêm FAQ bằng RankMath SEO, bạn click vào dấu cộng để thêm block mới > gõ FAQ > chọn FAQ của RankMath và gõ thông tin FAQ mà bạn mong muốn.
LÀM ĐẸP FAQ CỦA RANKMATH 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 như trên blog của mình. Và để được như web của mình bạn làm theo như sau:
Bước 1: 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: 18px;
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(//congvietit.com/wp-content/uploads/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: 15px
}
Bạn nhớ icon ảnh này về và thay //congvietit.com/wp-content/uploads/chevron-down-black.svg thành link icon của bạn nhé.
Bước 2: Thêm script bên dưới vào footer của theme bạn đang sử dụng. Bằng cách mở Giao diện => sửa giao diện (Theme file editor) => chọn theme đang sử dụng => mở file footer.php. Kéo xuống cuối và thêm đoạn code sau vào sau thẻ đóng </body>:
Ghi chú: Bạn cũng có thể 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.
<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ả:
Ngoài ra, nếu bạn có thể đọc thêm bài viết này Hướng dẫn SEO WordPress cơ bản cho người mới bắt đầu để hiểu rõ hơn về cách làm SEO WordPress, hoặc đọc bài viết Cách sử dụng Block editor WordPress – Hướng dẫn Gutenberg WordPress để biết cách sử dụng các Block Editor trong WordPress.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.
FAQ Schema là gì?
FAQ Schema là dữ liệu có cấu trúc ( Schema Markup ) theo hình thức Câu hỏi thường gặp ( Frequently Asked Questions ) để hiển thị trả lời nhanh thắc mắc cho từ khóa người dùng đang tìm trên Google. Bạn sẽ trông thấy FAQ Schema dưới các kết quả tìm kiếm của một trang web khi nó hiển thị trên google theo từ khóa bạn đang tìm.
Mục đích của FAQ Schema là trả lời nhanh các thắc mắc của người dùng ( mà theo google nghĩ ) là có ích và chính xác nhất. Và khi truy cập web sẽ có các tab như bài Làm đẹp FAQ RankMath SEO này đang nói. Không gì hơn ngoài đưa ra câu trả lời nhanh chóng trước khi người đó truy cập link của website hiển thị FAQ đó.
Đây là 1 tính năng Google công bố tại sự kiện Google Dance Singapore vào ngày 26/7/2018, được Google triển khai chính thức vào ngày 8/5/2019. Cấu trúc Schema FAQ có 2 phần chính là câu hỏi thường gặp và câu trả lời cho câu hỏi đó. Lời ích của FAQ Schema khi được hiển thị là nó làm website bạn có vẻ ấn tượng hơn khi người dùng trông thấy.
Và tất nhiên, ấn tượng hơn thì khả năng người dùng chọn link website của bạn truy cập là cao hơn. Từ đó nâng cao uy tín của bạn và giúp từ khóa mau lên top hơn. Cũng vì điều đó mà mình mới viết bài Làm đẹp FAQ RankMath SEO, đây là một kỹ thuật seo mới bên SEO đoạn trích nổi bật.
Chúc bạn thành công!
