Ajax SEO และ jQuery

ช่วงนี้กระแส 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 อีกดวย ^^

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Comments »

 
  • gootum says:

    โอ๊วเยี่ยมๆมากๆเลย แจ๋วที่สุดเท่าที่เคยอ่านมา 555(พึ่งได้อ่านที่แรกอ่ะนะ)

  • bigchern says:

    เดี๋ยวจะไปปรับเว็บที่ทำให้เป็นแบบนี้บ้าง

  • noom says:

    มีคำถามคับ เกี่ยวกะ jquery + thickbox

    มีวิธีที่รับค่าหลังเวลาเปิด popup ขึ้นมาแล้วกลับมายัง window หลักไหมครับ

    ถ้าใช้ javascript ธรรมดาผมทำได้แต่พอมาเป็น jquery + thickbox แล้วทำไม่เป็นหาตัวอย่างยากมาก ส่วนมากเจอเค้าบอกใช้ greybox ทำ แต่ก็ดูๆแล้วำทำไม่เป็นอยุ่ีดี ไม่ทราบมีวิธีไหมครับรบกวนตอบกลับหน่อยครับ amnart7@gmail.com

  • Tee++; says:

    น่าจะรับค่ากลับมาราวๆ นี้

    javascript:parent.document.getElementById(‘test’).innerHTML=’ooo’;

  • zunkz says:

    พี่ตรี ครับ ช่วย ขึนหัว ข้อ jquery + thickbox ด้วย พอดี ผม ลองทำแล้ว ทำได้

    แต่ page ที่เรียก มา ไม่สามรถ ติด adsens ได้อะคับ หรือ ว่า stat ก้อไม่ได้

    ลองแนะนำทีนะคับ

  • mikeyx says:

    ความรู้ใหม่ ตามเก็บทุกเม็ด หุหุ

  • num says:

    เจ๋งมากครับ

  • ืีnum says:

    ถ้าใช้ ajax ธรรมดา setHeader ได้ครับ
    แต่ถ้าใช้ jQuery มันจะตรวจสอบว่าเป็น ajax หรือเปล่าได้ที่ตัวแปร HTTP_X_REQUESTED_WITH

  • Tee++; says:

    jQuery ก็ set header ได้ครับ ดูในเรื่อง beforesend ของ jQuery นะครับ

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>