Progressive Web Apps (PWA) และ Search Engine Optimization (SEO)

Progressive Web App (PWA) เป็นซอฟต์แวร์ประยุกต์ที่ส่งผ่านเว็บ สร้างขึ้นโดยใช้เทคโนโลยีเว็บมาตรฐาน เช่น HTML, CSS, JavaScript เป็นต้น โดยทั่วไปแล้ว PWA จะใช้เพื่อเพิ่มอัตราการแปลงและการเข้าชมเว็บไซต์ ตั้งแต่ปี 2021 เป็นต้นมา PWA ได้รับการสนับสนุน (ทั้งหมดหรือบางส่วน) โดย Google Chrome, Apple Safari, Firefox สำหรับ Android และ Microsoft Edge

เนื่องจากการพัฒนาที่ค่อนข้างใหม่ การเพิ่มประสิทธิภาพ PWA ยังคงนำไปสู่ผลลัพธ์เชิงบวกในกรณีส่วนใหญ่และมีสถิติที่น่าทึ่ง สถิติของ กปภ. รายงานอย่างต่อเนื่องเกี่ยวกับผลประโยชน์ที่ได้รับจากบริการที่นำ กปภ. มาใช้

โดยทั่วไป ตามรายงาน TOP 30 PWAs “อัตรา Conversion เฉลี่ยสำหรับแอปเว็บแบบโปรเกรสซีฟนั้นสูงกว่าอัตราสำหรับแอปมือถือแบบเนทีฟถึง 36%”

กปภ. เป็นตัวช่วยที่ดีในการทำตลาดออนไลน์ นั่นคือเหตุผลที่พวกเขาเป็นที่นิยมในหมู่ SEO อย่างไรก็ตาม เช่นเดียวกับ React และ SEO การรวม PWA SEO นั้นมีปัญหา ในบทความนี้ เราจะอธิบายว่า PWA ทำงานร่วมกับ SEO ได้อย่างไร

ตัวอย่างและประโยชน์หลักของ กปภ

บริการเว็บใด ๆ ก็สามารถเป็น PWA มีข้อกำหนดหลักสามประการสำหรับสิ่งนั้น:

1. ทำงานภายใต้ HTTPS
2. รวม Web App Manifest
3. ใช้พนักงานบริการ

จุดประสงค์หลักของ PWA คือมอบฟังก์ชันการทำงานที่เหนือกว่าสำหรับผู้ใช้ทุกคน นี่คือรายการข้อดีหลักที่นำเสนอโดย PWAs:

1. กปภ. นำโอกาสและการเติบโตใหม่ๆ มาสู่ทุกธุรกิจอย่างแท้จริง เป็นการรวมคุณสมบัติที่ดีที่สุดของแอพและเว็บ ตอบสนองและสามารถทำงานได้บนอุปกรณ์ทุกชนิด และไม่จำเป็นต้องใช้เครือข่ายที่รวดเร็ว
2. การรักษาความปลอดภัยชั้นการขนส่งทำให้ปลอดภัย
3. พนักงานบริการ (สคริปต์พิเศษที่เบราว์เซอร์ของคุณทำงานในพื้นหลัง) อนุญาตให้ PWA ทำงานในโหมดออฟไลน์

มาดูตัวอย่างที่ดีที่สุดของการนำ PWA ไปใช้:

แนะนำสำหรับคุณ: Frameworks ยอดนิยมสำหรับการสร้าง Progressive Web Apps (PWAs)

1. สตาร์บัคส์

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

2. พินเทอเรสต์

หลังจากพบว่ามีผู้ใช้ Pinterest บนมือถือเพียง 1% เท่านั้นที่ดาวน์โหลดแอปและลงชื่อเข้าใช้เนื่องจากประสิทธิภาพต่ำ แอปมือถือจึงถูกสร้างขึ้นใหม่โดยใช้เทคโนโลยี PWA ด้วยเหตุนี้ ตัวชี้วัดต่างๆ เช่น เวลาที่ใช้ไป รายได้จากโฆษณา และการมีส่วนร่วมหลักได้เพิ่มขึ้นถึง 40% – 60%

3. อูเบอร์

