jQueryTips by Tee++;

ช่วงนี้กระแส SEO กำลังแรง เลยขอมาพูดซะหน่อย ^^

ตอนนี้เทรนด์ที่มาแรงในการพัฒนาเวบไซด์คงหนีไม่พ้น Ajax ซึ่งหลายๆคนคงทราบอยู่แล้วว่ามันมีการทำงานยังไง ถ้ายังไม่รู้ก็ลองไปอ่านได้ที่ Blog เพื่อนผมเอง What’s ajax แต่ปัญหาที่สำคัญของ Ajax ก็คือเรื่อง SEO นี่แหละ เพราะจากที่ผมทราบ Googlebot ไม่สามารถที่จะอ่าน Javascript หรือ Events ต่างๆ เช่น onclick, onkeypress, on… ต่างๆ ได้ ทำให้เป็นผลเสียกับ SEO เป็นอยากมาก เพราะ Botengine ไม่สามารถที่จะ เก็บข้อมูลเพื่อไปสร้าง Index ให้ได้

ลองดูข้อมูลที่ Bot เห็นได้ที่นี่ คลิก

แต่ปัญหานี้เราสามารถแก้ไขได้ครับ โดยการไม่ใช้ Events ตรงๆ เช่น onclick=”ajaxsomething();” แต่เปลี่ยนมาเป็นการไต่เอกสารในรูปแบบ DOM แทน ซึ่งลองดูตัวอย่างได้ ที่เวบเพื่อนผมอีกคน Bot vs SEO

ซึ่งตจรงนี้เราสามารถใช้ jQuery ได้ง่ายๆเช่น เราจะเรียก content เพื่อมาวางใน div ชุดนึง

ซึ่งจากโคดด้านบนผมต้องการที่จะให้เรียก url ที่อยู่ตาม link เพื่อมาแสดงใน div ผมก็จะเขียนแค่

$(document).ready(function() {
$("[@rel='aj']“).click(function() {
var URL = $(this).attr(’href’);
$.get(URL, function(data) {
$(”#fadeContent”).html(data);
});
return false;
});
});

เท่านี้ผมก็สามารถให้ Ajax ทำงานเหมือนเดิมโดยที่ Bot ก็ยังวิ่งไปที่ Anchor ได้เหมือนเดิม และยัง เก็บ index ได้ตามปกติ แต่ว่า…

วิธีนี้ก็ยังมีผลเสียอีกนิดนึงที่เราอาจจะมองข้ามไป นั่นคือสิ่งที่ Google จะเก็บ ตามตัวอย่างนี้คือ somecontent.html ซึ่งแน่นอนมันจะมีแค่ content ซึ่งเราจะดึงมาโชว์ในหน้าที่จัด layout แล้ว ดังนั้นเวลา Google index ไปแล้ว user คลิกเข้ามาจาก search จะเจอแต่ตัว content ที่ไม่มี layout แน่นอนว่ามันไม่ใช่ผลดีเลย -*-

ดังนั้นเราอาจจะแก้ไขได้โดย เติม parameter 1 ตัวส่งไปเช่น

var URL = $(this).attr('href') + '?type=ajax';

แล้วในหน้า somecontent.html ก็เปลี่ยนมาเป็น server side script เช่น php asp jsp แล้วไปดักข้อมูลคือ

(ในที่นี่ผมจะลองโดยใช้ php)

if ($_GET['type'] == ‘ajax’)
{
//ค่าที่จะส่งให้ javascript นำไปประมวลผลต่อ อาจจะออกมาในรูปแบบ html, text, json, xml อะไรก็ตามแต่สะดวก
echo “content”;
}
else
{
//render ตามปกติ เป็นเวบไซด์ซึ่งมี content กับ layout
echo “header”;
echo “content”;
echo “footer”;
}

เท่านี้ปัญหาก็จะหมดไป รวมถึงไม่ต้องกังวลว่า web เราจะไม่สามารถใช้ได้ถ้า user ไม่มี javascript อีกดวย ^^

Tee++; Ajax, jQuery Ajax, SEO