Làm SEO tối ưu JQuery thân thiện với Search Engine

Vừa rồi chúng tôi mới SEO tối ưu lại hệ thống cho website của một doanh nghiệp lớn, website này sử dụng JQuery rất nhiều cho nên việc tối ưu hóa JQuery khá quan trọng một khi website của bạn có một lượng truy cập cao. Khi thực hiện tối ưu hóa lại JQuery một cách tốt nhất thì nó sẽ giúp bớt đi rất nhiều truy vấn tới CSDL và làm cho website của bạn có tốc độ cao hơn, thân thiện hơn với các công cụ tìm kiếm (Search Engine). Chúng tôi xin giới thiệu với mọi người 6 điều chú ý khi sử dụng JQuery cho website.

Tối ưu hóa JQuery

1 Streamline your (x)HTML

Một ví dụ gọi lại khi trang đã được nạp:

$(function(){
var contactForm = ’<form action=”formhandler.php” method=”post”>’
+’<label for=”name”>Name</label><input type=”text” name=”name” />’
+’<label for=”phone”>Phone Number</label><input type=”text” name=”phone”/>’
+’</form>’;
$(“body”).append(contactForm);
});

2 Tối ưu hóa cấu trúc, loại bỏ mã không cần thiết

Ví dụ thay vì dùng
<span class=”heading”>Your heading</span>
Có thể dùng các thẻ <H1> đến <H6> thay thế đoạn trên.

3 Tránh các liên kết không cần thiết
Sử dụng thường xuyên JQuery và thẻ <a href=”"> chứa lệnh gọi javascript

Ví dụ thay vì dùng
<a href=”#” onclick=”myfunction(); return false”>My button</a>
<a href=”javascript:myfunction();”>My Button</a>

Có thể dùng HTML
<span id=”myButton”>My Button</span>
Hoặc dùng Javascript
$(“#myButton”).click(function(){ myfunction(); });

4 Hạn chế gọi trang bằng Javascript và AJAX
Ví dụ nếu muốn dùng một tab trên trang nên sử dụng JQuery để phân chia cho các lớp css và eventHandlers tải. Cách này này sẽ tải trang mà không cần javascript.
Robot của Search Engine vẫn chưa thể lấy dữ liệu tốt và sẽ đánh giá chất lượng nội dung nếu sử dụng Javascript để gọi dữ liệu ra.

5 Các đoạn javascript nên tách ra khỏi trang
Để giảm khối lượng Crawl cho robot của SE trên 1 trang thì nên xuất javascript ra và gọi về trang.
<script src=”myScript.js” type=”text/JavaScript” ></script>

6 Tận dụng tính năng ‘context’ của jQuery.
JQuery có thể chỉ tìm các phần tử con của một ‘context’ nào đó mà không cần phải tìm trong toàn bộ tài liệu.
Nếu cần tìm nhiều phần tử con mà có chung một cha thì nên tìm phần tử cha trước làm ‘context’, sau đó dựa vào ‘context’ này tìm các phần tử con.

Ví dụ cách viết:
$(‘.PreviewImg’)…
$(‘.droppable’)…
$(‘.dragItem[rsId=123]‘)…

Có thể thay bằng:
var releaseTable = $(‘#release’);
releaseTable.find(‘.PreviewImg’)…
releaseTable.find(‘.droppable’)…
releaseTable.find(‘[rsId=123]‘)…