Category: web-developments

เว็บที่ใช้ next.js ดีต่อ SEO ไหม?

วันนี้ เราได้ถามตนเอง และพยายามหาคำตอบ ที่น่าตื่นใจ คือ ยุค SEO ที่เน้นการ Code ถือว่าอยู่ในส่วนของ Technical SEO โดยมันเป็นเรื่องของการเลือก Framework นำมาใช้พัฒนาเว็บ

วันก่อนหน้านี้ไม่นาน ผมได้เข้าไปสอบถามเพื่อนๆ และคนในวงการ Dev. ว่าอะไรดีสุดสำหรับทำเว็บเพื่อรองรับ SEO เนื่องจากมีลูกค้าท่านหนึ่ง เกิดปัญหาจากการใช้ WordPress โดยสิ่งที่เกิดขึ้นคือ Web อืด render ไม่ค่อยไป แถม Plugin ในเว็บก็มียุบยับเต็มไปหมด แล้วลูกค้าได้มาสอบถามว่าควรจะแก้ไขอย่างไร ทางผมเองที่มุ่งเน้นแต่ทำ SEO ส่วนใหญ่ทำให้กับ Web Platform WordPress ก็พอจะทราบปัญหาเดียวกันคือเว็บเริ่มอืดๆ เมื่อมันเป็นเว็บขนาดใหญ่ และต้องติดตั้ง Plugin จำนวนมาก ซึ่งผมเองก็เริ่มมองว่า CMS – WordPress อาจจะไม่ตอบโจทย์การทำ SEO สมัยนี้แล้วก็เป็นได้

แต่อย่างเพิ่งตกใจไปครับ เพราะเว็บส่วนใหญ่ ที่แข่งขันทำ SEO กันอยู่ โดยมากแล้วยังคงใช้ WordPress กัน แต่ตอนที่สอบถามผู้คนได้ List มาตามนี้ครับ

1. ทำเว็บโดยใช้ PHP Laravel
2. ใช้ WordPress เหมือนเดิม
3. ใช้ Python ทำเว็บ SEO
4. ทำเว็บด้วย React
5. ทำเว็บด้วย Next.JS

ทั้ง 5 Solution มีแค่ WordPress ที่คิดว่าง่ายสุด แต่ทางผมก็คิดหา Solution อื่นๆ ที่อาจเหมาะสมกว่าสำหรับลูกค้าบางราย ผมได้รับ Request มาว่า ต้องการเว็บน้ำหนักเบา มี Speed Performance ที่สูง ซึ่งผมถามและอ่านหลายๆบทความทำให้เข้าใจแบบคร่าวๆ ว่า การทำเว็บด้วย Next.JS น่าจะได้เปรียบทางด้าน SEO มากกว่า

Next JS vs React

ผมขอพุ่งประเด็นไปที่ Next.JS กับ React ก่อน เพราะเห็นว่ามันคล้ายๆกัน จากบทความของ Wojciech Baranowski เรื่อง “Next JS vs React: The 2022 Comparison” ผมได้เข้าไปอ่านและทำความเขาใจในการเปรียบเทียบ ทั้ง 2 Solution ดังนี้ครับ

อะไรคือ Next.JS ?

Next.JS เปิดตัวปี 2016, และกลายเป็น framework ที่นิยมมากๆในยุคนี้ มันเป็น React Framework ที่ Dev. สามารถสร้าง Single-page, JavaScript web applications เป็นการใช้งานแบบ “server-side rendering” (SSR)
ผลของมันก็คือ ได้เว็บที่เร็วมากๆ ตอบโจทย์ การทำ SEO

แต่กระนั้น มันก็คงเป็นเรื่องที่เปรียบเทียบได้ยาก เพราะ Next.JS คือ React framework และ React is a library

ความได้เปรียบ

SEO Friendly – ในปัจจุบัน การทำเว็บด้วย React ก็เป็น SEO Friendly แล้ว Next.JS หล่ะ ? เขาว่ากันว่า Next.JS นั้น SEO Friendly มากกว่า ซึ่งใน React เมื่อ user ทำการ click ในหน้าเว็บเพจต่างๆ การกระทำนั้นเกิดขึ้นในฝั่ง client-side มันจึงเกิดปัญหาเรื่องของ robot ของ search engine ที่เข้ามาเก็บข้อมูลเพื่อนำไป index

ในเคสนี้ ความแตกต่างของ Next.JS โดยที่มันเป็น server-side rendering มันจึงมีประสิทธิภาพในการจัด index ใน SERP

โครงสร้าง เว็บไซต์ สำหรับเว็บขายสินค้าแฟชั่น ที่ตอบสนอง SEO ได้ดีกว่าคู่แข่ง เกิดผลลัพธ์ การทำอันดับที่ดีกว่า และพัฒนาง่าย ขยายธุรกิจได้เร็ว

---

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

