ก่อนอื่นเตรียม environment ของเครื่องให้พร้อมก่อนนะครับ

ท่านใดเครื่องยังไม่พร้อมแวะไปที่นี่ก่อนนะครับ https://angular.io/guide/quickstart แล้วกลับมาด้วยนะครับ

เมื่อพร้อมแล้วก็ไปกันเลย

  • new project ขึ้นมาใหม่ครับ ตั้งชื่อตามความชอบเลยนะครับ
  • เมื่อ new project เสร็จแล้ว start server เลยครับ (ตัวอย่างนี้ผมใช้ port 4000)
  • เมื่อ server start เสร็จและไม่ error ก็ไปหน้าเว็บเลยครับ ถ้ามี error ก็ดูว่ามันพังอะไรแล้วแก้ให้เรียบร้อยก่อนนะครับ
  • เข้าเว็บได้แล้ว แต่หน้าตามัน simple ไปหน่อย เรามาแก้ code กันนิดนึงครับ จะเอาให้ simple กว่าเดิมเข้าไปอีกครับ
  • แก้เสร็จแล้วไปดูหน้าเว็บซิ หน้าตาใหม่ของเรา simple มั้ยหละครับ แล้วก็กดที่ link Show Sample page เลยครับ
  • ลองคลิกขวาเลือก view source ดูนะครับ
จะเห็นว่า html tag ในส่วนของ body ถูกซ่อนไว้ใน app-root แบบนี้ search engine มันจะเข้าไม่ถึงครับ
  • ไปกันต่อเลยครับ install universal ของ angular ด้วยคำสั่ง
ng add @ng-toolkit/universal
หลังจากที่ install universal เสร็จแล้วจะเห็นว่า มีไฟล์ใหม่เกิดขึ้นมาหลายไฟล์เลย
  • เรามาสนใจแค่สองไฟล์นี้ก่อนครับ

file package.json จะเห็นว่าในส่วนของ script มีคำสั่งเพิ่มขึ้น 4 บรรทัด

file local.js แก้ไข port เป็น 4000 เหมือนที่เรารันตอนแรกครับ

  • ต่อไปให้เรา stop server ที่เรารันไปด้วยคำสั่ง ng serve ตอนแรกครับ หรือกด control+c ก็ได้ครับ (ในเครื่อง mac)
  • แล้ว build และ start server ด้วยคำสั่งนี้แทนครับ
npm run build:prod && npm run server
  • เมื่อ start server เสร็จแล้วให้เข้าไปที่หน้าเว็บของเราอีกทีครับ แล้วคลิกขวา view source ใหม่ครับ

จะเห็นว่าใน tag app-root มี html tag ที่เราเขียนไว้เยอะแยะก่อนหน้านี้ขึ้นมาแล้ว นั่นแหละครับเว็บของเราสามารถให้ search engine เข้ามาทำ index search ได้แล้ว และนี่แหละครับ SEO Friendly



SOURCE

LEAVE A REPLY

Please enter your comment!
Please enter your name here