SEO สำหรับ JavaScript: การทดสอบเพื่อทดสอบเครื่องมือค้นหา

บทความนี้ตรวจสอบทรัพยากร SEO ที่ดีที่สุดสำหรับ JavaScript และการทดสอบเพื่อทำความเข้าใจว่าเครื่องมือค้นหา (Google, Bing และ Yandex) ทำงานอย่างไรเมื่อต้องรวบรวมข้อมูลและจัดทำดัชนีหน้าเว็บที่แสดงผ่าน JS นอกจากนี้เรายังจะพิจารณาข้อควรพิจารณาบางประการสำหรับผู้เชี่ยวชาญ SEO และนักพัฒนาอีกด้วย

JavaScript เป็นผู้เล่นหลักในเว็บปัจจุบัน และอย่างที่ John Mueller กล่าวว่า “ มันจะไม่หายไปง่ายๆ ”

หัวข้อ JavaScript มักถูกวิจารณ์โดยชุมชน SEO แต่ฉันเชื่อว่าเป็นเพราะ ขาดทักษะทางเทคนิคในการพัฒนา JavaScript และ การแสดงผลหน้าเว็บ แต่สิ่งนี้ก็ขึ้นอยู่กับความยากลำบากในการสื่อสารระหว่างผู้เชี่ยวชาญ SEO และทีมพัฒนาด้วย

โพสต์นี้แบ่งออกเป็นสองส่วน: ส่วนแรก (สั้น) มีแหล่งข้อมูลบางส่วนเพื่อดูหัวข้อโดยละเอียด ในส่วนที่สอง (เชิงลึกมากขึ้น) เราจะพิจารณาการทดลองง่ายๆ ที่ทดสอบเครื่องมือค้นหาบนหน้าเว็บที่แสดงโดยใช้ JavaScript

แหล่งข้อมูลบางอย่างที่แนะนำ SEO สำหรับ JavaScript

ในวิดีโอต่อไปนี้ Martin Splitt ซึ่งอ้างอิงถึง Google จะแนะนำหัวข้อ โดยอธิบายถึงความสำคัญของการคิดจากมุมมองของ SEO เมื่อพัฒนาโครงการใน JavaScript โดยเฉพาะอย่างยิ่ง เขาหมายถึง หน้าเว็บที่แสดงเนื้อหาที่สำคัญใน JS และ แอปแบบหน้า เดียว

“หากคุณต้องการให้มีการจัดทำดัชนีเนื้อหาโดยเร็วที่สุด ตรวจสอบให้แน่ใจว่าเนื้อหาที่สำคัญที่สุดอยู่ในแหล่งที่มาของหน้า (ฝั่งเซิร์ฟเวอร์ที่แสดงผล)”

อะไรคือเหตุผล? เนื่องจากเราต้องจำไว้เสมอว่ารูปแบบต่อไปนี้คือ สองคลื่นของการจัดทำดัชนี

โฟลว์ของการรวบรวมข้อมูล การทำดัชนี การแสดงผล และการพิจารณาใหม่ และสองคลื่นของการประมวลผล

เนื้อหาที่สร้างโดย JavaScript ถือเป็นคลื่นลูกที่สองของการจัดทำดัชนี เนื่องจากต้องรอระยะ การแสดงผล

อย่างไรก็ตาม ในวิดีโอต่อไปนี้ จะมีการอธิบายเคล็ดลับ SEO พื้นฐานเกี่ยวกับโปรเจ็กต์ที่พัฒนาใน JavaScript

“เรากำลังก้าวไปสู่ประสบการณ์ผู้ใช้ที่ไม่ธรรมดา แต่เรายังมุ่งสู่ความต้องการทักษะด้านเทคนิคที่เพิ่มมากขึ้น”

การทดสอบอย่างง่ายเพื่อชี้แจงวิธีที่เครื่องมือค้นหาปฏิบัติต่อ JavaScript

ฉันจะอธิบายการทดสอบที่ฉันทำเพียงเพื่อย้อนขั้นตอนที่อธิบายไว้ในเอกสารประกอบของ Google ( การรวบรวมข้อมูล การทำดัชนี การแสดงผล การพิจารณาใหม่ ) อย่างไรก็ตาม การทดสอบที่ขยายออกไปนอกเหนือจากเครื่องมือค้นหาของ Mountain View