เว็บแฟชั่น ส่วนใหญ่ในไทย ยังไม่ค่อยนำ Site Navigator ตรงนี้เข้ามาประยุกต์ใช้ในการพัฒนางาน นั่นถือว่าเป็นโอกาสที่ดี สำหรับเจ้าของกิจการที่เข้ามาคว้าโอกาส เปิดพัฒนางานแบบนี้ก่อนใคร

 

ท่านผู้พัฒนาเว็บ หรือเจ้าของกิจการ ควรลองเข้าไปดู site navigator ของเว็บ H&M หรือ เว็บขายเสื้อผ้าแฟชั่นออนไลน์ อย่าง ZALORA นั้นเป็นตัวอย่างที่ดี และจัดเป็นการพัฒนาเว็บแฟชั่นที่จอบโจทย์การทำอันดับทาง SEO และเป็น Web Development Quality Guideline ที่ทาง Google INC. ได้พยายาม Educate ให้เรา Follow ตาม

 

เจ้าของธุรกิจ ควรเล็งเห็นความสำคัญของการพัฒนาตรงจุดนี้ เพราะมันเป็น “crucial point” ที่ไม่ควรหลีกเลี่ยง

 ทัศนะ SEARCH MONOPOLY ได้ตระหนักถึงความสำคัญในการพัฒนาโครงสร้างเว็บให้เป็นไปตามแบบแผนอันนี้ และ Strongly Recommend ให้แก่เจ้าของเว็บและการพัฒนาเว็บ และเราได้พิจารณาที่จะนำแนวคิดนี้เข้าไปบรรจุอยู่ใน Policy of Qualitative Development Protocol ซึ่งเป็นแผนแม่บทในการพัฒนาเว็บที่ตอบโจทย์ธุรกิจ และเป็นสิ่งที่กลุ่มพันธมิตรทางธุรกิจของ Search Monopoly ให้การตระหนักถึง และจำเป็นต้องสร้าง เพื่อให้เกิดผลลัพธ์ทางธุรกิจที่ดีที่สุด

เราจึงขอแนะนำให้ เจ้าของธุรกิจ ได้ระวังการจัดจ้างเว็บที่ไม่มีมาตรฐาน และบรรจุ Specification นี้เข้าไปอยู่ใน Requirement ของการพัฒนาเว็บไซต์ ก่อนที่จะทำการจัดจ้างหรือเซ็นสัญญาในการพัฒนาเว็บทางธุรกิจ

 

 โปรดระวัง ! – บริษัทรับทำเว็บ และพัฒนาเว็บที่ไม่มีมาตรฐาน ไม่มีความเชี่ยวชาญในการพัฒนาเนื้องานที่ไม่ตอบโจทย์ทางธุรกิจของคุณ การทำเว็บไซต์สำหรับขายเสื้อผ้าแฟชั่นออนไลน์ เป็นงานที่ละเอียดอ่อน เพราะต้องขยายเนื้อหาที่มี Details เยอะ และต้องพัฒนาการขายแบบ Emotional Selection ควบคู่ไปกับ การทำ Search & Selection ในระบบ

 

การพัฒนาเว็บสำหรับเสื้อผ้าแฟชั่นออนไลน์ นั้นไม่ใช่เรื่องงาน ไม่ใช่เพียงแค่มีเว็บแล้วลงรูปสินค้าหรือจัดแสดง จะสามารถพัฒนาธุรกิจของคุณได้อย่างยั่งยืน ผู้ที่จะเข้ามาผูกขาดตลาดได้อย่างแท้จริง คือผู้ที่พัฒนาระบบที่ตอบสนองกับงานการตลาดที่เน้นทางด้าน Emotional Buying บวกกับ High Retention Selection หรือการกลับเข้ามาดูซ้ำๆ เป็นประจำ

พฤติกรรมธรรมชาติของลูกค้ามักจะกลับเข้ามาดูแบบบ่อยๆ ก่อนที่จะตัดสินใจซื้อ ฉนั้นการทำ Ads โฆษณาทั้งด้าน FACEBOOK Social และ PPC Adword หรือแม้แต่การทำ Banner Ads ที่สร้างจำนวน Pageviews ก็ไม่สามารถสร้างยอดขายได้ตามใจที่เราประสงค์

---

สรุปของ Search Monopoly 

1. คุณควรเริ่มจาก Business Development Process – เอกสารต้องจัดเจน มี scope ของการพัฒนาธุรกิจ และเข้าใจตลาด โปรดเรียนรู้ที่ –
2. กำหนด Requirement ที่ระบุถึง site navigator ที่ชัดเจน ไม่ตกหล่น
3. กำหนดแผนทำ Targeting page เพื่อปริมาณการค้นหาทาง Organic Search จำนวนมาก
4. พัฒนา Market Retention จากการทำ Organic Search
5. User Experience เป็นสิ่งที่สร้างความสำเร็จ เมื่อมี 4 ข้อด้านบนที่แข็งแรงแล้ว
6. การพัฒนา Partnership และการสร้าง Site Authority
7. การทำ Emotional Buy ทาง Social
8. การทำ Content Marketing
9. Affiliate Program สำหรับตลาดที่ Specific และเป็น Niche ที่ละเอียดอ่อน

  โปรดระวัง ! การอัดงบประมาณ (Wasted Budget) ให้กับ Agency ที่เน้นกินงบประมาณในการทำโฆษณาที่ไม่มีแบบแผน

 

