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

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

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

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

1. AMP

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

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

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

2. AMP for WP – Accelerated Mobile Pages

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

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

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

Menu General

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

Menu Homepage

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

Menu Analytics

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

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

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

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 สำหรับแชร์บทความ เป็นต้น

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 ก็ฝาก กดไลค์เพจ ด้วยนะครับ จะได้ไม่พลาดข่าวสารเทคนิคดี ๆ จากเรา หรือติดปัญหาตรงไหนก็คอมเมนต์ไว้ด้านล่างนี้ได้ ไว้เจอกันบทความต่อไปครับ