หมายเหตุ: เป็นการทดสอบที่ค่อนข้าง "สุดขั้ว" ในแง่ของโซลูชันทางเทคนิคที่ใช้ และสร้างขึ้นโดยใช้ฟังก์ชัน JavaScript อย่างง่าย โดยไม่ต้องใช้เฟรมเวิร์กเฉพาะ จุดมุ่งหมายคือเพื่อทำความเข้าใจพลวัตของเครื่องมือค้นหาเท่านั้น ไม่ใช่การออกกำลังกายอย่างมีสไตล์

1) หน้าเว็บ

ขั้นแรก ฉันสร้างหน้าเว็บที่มีคุณสมบัติดังต่อไปนี้:

• หน้า HTML ที่มี TAG โครงสร้างหลัก โดยไม่มีข้อความ ยกเว้นเนื้อหาของแท็ก <title> คำบรรยายในแท็ก <h4> และสตริงในส่วนท้าย
• เนื้อหาที่มีอยู่ใน HTML ต้นทางมีวัตถุประสงค์เฉพาะ: เพื่อให้ข้อมูลเครื่องมือค้นหาทันทีในการประมวลผลครั้งแรก
• ฟังก์ชัน JavaScript เมื่อ DOM ( Document Object Model ) เสร็จสมบูรณ์ จะดูแลการแสดงเนื้อหาทั้งหมด ( โพสต์ที่สมบูรณ์ที่สร้างโดยใช้ GPT-3 )

 $(เอกสาร).พร้อม(ฟังก์ชั่น(){
  ความชุ่มชื้น ();
});

• เนื้อหาที่แสดงโดยฟังก์ชันไม่ปรากฏบนหน้าในสตริง JavaScript หรือ JSON แต่ได้มาจากการโทรระยะไกล (AJAX)
• ข้อมูลที่มีโครงสร้างยัง " ฉีด " ผ่าน JavaScript เพื่อรับสตริง JSON ผ่านการโทรระยะไกล
• ฉันตั้งใจให้แน่ใจว่าฟังก์ชัน JavaScript จะแทนที่เนื้อหาของแท็ก <title> สร้างเนื้อหาของแท็ก <h1> และสร้างคำอธิบาย เหตุผลมีดังต่อไปนี้: หากข้อมูลที่แสดงผลโดย JS ได้รับการพิจารณา ข้อมูลโค้ดของผลลัพธ์ใน SERP จะเปลี่ยนไปโดยสิ้นเชิง
• หนึ่งในสองรูปภาพที่แสดงผ่าน JS ได้รับการระบุไว้ในส่วนหัวของหน้าในแท็ก <link> ( rel = “preload” ) เพื่อทำความเข้าใจว่าการดำเนินการนี้จะทำให้การจัดทำดัชนีของทรัพยากรเร็วขึ้นหรือไม่

2) การส่งหน้าไปยังเครื่องมือค้นหาและการทดสอบ

หลังจากที่ฉันเผยแพร่หน้านี้ ฉันได้รายงานไปยังเครื่องมือค้นหา และโดยเฉพาะอย่างยิ่งกับ Google (ผ่าน " การ ตรวจสอบ URL " ของ Search Console) ไปยัง Bing (ผ่าน " ส่ง URL " ของ Webmaster Tool) และไปยัง Yandex (ผ่าน " จัดทำดัชนีหน้าใหม่ ” ของเครื่องมือของผู้ดูแลเว็บ)

ในขั้นตอนนี้ ฉันทำการทดสอบบางอย่าง

• เครื่องมือ "Fetch & Render" ของ Merkle ที่ฉันมักใช้ในการทดสอบการแสดงผล สร้างหน้าเว็บอย่างถูกต้อง เครื่องมือจำลอง Googlebot โดยใช้ Chromium 79 headless
  หมายเหตุ: ในบรรดาเครื่องมือของ Merkle ยังมี Pre-rendering Tester ซึ่งช่วยให้คุณตรวจสอบการตอบกลับ HTML ตาม user-agent ที่ส่งคำขอ

Merkle Fetch & Render: เครื่องมือทดสอบการแสดงผล

• การทดสอบผลการค้นหา ที่เป็นสื่อสมบูรณ์ของ Google สร้าง DOM และภาพหน้าจอของหน้าสำเร็จ เครื่องมือยังตรวจพบข้อมูลที่มีโครงสร้างอย่างถูกต้อง โดยระบุเอนทิตีของประเภท " บทความ "

DOM ที่สร้างโดยการทดสอบผลการค้นหาที่เป็นสื่อสมบูรณ์ของ Google

• เริ่มแรกเครื่องมือตรวจสอบ URL ของ Search Console แสดงการแสดงผลที่ไม่สมบูรณ์ในบางครั้ง แต่ฉันคิดว่าเหตุผลคือเวลาทำงาน

3) การจัดทำดัชนี

