FastOG เทียบกับ Yoast SEO และ Rank Math: ทำไมการเรนเดอร์ภาพโซเชียลแบบออฟโหลดจึงสำคัญต่อความเร็วของ WooCommerce

คำตอบสั้น

Yoast SEO และ Rank Math เป็นปลั๊กอิน SEO ทั้งสองสามารถเผยแพร่ข้อมูลเมตา Open Graph เช่น og:title, og:description และ og:image ได้ แต่ไม่ใช่บริการเรนเดอร์การ์ดสินค้าโดยเฉพาะ FastOG for WooCommerce แก้ปัญหาการเรนเดอร์แยกต่างหาก: สร้างภาพปกสินค้าที่ออกแบบไว้จากข้อมูล WooCommerce แบบสด เรนเดอร์บนโครงสร้างพื้นฐานของ FastOG ให้บริการผ่านแคชและ edge ของ FastOG และส่ง URL og:image ที่ได้ให้ปลั๊กอิน SEO ที่ติดตั้งอยู่บนร้านค้าแล้ว

ความแตกต่างนี้สำคัญต่อประสิทธิภาพของ WooCommerce ร้านค้าไม่ควรต้องรัน headless browser, ตัวประกอบภาพ, ชุดฟอนต์ หรือคิวการสร้างภาพ ภายในทรัพยากร PHP และเว็บเซิร์ฟเวอร์ชุดเดียวกับที่ให้บริการหน้าชำระเงินและหน้าสินค้า FastOG ย้ายงานเหล่านั้นออกจากเส้นทางการร้องขอของร้านค้า

สิ่งที่ Yoast และ Rank Math ทำได้ดี

Yoast SEO และ Rank Math เป็นระบบ metadata และ SEO ที่มีประโยชน์ เอกสารของทั้งสองอธิบายว่าแท็ก Open Graph ระบุว่าหน้าควรปรากฏอย่างไรเมื่อถูกแชร์ ทั้งสองยังคงเข้ากันได้กับการผสานรวม FastOG เพราะ FastOG ไม่จำเป็นต้องแทนที่การกำหนดค่า SEO ส่วนอื่นของร้านค้า

ดังนั้นการเปรียบเทียบที่ยุติธรรมจึงไม่ใช่ "ปลั๊กอิน SEO ตัวไหนดีกว่า?" แต่เป็น:

ใครเป็นเจ้าของภาพโซเชียลของผลิตภัณฑ์ และภาพนั้นถูกเรนเดอร์ที่ใด?

นี่คือสถาปัตยกรรมแบบเสริมกัน ไม่ใช่การบังคับย้ายแบบเลือกอย่างใดอย่างหนึ่ง เก็บ Yoast หรือ Rank Math ไว้สำหรับ SEO ปล่อยให้ FastOG เป็นเจ้าของภาพปกโซเชียลที่สร้างขึ้นเมื่อต้องการการ์ดสินค้าแบบไดนามิก

เหตุใดรูปภาพสินค้าแบบคงจึงไม่เพียงพอ

รูปภาพที่โดดเด่นของ WooCommerce (featured image) เป็นสินทรัพย์ต้นทางที่มีประโยชน์ แต่ไม่ได้กลายเป็น merchandising card ที่เป็นปัจจุบันโดยอัตโนมัติ สินค้าหนึ่งรายการอาจเปลี่ยนราคา สถานะการลดราคา สถานะสต็อก คะแนน หรือข้อความโปรโมชัน ขณะที่ URL ของ featured image ยังคงเดิม

FastOG ทำให้ URL ของภาพปกเป็นฟังก์ชันของค่าต่าง ๆ ที่สร้างภาพปกนั้นขึ้นมา เมื่อข้อมูลสินค้าที่เกี่ยวข้องเปลี่ยนแปลง URL ที่สร้างขึ้นก็เปลี่ยนตามไปด้วย ซึ่งทำให้แคชของรูปภาพมีที่อยู่ใหม่ ขณะที่ permalink หลักของสินค้ายังคงที่

วิธีนี้แก้ปัญหาความสดใหม่ของรูปภาพฝั่งร้านค้า แต่ไม่ได้อ้างว่าโซเชียลเน็ตเวิร์กทุกแห่งจะทิ้งตัวอย่างที่แคชไว้แล้วทันที Facebook เป็นข้อยกเว้นสำคัญ: FastOG จัดคิวการ re-scrape ของ Meta สำหรับหน้าสินค้าเมื่อ WooCommerce รายงานว่ามีการอัปเดตสินค้า ส่วน WhatsApp, LinkedIn และ X ไม่มีช่องทางการทำให้แคชหมดอายุแบบโปรแกรมได้สาธารณะเหมือนกัน ดังนั้น FastOG จึงทำให้การดึงข้อมูลครั้งถัดไปถูกต้อง และระบุขอบเขตข้อจำกัดนี้ไว้อย่างชัดเจน

เหตุใดการ offload จึงสำคัญต่อความเร็วของ WooCommerce

การเรนเดอร์การ์ดที่ออกแบบไว้สามารถเกี่ยวข้องกับการดึงรูปภาพ การโหลดฟอนต์ การจัดวางเลย์เอาต์ การ rasterization และการส่งมอบ PNG งานเหล่านี้แตกต่างจากการสร้าง HTML ที่จำเป็นสำหรับการให้บริการหน้าเพจสินค้า การรันงานเหล่านี้บนโฮสต์ของผู้ค้าอาจแย่งชิงทรัพยากรกับ PHP workers, หน่วยความจำ, CPU และแบนด์วิดท์ของดิสก์หรือ object storage

