Hướng dẫn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions)

Truy cập:

Chia sẻ:

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.

Hướng dẫn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions)

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.

Hướng dẫn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions)

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

Hướng dẫn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions)

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!

0 0 đánh giá
Đánh giá
Công Việt
Công Việt
Mình xây dựng blog này với mục đích chia sẻ những kinh nghiệm, thủ thuật của mình liên quan đến các lĩnh vực như CNTT, Marketing Online, MMO, Đồ Họa, SEO, ... Rất mong nhận được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments

DANH MỤC

Bài viết liên quan

Download Plugin WP Rocket mới nhất – Tăng tốc Website số 1

Chia sẻ Plugin WP Rocket V3.12.6.1 - Download plugin WP Rocket số #1 thế giới hiện nay ngay....

Yoast SEO Premium

Đây là phiên bản Premium của Yoast SEO: Redirect manager – Quản lý và tự động chuyển hướng URL. Synonyms & related keyphrases –...

WordPress WooCommerce SEO Premium

WooCommerce là một trong những plugin hỗ trợ bán hàng tốt nhất và phổ biến nhất hiện nay....

Duplicator Pro

Duplicator Pro là một trong những plugin backup rất phổ biến trên WordPress. Duplicator Pro giúp bạn có...
  • Xin chào, tôi là bot trò chuyện AI của Công Việt. Hỏi tôi bất cứ điều gì!

Bình tĩnh, tôi đang viết ...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x