ในขั้นตอนนี้ เครื่องมือค้นหาทั้งหมดมีพฤติกรรมเหมือนกัน: หลังจากไม่กี่ชั่วโมง ผลลัพธ์ก็ปรากฏใน SERP ทั้งหมด

ตัวอย่างที่สร้างขึ้นในระยะแรกบน Bing, Yandex และ Google

ตัวอย่างดังที่เห็นในภาพประกอบด้วยเนื้อหาของแท็ก <title> และคำอธิบายที่ได้รับจากข้อมูลที่มีอยู่ในเนื้อหาหลัก

ไม่มีการจัดทำดัชนีภาพในหน้า

4) การแก้ไข, แผนผังเว็บไซต์, Google indexing API

วันรุ่งขึ้นตัวอย่างก็เหมือนกัน ฉันได้ดำเนินการบางอย่างเพื่อส่งสัญญาณไปยังเครื่องมือค้นหาแล้ว

• ฉันเปลี่ยน HTML ของหน้า เพิ่ม favicon ชื่อผู้เขียนโพสต์ และวันที่เผยแพร่ เป้าหมายคือการค้นหาว่าเสิร์ชเอ็นจิ้นจะอัปเดตข้อมูลโค้ดก่อนที่จะวิเคราะห์เนื้อหาที่แสดงผลหรือไม่
• ในเวลาเดียวกัน ฉันอัปเดต JSON ของข้อมูลที่มีโครงสร้างโดยอัปเดตวันที่แก้ไข (“dateModified”)
• ฉันส่งแผนผังเว็บไซต์ที่มี URL ของหน้าเว็บไปยังเครื่องมือของผู้ดูแลเว็บของเครื่องมือค้นหาต่างๆ
• ฉันรายงานไปยังเครื่องมือค้นหาว่าหน้านั้นได้รับการแก้ไข และโดยเฉพาะอย่างยิ่ง สำหรับ Google ผ่าน API การจัดทำดัชนี

[กรณีศึกษา] ป้องกันไม่ให้การออกแบบใหม่ของคุณถูกลงโทษ SEO . ของคุณ

หนึ่งปีหลังจากการออกแบบเว็บไซต์ใหม่ EasyCash ก็ตระหนักว่าประสิทธิภาพที่พวกเขาคาดหวังไม่ได้อยู่ที่นั่น พวกเขาระบุและแก้ไขอุปสรรค SEO หลายประการ

อ่านกรณีศึกษา

ผลลัพธ์

เกิดอะไรขึ้นหลังจากไม่กี่วัน?

Google แสดงผลและทำงานใหม่ข้อมูลโค้ด

1) Google แสดงผลเนื้อหาด้วยการประมวลผล JavaScript จากนั้นจึงปรับปรุงผลลัพธ์ใน SERP โดยใช้เนื้อหาอย่างถูกต้อง

Google ได้จัดทำดัชนีเนื้อหาที่แสดงผลโดยใช้ JavaScript

2) ภาพแรกของโพสต์ได้รับการจัดทำดัชนีและปรากฏบน Google Images ด้วย

รูปภาพของโพสต์ที่แสดงผลผ่าน JavaScript ปรากฏบน Google Images