ด้วย FastOG สำหรับ WooCommerce:

1. ร้านค้าเผยแพร่ URL og:image ที่ลงนามแล้วผ่านขั้นตอน metadata ที่มีอยู่เดิม
2. FastOG เรนเดอร์ภาพปกบนโครงสร้างพื้นฐานการเรนเดอร์ของตัวเอง
3. FastOG แคชและให้บริการรูปภาพที่ได้จาก edge path ของตัวเอง
4. โฮสต์ WooCommerce ไม่ต้องติดตั้ง Puppeteer, Chrome, ส่วนขยาย GD, ฟอนต์ หรือคิวการเรนเดอร์รูปภาพแยกต่างหาก

ผลลัพธ์คือสถาปัตยกรรมที่ออกแบบมาเพื่อแยกงานด้าน social image ออกจากเส้นทางการร้องขอของ checkout และ storefront คำว่า "offloaded" ไม่ได้หมายความว่าทุกคำขอหน้าเพจจะเร็วขึ้นราวกับเวทมนตร์ แต่หมายความว่าร้านค้าไม่ได้แบกรับต้นทุนการเรนเดอร์ด้วยทรัพยากรเซิร์ฟเวอร์ของตัวเอง

สิ่งที่ FastOG เพิ่มสำหรับการ์ดโซเชียลของสินค้า

• ราคาสินค้าแบบเรียลไทม์ ราคาเปรียบเทียบ ป้ายลดราคา ป้ายสถานะสต็อก คะแนนรีวิว ภาพสินค้า และการปรับแต่งแบรนด์
• เทมเพลตพร้อมใช้งานจริง 48 แบบ ครอบคลุมเลย์เอาต์สำหรับอีคอมเมิร์ซ สินค้า ภาพสินค้า แฟชั่น ร้านอาหาร ที่พัก อสังหาริมทรัพย์ และร้านเกม
• URL ของภาพปกแบบ content-addressed ที่เปลี่ยนเมื่อข้อมูลซึ่งใช้เรนเดอร์ภาพปกเปลี่ยน
• คำขอ re-scrape ของ Facebook อัตโนมัติหลัง webhook ของสินค้า WooCommerce โดยเข้าคิวและทำงานแบบ best-effort เพื่อให้การปฏิเสธจาก Meta ไม่ทำให้การบันทึกสินค้าล้มเหลว
• ความเข้ากันได้กับ Yoast SEO, Rank Math, All in One SEO และ SEOPress ผ่านเจ้าของ og:image เพียงจุดเดียวที่ชัดเจน
• ไม่ต้องมี dependency สำหรับการเรนเดอร์ภาพหรือการตั้งค่า CDN ของบุคคลที่สามบนโฮสต์ WordPress ของร้านค้า
• แผนแบบชำระเงินและทดลองใช้ฟรี 14 วัน เพื่อให้กำลังการเรนเดอร์ แบนด์วิดท์ และการสนับสนุนถูกสงวนไว้สำหรับร้านค้าที่กำลังประเมินหรือชำระค่าบริการ แทนที่จะเป็นคิวฟรีแบบไม่จำกัด

หลักการตัดสินใจในทางปฏิบัติ

ใช้ Yoast SEO หรือ Rank Math เมื่อความต้องการคือ metadata สำหรับ SEO, schema, title, description และการตั้งค่าสำหรับการค้นหา

เพิ่ม FastOG เมื่อความต้องการคือการ์ดโซเชียลของสินค้า WooCommerce แบบไดนามิกที่ออกแบบไว้ ซึ่งสะท้อนข้อมูลด้าน merchandising โดยที่ร้านค้าไม่ต้องเรนเดอร์รูปภาพเอง

ใช้ HTML ที่ใช้งานจริงและ debugger ของแพลตฟอร์มปลายทางเพื่อตรวจสอบผลลัพธ์ สิ่งสำคัญที่ต้องตรวจสอบคือแท็ก og:image ที่มีผลเพียงแท็กเดียว, การตอบกลับรูปภาพแบบ public ที่ 200, ค่าของสินค้าที่เป็นปัจจุบันในภาพปกที่สร้างขึ้น และ URL ของสินค้าแบบ canonical ที่คงที่

แหล่งข้อมูลและบันทึกการนำไปใช้

• Yoast: Facebook Open Graph meta tags
• Rank Math: Open Graph Meta Tags
• Meta: Sharing for Webmasters
• Meta: Web Crawlers
• WooCommerce: REST API and webhooks
• คู่มือความเข้ากันได้ของปลั๊กอิน social preview สำหรับ FastOG
• คู่มือการรีเฟรชแคช Facebook ของ FastOG
• การผสานรวม FastOG กับ WooCommerce

ข้อความเฉพาะของ FastOG ในบทความนี้อ้างอิงจากการนำไปใช้ของปลั๊กอิน WooCommerce และการทดสอบการผสานรวมของปลั๊กอินดังกล่าว พฤติกรรมแคชของแพลตฟอร์มถูกจำกัดขอบเขตโดยเจตนาให้อยู่ภายในสิ่งที่เอกสารแพลตฟอร์มที่อ้างอิงรองรับเท่านั้น ไม่มีการกล่าวอ้างถึง "การรีเฟรชทันที" แบบสากล