31 C
Hanoi
Thứ hai, Tháng mười 7, 2024
spot_img

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

Hướng dẫn làm đẹp FAQ của RankMath SEO Frequently Asked Questions-wordpress-congvietit.com

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-wordpress-congvietit.com

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-wordpress-congvietit.com

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!

5 1 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.

2 BÌNH LUẬN

Theo dõi
Thông báo về
guest
2 Bình luận
cũ nhất
mới nhất lượt bình chọn
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

Cách Tăng Kích Thước Upload Size trên WordPress: Hướng Dẫn Chi Tiết

WordPress mặc định có giới hạn kích thước upload khá thấp, điều này có thể gây ra nhiều...

Hướng Dẫn Cài Đặt và Quản Lý Website WordPress Trên Hosting Của Hostinger

Trong thời đại số hiện nay, việc sở hữu một trang web cá nhân hay doanh nghiệp là...

4 Cách xóa các mã Shortcode không sử dụng khỏi WordPress

Shortcode — công cụ tiết kiệm thời gian tuyệt vời cho nhiều quản trị viên WordPress đang tìm...

Bài 01 – Giới thiệu về WordPress

WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP và sử dụng...
2
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x