เว็บแอป Uber ถูกสร้างขึ้นใหม่เป็น PWA โดยมีวัตถุประสงค์เพื่อให้บริการที่รวดเร็วบนเครือข่ายความเร็วต่ำและบนสมาร์ทโฟนเครื่องเก่าที่ไม่รองรับแอป Uber ดั้งเดิม ด้วยเหตุนี้ แอปหลักที่มีน้ำหนักเบามากจึงโหลดได้ในเวลาประมาณ 3 วินาทีบนเครือข่าย 2G

ความสำคัญของ SEO

SEO คือทั้งหมดที่เกี่ยวกับการเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับเครื่องมือค้นหา (SEs) จุดประสงค์หลักคือการปรับปรุงอันดับของเว็บไซต์ในผลการค้นหาและดึงดูดผู้เยี่ยมชม มันขึ้นอยู่กับอัลกอริทึมของ SE และใช้คำหลักเพื่อช่วยให้เครื่องมือค้นหาแสดงเนื้อหาที่เกี่ยวข้องและดึงดูดผู้ชมเป้าหมายมาที่เว็บไซต์ นี่คือวิธีที่ SEO สามารถนำการเข้าชมแบบออร์แกนิกมาสู่เว็บไซต์ของคุณซึ่งเป็นวิธีที่ดีที่สุด ซึ่งแตกต่างจากการเข้าชมโดยตรงและแบบชำระเงินตรงที่สามารถเปลี่ยนผู้เข้าชมส่วนใหญ่ให้กลายเป็นลูกค้าและลูกค้าของคุณได้

SEO สำหรับ Progressive Web Apps: ปัญหาคืออะไร?

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

1. ความกลัวที่จะเปลี่ยนแปลงระบบเดิมที่ใช้ได้ดีอยู่แล้ว
2. ไม่เข้าใจวิธีที่ PWA ทำงานร่วมกับ SEO

ตามที่ John Mueller (นักวิเคราะห์ของ Google) กล่าวไว้ว่า “ปัจจุบัน PWA ไม่มีประโยชน์ใดๆ ใน Google Search”

PWA จำนวนมากสร้างขึ้นโดยใช้เฟรมเวิร์ก JS ที่ไม่เป็นที่รู้จักเนื่องจากมีลักษณะที่เป็นมิตรกับ SEO

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

การแสดงผลฝั่งเซิร์ฟเวอร์และการแสดงผลฝั่งไคลเอนต์

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

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

อย่างไรก็ตาม ทำไมเจ้าของเว็บไซต์จำนวนมากยังคงปฏิเสธที่จะใช้ CSR? ปัญหาคือบอทของ Google สามารถอ่านเนื้อหาของเว็บไซต์ในรหัสที่ปรากฏอย่างสมบูรณ์ในเอกสาร HTML ในกรณีของ CSR อาศัยความสามารถของเครื่องมือค้นหาอย่างเต็มที่ในการประมวลผล JavaScript นั่นคือเหตุผลที่มีความเห็นว่าแอป CSR ไม่สามารถจัดทำดัชนีได้ อย่างไรก็ตาม ในความเป็นจริงแล้ว ในบรรดาเครื่องมือค้นหาทั้งหมด Google นั้นดีที่สุดในการประมวลผล JavaScript

อย่างไรก็ตาม นี่ไม่ได้หมายความว่าปัญหาเกี่ยวกับ JavaScript และ SEO จะได้รับการแก้ไข: Google ยอมรับว่าการประมวลผลของ JS นั้นไม่สมบูรณ์แบบ กล่าวคือ กระบวนการรวบรวมข้อมูลหน้าที่ใช้ JavaScript จะใช้เวลามากกว่าหน้า HTML ในความเป็นจริง หมายความว่าคุณจะต้องรอนานขึ้นเพื่อให้เนื้อหา JavaScript ปรากฏในหน้าผลลัพธ์ของเครื่องมือค้นหา

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

จะใช้ PWA โดยไม่สูญเสียการเพิ่มประสิทธิภาพกลไกค้นหาได้อย่างไร

คุณอาจชอบ: Magento PWA Studio: เครื่องมือ Progressive Web App สำหรับ Magento!

1. ใช้การแสดงผลแบบไดนามิก

