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

DỊCH VỤ

Bài viết liên quan

Code hiển thị số lượng sản phẩm đã bán cho website WordPress sử dụng Woocommerce

Với đoạn code hiển thị số lượng sản phẩm đã bán cho website Wordpress sử dụng Woocommerce này,...

Khắc phục lỗi download file Google Drive qua Woocommerce trong WordPress

Nếu bạn muốn làm site bán sản phẩm có thể Download bằng Wordpress, chắc là cũng nghĩ đến...

Hướng dẫn kích hoạt bản quyền Plugin Wp Content Crawler

Plugin Content Crawler là một plugin WordPress có thể thu thập thông tin (quét, lấy, truy xuất) nội...

Hướng dẫn nhúng video từ Google Drive vào Website của bạn

Hướng dẫn nhúng video từ Google Drive vào Website của bạn này khá đơn giản. Nhưng khi bạn...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x