3) ข้อมูลโค้ดบน Bing และ Yandex ไม่ได้เปลี่ยนแปลง ซึ่งหมายความว่าในวันหลังการตีพิมพ์ พวกเขาไม่ได้พิจารณา DOM สุดท้าย

4) รูปภาพที่แสดงในลิงก์สำหรับพรีโหลดไม่ได้รับการรักษาที่ดีเมื่อเทียบกับรูปภาพอื่น

การแสดงผลหน้า JavaScript (β) โดย Yandex

ในเครื่องมือเว็บมาสเตอร์ Yandex มีคุณลักษณะ "เบต้า" ที่ช่วยให้คุณสามารถระบุพฤติกรรมของหุ่นยนต์เมื่อรวบรวมข้อมูลหน้าเว็บ

แผงการกำหนดค่าการแสดงผลยานเดกซ์

คุณสามารถแนะนำให้เรียกใช้ JavaScript เพื่อทำการเรนเดอร์ให้เสร็จหรือไม่รันก็ได้ ตัวเลือกเริ่มต้นทำให้อัลกอริธึมมี "อิสระ" ในการเลือกการกระทำที่ดีที่สุด

ในกรณีเฉพาะที่เนื้อหาเกือบทั้งหมดถูกสร้างขึ้นในฝั่งไคลเอ็นต์ แต่โดยทั่วไป เช่น สำหรับเฟรมเวิร์ก JavaScript ขอแนะนำให้บังคับการแสดงผล

การแสดงผลแบบไดนามิก

ในขั้นตอนสุดท้ายของการทดสอบ ฉันใช้โซลูชันการแสดงผลแบบไดนามิกสำหรับ Bing และ Yandex โซลูชันนี้ช่วยให้แยกความแตกต่างของการตอบสนองที่ส่งไปยังไคลเอ็นต์เพื่อให้:

• เบราว์เซอร์ของผู้ใช้ได้รับการตอบกลับที่มี HTML และ JavaScript ที่จำเป็นในการแสดงผลให้เสร็จสมบูรณ์
• โปรแกรมรวบรวมข้อมูลได้รับหน้าเวอร์ชันคงที่ซึ่งมีเนื้อหาที่สำคัญทั้งหมดในแหล่งที่มา

การเรนเดอร์แบบไดนามิกทำงานอย่างไร

หลังจากใช้งานเสร็จแล้ว ฉันขอสร้างดัชนีอีกครั้งผ่านเครื่องมือ Bing และ Yandex

ยานเดกซ์สร้างตัวอย่างใหม่ใน SERP ในเวลาไม่กี่ชั่วโมงดังนี้ ดังนั้นยานเดกซ์จึงพิจารณาเวอร์ชันใหม่ที่แสดงฝั่งเซิร์ฟเวอร์

ตัวอย่าง Yandex หลังจากการเรนเดอร์แบบไดนามิก

Bing ไม่ได้เปลี่ยนผลลัพธ์ในเวลาที่มีสำหรับการทดสอบ แต่แน่นอน ( อืม .. อย่างน้อยฉันหวังว่า ) จะรวมเข้ากับในวันต่อ ๆ ไป

บทสรุป

การทดสอบง่ายๆ นี้แสดงให้เห็นว่า Google ทำงานตามที่ระบุไว้ในเอกสาร โดยคำนึงถึงสองขั้นตอนของโครงการที่เห็นในส่วนเริ่มต้นของโพสต์ อันที่จริงในระยะแรกนั้น จะทำดัชนีเนื้อหาที่มีอยู่ในแหล่งที่มาของหน้าเกือบจะในทันที (HTML ที่สร้างขึ้นบนฝั่งเซิร์ฟเวอร์) ในวินาที ในอีกสองสามวัน มันสร้างดัชนีส่วนที่แสดงผลผ่าน JavaScript

ในทางกลับกัน Bing และ Yandex ดูเหมือนจะไม่ตรวจจับเนื้อหาที่สร้างผ่าน JavaScript .. อย่างน้อยก็ในวันถัดจากการเผยแพร่

องค์ประกอบเหล่านี้เน้นถึงแง่มุมที่เกี่ยวข้องกับ JavaScript ซึ่งฉันจะพยายามอธิบายในรายละเอียดเพิ่มเติมด้านล่างเล็กน้อย