การแสดงผลแบบไดนามิกแสดงเวอร์ชันต่างๆ ของเนื้อหาไปยังแหล่งที่มาต่างๆ ผู้เยี่ยมชมได้รับเวอร์ชัน CSR และโปรแกรมรวบรวมข้อมูลได้รับเวอร์ชันที่แสดงผลฝั่งเซิร์ฟเวอร์ สิ่งนี้ช่วยให้ปรับปรุงการจัดทำดัชนีของหน้าที่ใช้ JavaScript โดย Google bot ด้วยวิธีนี้ คุณจะมอบประสบการณ์การใช้งานที่สะดวกที่สุดให้กับลูกค้าของคุณ โดยไม่ต้องเสี่ยงกับ SEO ของเว็บไซต์

2. รวม SSR และ CSR

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

3. สร้าง PWA ของคุณโดยใช้เฟรมเวิร์ก JavaScript ที่เป็นมิตรกับ SEO

คำแนะนำที่ดีของเราคือ GatsbyJS การสร้างเว็บไซต์ PWA โดยใช้เฟรมเวิร์กนี้ทำได้ค่อนข้างง่าย (รวมถึงเปลี่ยนเว็บไซต์ Gatsby ที่มีอยู่ให้เป็น PWA) แสดงผลเว็บไซต์ของคุณล่วงหน้าในขั้นตอนการสร้างเพื่อประสิทธิภาพที่ยอดเยี่ยมและปราศจากความล่าช้า แม้ว่าการเชื่อมต่ออินเทอร์เน็ตจะช้าก็ตาม ด้วยเหตุนี้ ผู้เยี่ยมชมของคุณจะได้รับประสบการณ์การท่องเว็บแบบแอป

4. หันไปใช้โซลูชั่น PWA ที่พร้อมใช้งาน

ปัจจุบัน กปภ. มีราคาที่จับต้องได้มากกว่าที่เคย ดังนั้น หากคุณไม่ต้องการเสียเวลาและทรัพยากรมากมายไปกับการพัฒนา PWA คุณสามารถใช้โซลูชัน PWA ที่พร้อมใช้งานซึ่งผลิตขึ้นตามหลัก SEO และผ่านการทดสอบอย่างถี่ถ้วน คุณจึงมั่นใจในคุณภาพได้ ของรหัส

5. สตูดิโอ กปภ

PWA studio เปิดตัวในปี 2019 เป็นมาตรฐานเทคโนโลยีเว็บที่ออกแบบมาเพื่อมอบประสบการณ์การใช้งานแบบแอพ อันที่จริง มันไม่ใช่โซลูชันที่พร้อมใช้งานทั้งหมด แต่เป็นการรวบรวมเครื่องมือและคุณสมบัติสำหรับการพัฒนา PWA โซลูชันนี้ค่อนข้างซับซ้อนและน่าประทับใจ แต่ต้องมีการปรับเปลี่ยนเพิ่มเติม

6. ScandiPWA

ScandiPWA เป็นโซลูชันโอเพ่นซอร์สที่ใช้ React และ Redux ได้รับการออกแบบโดยมีวัตถุประสงค์เพื่อปรับปรุงเว็บไซต์ด้วยความเร็วและความสามารถในการทำงานแบบออฟไลน์ นอกจากนี้ยังมีการอัปเดตอย่างต่อเนื่อง ดังนั้นคุณจะได้รับฟังก์ชันใหม่ๆ อยู่เสมอ

7. หน้าร้านวิว

นี่เป็นหนึ่งในโซลูชัน PWA แรกที่มีอยู่ในตลาด จริงๆ แล้ว Vue Storefront เป็นโซลูชันแบบรวมทุกอย่างในหนึ่งเดียว แต่ต้องใช้ทรัพยากรในการบำรุงรักษาเพิ่มเติม

วิธีหลีกเลี่ยงข้อผิดพลาดที่เกี่ยวข้องกับ SEO ระหว่างการนำ PWA ไปใช้

ในการพัฒนา PWA ที่ออกแบบมาอย่างดีซึ่งจะช่วยให้คุณชนะ SEO ด้วยการมอบประสบการณ์ผู้ใช้ที่ดีขึ้น คุณควร:

