วิธีติดตั้ง AMP

วิธีติดตั้ง AMP ใน WordPress ที่ทำให้บทความเราโหลดได้เร็วขึ้นมากกกกกกกก คิดเป็น 1/4 วิ ชนิดที่ว่า ดอมทอเร็ตโต้ยังต้องซูฮกให้

วิธีติดตั้ง AMP ใน WordPress

จากบทความที่แล้วที่ผมเขียนไว้คือ วิธีติดตั้ง Facebook Instant Articles สำหรับ WordPress หลังจากลองทำดูแล้วก็ร้องโหหหหห โหลดไวจังวะ แต่มันยังอีกวิธีที่สามารถทำให้หน้าบทความเราโหลดได้ไวไม่แพ้ Facebook Instant Articles เลยนั่นก็คือ AMP นั่นเอง เราไปดูกันเลยว่ามีขั้นตอนการทำอะไรบ้าง

วิธีติดตั้ง AMP ใน WordPress 1

1. AMP

โหลด แล้ว Activate ปลั๊กอินให้เรียบร้อย แค่นี้แหละ เสร็จแล้ว

เสร็จแล้วจริง ๆ นะก็ปลั๊กอินตัวนี้มันมีแค่นี้แหละติดตั้งแล้วก็จบ ลองเข้าหน้าบทความไหนดูสักหน้าก็ได้ แล้วเติม /amp ต่อท้าย url เราก็จะเจอกับบทความที่ปลั๊กอินมันแปลงให้ หน้าตาก็จะโล้น ๆ หน่อย ตัดโน่นตัดนี่หมด แทบไม่เหลืออะไรเลย เหลือแต่บทความเพียว ๆ ก็ไม่แปลกที่มันจะโหลดไว ตัดออกซะขนาดนั้น

ตอนผมทำแรก ๆ ก็เฮ้ยแล้วยังงี้ใครมันจะบ้ามาเติม /amp ท้ายบทความทุกครั้งที่จะเปิดเว็บล่ะ จริงมั๊ย ตอนแรกผมก็คิดวิธีว่าจะทำยังไงให้ user ไม่ต้องมาเติม /amp อารมณ์ประมาณว่าเปิดแล้วให้วิ่งไปหน้าเว็บเวอร์ชั่น AMP เลย รู้ไหมผมทำยังไง แก้โค๊ดครับ หลังจากทำเสร็จมันก็ได้ตามที่ต้องการอ่ะนะ แต่ถ้าคนอ่านบทความนี้ไม่ใช่ โปรแกรมเมอร์ล่ะ เค้าจะทำยังไง นั่นสิ ตูแก้โค๊ดไม่เป็นเหมือนเอ็งนะเฟ้ย ผมก็เลยคิด ๆๆ หาวิธีว่าทำยังไงจนสุดท้ายไปเจอพระเอกของเราครับ  ทำเสียงเปิดตัวแบบอลังการหน่อย แทด แท แด แทด ๆ แทด แทแด

2. AMP for WP – Accelerated Mobile Pages

วิธีติดตั้ง AMP ใน WordPress 2

อัพเดท 14/08/2017 ถ้าลงปลั๊กอิน AMP for WP – Accelerated Mobile Pages แล้วไม่ต้องลง AMP ในข้อหนึ่งนะครับใช้แทนกันได้เลย ผมแนะนำให้ใช้ลง ข้อ 2 ตัวเดียวพอแล้ว

โหลด  เจ้าปลั๊กอินตัวนี้มันจะเป็นตัวที่ช่วยเราในเรื่องของการปรับแต่งหน้าตา Design บทความเรา เช่น Logo สี font อะไรแบบนี้ สามารถใส่ Ads ได้ด้วยนะ เจ๋งโคตร ผมทำวิธีตั้งค่าต่าง ๆ ไว้ให้แล้วดูกันต่อเลย

ให้เราเข้าไปที่เมนู AMP สังเกตดูมันจะอยู่เมนูล่าง ๆ รูปเฟือง เข้าไปเราก็จะเจอเมนูการตั้งค่าเพียบ เรียงจากบนลงล่างนะ