• ต้องรักษาการมุ่งเน้นที่ตลาดอ้างอิงสำหรับการสื่อสาร: หากเราจัดการกับผู้ชมที่ใช้เครื่องมือค้นหาอื่นที่ไม่ใช่ Google เราเสี่ยงที่จะไม่ปรากฏตามที่เราต้องการ
• แม้ว่าผู้ใช้จะใช้ Google ก็ตาม เราต้องคำนึงถึงเวลาที่ใช้ในการรับข้อมูลทั้งหมดใน SERP อันที่จริง ระยะการเรนเดอร์นั้นมีราคาแพงมากในแง่ของทรัพยากร: ในกรณีของการทดสอบ ด้วยหน้าเว็บเพียงหน้าเดียวที่ออนไลน์ ข้อมูลโค้ดจะได้รับอย่างถูกต้องภายในสองสามวัน แต่จะเกิดอะไรขึ้นถ้าเราทำงานบนเว็บไซต์ขนาดใหญ่มาก "งบประมาณ" ที่เครื่องมือค้นหาจัดเตรียมไว้ให้เราและประสิทธิภาพของเว็บไซต์กลายเป็นปัจจัยชี้ขาด
• ฉันเชื่อว่า JavaScript ช่วยให้เราสามารถมอบประสบการณ์การใช้งานที่เหนือกว่าแก่ผู้ใช้ แต่ทักษะที่จำเป็นในการบรรลุเป้าหมายนี้มีมากมายและมีราคาแพง ในฐานะผู้เชี่ยวชาญด้าน SEO เราต้องพัฒนาเพื่อเสนอแนวทางแก้ไขที่ดีที่สุด การแสดงผลล่วงหน้าหรือการแสดงผลแบบไดนามิกยังคงเป็นเทคนิคที่มีประโยชน์สำหรับการสร้างเนื้อหาที่สำคัญในโปรเจ็กต์ที่ต้องการให้มองเห็นได้ทั่วโลก
• เฟรมเวิร์ก JavaScript ที่ทันสมัยทั้งหมดซึ่งอิงตามสถาปัตยกรรม JAMstack เช่น Astro, Gatsby, Jekyll, Hugo, NuxtJS และ Next.JS นำเสนอความเป็นไปได้ในการแสดงเนื้อหาบนฝั่งเซิร์ฟเวอร์ เพื่อให้เวอร์ชันคงที่ของ หน้า นอกจากนี้ Next.JS ซึ่งในความคิดของฉันนั้นล้ำหน้าที่สุด อนุญาตให้ใช้โหมดการเรนเดอร์ "ไฮบริด" ที่เรียกว่า "Incremental Static Regeneration" (ISR) ISR อนุญาตให้สร้างเพจสแตติกทีละน้อยด้วยการประมวลผลพื้นหลังอย่างต่อเนื่อง เทคนิคนี้ให้ประสิทธิภาพการนำทางที่สูงมาก

“คำถามคือ .. มันคุ้มค่าที่จะแนะนำ "ความซับซ้อน" เช่นนี้ในโครงการหรือไม่? คำตอบนั้นง่าย: ใช่ ถ้าเราจะสร้างประสบการณ์ผู้ใช้ที่น่าทึ่ง!”

หมายเหตุเพิ่มเติม

• เราต้องใส่ใจกับความแตกต่างระหว่างเหตุการณ์ "เอกสารพร้อม" และ "โหลดหน้าต่าง": เหตุการณ์ก่อนหน้าจะมีผลหลังจากสร้าง DOM ในขณะที่หลังเมื่อ DOM ถูกสร้างขึ้นและมีการโหลดทรัพยากรแล้ว
• เห็นได้ชัดว่า สำหรับการทดสอบเช่นนี้ ไม่ควรวิเคราะห์สำเนาแคชของ Google เพราะเมื่อเปิดหน้าเว็บ JS จะถูกดำเนินการอีกครั้ง โดยไม่ได้ให้การรับรู้ถึงเนื้อหาที่ Google นำมาพิจารณา

JavaScript ที่ดีและ SEO ที่ดี!