1. ทำการตรวจสอบ SEO สิ่งนี้จะช่วยระบุและแก้ไขปัญหาที่เกี่ยวข้องกับ SEO ทั้งหมด
2. ปรึกษาผู้เชี่ยวชาญด้าน SEO เมื่อคุณสร้าง PWA โดยใช้ React (ตัวอย่าง) ผู้เชี่ยวชาญด้าน SEO ของคุณควรรู้วิธีรวม React และ SEO เข้าด้วยกัน ด้วยวิธีนี้ คุณจะหลีกเลี่ยงปัญหาที่เป็นไปได้ส่วนใหญ่ที่อาจเกิดขึ้นหลังการติดตั้ง
3. ยึดหลัก SEO พื้นฐานเมื่อพัฒนา PWA ในบทความที่เกี่ยวข้องกับ Progressive Web Apps SEO ซึ่งเผยแพร่โดย Google บริษัทได้ให้คำแนะนำเกี่ยวกับวิธีสร้าง PWA ที่จัดทำดัชนีได้ บางส่วนของพวกเขาเป็นเช่นนี้:
   • แต่ละหน้าควรใช้งานได้ผ่าน URL เฉพาะ ด้วยเหตุนี้ แต่ละหน้าจะถูกรวบรวมข้อมูลโดยอิสระ
   • เว็บไซต์ควรมีการออกแบบที่ตอบสนองและปรับให้เหมาะกับอุปกรณ์พกพา
   • ใช้การปรับปรุงแบบก้าวหน้า ด้วยกลยุทธ์ดังกล่าว PWA จึงทำงานได้ดีแม้ในเบราว์เซอร์รุ่นเก่า
   • ตรวจสอบวิธีที่ Google แสดงหน้าเว็บของคุณโดยใช้ Google Search Console เป็นประจำ ดังนั้น คุณจะทราบได้เสมอว่าถึงเวลาที่จะต้องอัปเกรดหรือเปลี่ยนแปลงบางสิ่ง
   • จับตาดูเวลาในการโหลดหน้าเว็บ Google วัดความเร็วในการโหลดของทุกหน้า และถ้าความเร็วในการโหลดหน้าของคุณช้าลง Google จะลดอันดับลง

คุณอาจชอบ: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks

บรรทัดล่าง

การเพิ่มประสิทธิภาพ PWA มอบโอกาสมากมายสำหรับการตลาดออนไลน์และนำการเติบโตมาสู่ธุรกิจส่วนใหญ่ อันที่จริง หลักปฏิบัติ SEO ที่ดีที่สุดที่ PWA ใช้โดยทั่วไปคือส่วนต่อประสานที่ใช้งานง่าย: ตอบสนอง มีโครงสร้าง และแสดงผลได้รวดเร็ว อย่างไรก็ตาม PWA ยังไม่ให้ประโยชน์โดยตรงกับ SEO และปัญหาที่เกี่ยวข้องกับ SEO คือสิ่งที่ขัดขวางผู้ค้าหลายรายไม่ให้นำ PWA ไปใช้กับเว็บไซต์ของตน ด้วยเหตุนี้จึงเป็นเรื่องสำคัญที่ต้องระมัดระวังและใช้เทคนิคต่างๆ เช่น การแสดงผลแบบไดนามิก การผสมผสานระหว่าง SSR และ CSR หรือโซลูชัน PWA ที่พร้อมใช้งาน คุณควรให้ผู้เชี่ยวชาญ SEO มีส่วนร่วมในกระบวนการตั้งแต่เริ่มต้น

อย่างที่คุณเห็น คุณสามารถใช้ทั้ง SEO และ PWA ได้โดยการรวมเข้าด้วยกัน นอกจากนี้ ควรสังเกตว่า PWA เป็นซอฟต์แวร์ประเภทใหม่และเป็นนวัตกรรม ดังนั้นจึงต้องมีการปรับปรุง

 บทความนี้เขียนโดย Ivan Jones Ivan เป็นผู้เชี่ยวชาญด้าน SEO ที่ Clockwise.Software ที่มีประสบการณ์มากกว่า 5 ปีในอุตสาหกรรมนี้ เขารู้ถึงความแตกต่างที่ช่วยให้เขารักษาเว็บไซต์ให้อยู่ในอันดับต้น ๆ ของผลการค้นหาของ Google มานานหลายปี ด้วยความกระตือรือร้นในการเรียนรู้ เขากระตือรือร้นที่จะทดสอบแนวทางใหม่ๆ ที่จะเป็นประโยชน์ต่อผลลัพธ์ของ SEO