Menu General

วิธีติดตั้ง AMP ใน WordPress 3

เมนูนี้จะให้เราใส่โลโก้ที่จะแสดงบริเวณ Header ของหน้าบทความเรา ไม่มีไรมากก็อัพโลโก้ใส่เข้าไป จบ

Menu Homepage

ไม่ต้องทำอะไร ตั้งเป็น OFF ให้หมดเพราะเราจะให้มันเป็น AMP เฉพาะหน้าบทความเท่านั้น

Menu Analytics

เมนนูนี้สำหรับใครที่ติด Google Analytics หรือ Google Tagmanager ต้องดูให้ดี ๆ นะครับไม่งั้น Anylytics พังนะ อิอิ ตั้งตามภาพได้เลยครับ

สำหรับใครที่ใช้เฉพาะ Google Analytics ทำตามภาพนี้ได้เลย

วิธีติดตั้ง AMP ใน WordPress 4

ใครใช้ Google Tagmanager ทำตามนี้

วิธีติดตั้ง AMP ใน WordPress 5

Menu Design

เมนูนี้เราสามารถตั้งค่าต่าง ๆ เช่น สี Background ใครอยากใส่ custom css ก็ใส่ได้ที่เมนูนี้ครับ

Menu SEO

ผมตั้งเป็น OFF ทั้งหมด เพราะไม่ต้องการให้ bot มา Index หน้าพวกนี้ เดี๋ยวจะกลายเป็น Duplicate เราต้องการแค่ให้ user เค้าเปิดอ่านบทความได้เร็วขึ้นเท่านั้น ส่วนพวก meta description ต่าง ๆ ก็ให้ bot ไปเก็บจาก url ต้นฉบับแทน

Menu Advertisement

ตามชื่อเลยครับ เมนูนี้ก็ไว้สำหรับใส่ Ads นั่นเอง

Menu Single

เมนูนี้จะเป็นการตั้งค่าหน้าบทความว่าจะให้แสดงอะไรบ้าง เช่น บทความที่เกี่ยวข้องให้ดึงมาจาก Category หรือ ดึงจาก Tag ให้แสดงกี่บทความ ให้แสดง Social Icons สำหรับแชร์บทความ เป็นต้น

วิธีติดตั้ง AMP ใน WordPress 6

Menu Social Share

เมนูนี้เราก็เลือกตามใจชอบเลยว่าจะมี Social Share ของอะไรบ้าง Facebook Twitter Google Plus เป็นต้น

Structured Data

ข้ามไปไม่ต้องทำอะไร

Notifications

ข้ามไปไม่ต้องทำอะไร

Translation Panel

เมนูนี้ถ้าไม่ชอบภาษาอังกฤษที่ตัวปลั๊กอินตั้งมาให้เราสามารถเปลี่ยนคำที่แสดงได้จากที่นี่ครับ

Comments

ข้ามไปไม่ต้องทำอะไร

Advance Settings

เมนูนี้ปิด OFF ให้หมด ยกเว้น Mobile Redirection ให้ตั้งเป็น ON เพราะเราจะให้ User ที่เข้าจาก Mobile Redirect ไปหน้า AMP

จบแล้ว

แค่นี้เว็บเราก็พร้อมใช้งาน AMP แล้วครับ ช่วยให้ User ที่เข้ามาอ่านบทความในเว็บเรา เปิดบทความได้เร็วขึ้นมาก ๆ CodingDee ก็ใช้อยู่นะ ถ้าเข้าจาก Facebook ก็จะเป็น Facebook Instant Article ถ้าเข้าผ่าน Mobile จากหน้าเว็บ ก็จะเจอ AMP ลองนำไปใช้กับเว็บคุณดูครับ

หากอ่านแล้วชอบบทความจาก CodingDee ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้เจอกันบทความต่อไปครับ

แหล่งที่มาampproject.org
โปรแกรมเมอร์คนหนึ่งที่อยากแชร์ประสบการณ์การทำงาน ปัญหาที่พบเจอและวิธีแก้ปัญหา มาร่วมแชร์ความรู้กันนะ