[SEO Tips] การสร้าง Category ID สำหรับ Data Analysis

และ Data Filtering โดยใช้หลักการของ Dewey Decimal Classification

หลังจากได้เขียน Issue Support เกี่ยวกับ prefix- การตั้งชื่อ URL สำหรับ Category Page อันเป็นหัวใจสำคัญของความสำเร็จ ของเว็บ E-commerce ขนาดใหญ่

การสร้าง Category ID จะใช้เทคนิค Dewey Decimal Classification ซึ่งทำให้ URLs สามารถไล่เรียงเป็น ลำดับชั้นได้อย่างดี และช่วยให้สามารถ จัดการทางงาน SEO ได้อย่างมีประสิทธิภาพ

ดูรูปแบบการจัดเรียงข้อมูลในแบบ Dewey Decimal Classification ได้ที่รูปภาพ

 

 

 

 

 

วิธีการทำ

Category Group 1

Category Group 2

Category Group 3

Category Group 4

Category Group 5

 

ให้ Main Category สามารถระบุ digit แรกได้ หรือ 3 digit แรก

ในเว็บ E-commerce อาจจะใช้ 2-3 Digit สำหรับ Main Category

เช่น

001 = แฟชั่น

002 = ของใช้ในบ้าน

003 = IT Electronic

004 = หนังสือ

005 = อาหาร

 

ในแต่ละ Main Category จะมี SubCategory LV 1, LV 2 LV 3 ลึกไปเรื่อยๆ

เช่น > แฟชั่น > แต่งผม > Spray แต่งสีผม > Spray แต่งสีผมสูตร ผมนุ่ม > ส่วนประกอบ ที่เป็น ขี้ผึ้ง

จะได้ Category ID ดังนี้

แฟชั่น = 001

แต่งผม = 001

Spray แต่งสีผม = 001

Spray แต่งสีผมสูตร ผมนุ่ม = 001

ส่วนประกอบ ที่เป็น ขี้ผึ้ง =001

 

LV1

 แฟชั่น = 001000000000000 = www.ecommerce.com/cat-fashion/

 

LV2

แฟชั่น > แต่งผม = 001001000000000 = www.ecommerce.com/cat-fashion-hair/

 

LV3

แต่งผม > Spray แต่งสีผม > = 001001001000000 = www.ecommerce.com/cat-fashion-hairspray/

 

LV4

Spray แต่งสีผม > Spray แต่งสีผมสูตร ผมนุ่ม > = 001001001001000 = www.ecommerce.com/cat-fashion-hairspraysmooth/

 

LV5

Spray แต่งสีผมสูตร ผมนุ่ม > ส่วนประกอบ ที่เป็น ขี้ผึ้ง = 001001001001001 = www.ecommerce.com/cat-fashion-hairspraysmooth-wax/

 

 

 

การทำ อาจจะออกแบบใน Excel หรือ ทำใน Google Sheet และนำไปให้ Web Developer บรรจุเข้าไปใน Data Base โดยสามารถ อับเดท ID ได้

 

ส่วน Product page เราสามารถ Run เลขเพิ่มเติม อีกชุดหนึ่ง โดยใช้ Parent Category ชั้นลึกสุดท้ายเป็นตัวกำหนด

เช่น

Spray มิยองเซ่ สูตร Wax ให้ผมนุ่ม สีทองเฉดเขียว

www.ecommerce.com/hairspray-wax-for-smooth-color-green-goldtone-50ml/

ได้ระบุ Product ID คือ HWM50ML76441

ให้ใช้

001001001001001 <|> HWM50ML76441

เราจะได้ Product ID สำหรับ SEO ดังนี้

www.ecommerce.com/hairspray-wax-for-smooth-color-green-goldtone-50ml/ = 001001001001001HWM50ML76441

 

เมื่อทำการ Plot Organic Traffic สำหรับ DATA Analysis เราจะได้ Pattern ของการเติบโตอย่างละเอียด

 

ส่วน หน้าอื่นๆ ที่ไม่เกี่ยวกับ Category สามารถ RUN เลขได้อีกแบบ โดยระบุ ตัวอักษร ภาษาอังกฤษ ที่ 3 Digit สุดท้ายได้เช่นกัน

เช่น รีวิว สินค้า Hair Spray ที่กล่าวมาแล้ว ในหน้า  www.ecommerce.com/cat-fashion-hairspraysmooth-wax/

0010010000000rv = www.ecommerce.com/reviews/fashion-hairspray/

เราจะใส่ Cat ID เพียง 2 Level แรก เพื่อให้เข้าใจคร่าวๆ ว่า Reviews สินค้า อยู่ในหมวดหลักๆ ตรงจุดไหน

 

แหล่งที่มา
www.designisthenorm.com/dewey-decimal-classification-system/
bpeck.com/references/DDC/ddc.htm