10 ขั้นตอน การทำให้ blogger ใช้ AMP HTML
AMP คืออะไร คำตอบคือ การแสดงผลบนมือถือ แบบเร่งหรือแบบโหลดที่ไวมาก โดยการเก็บ cashไว้โดยgoogle และเมื่อเราค้นหา googleก็จะนำหน้าที่ cashไว้มาแสดง แบบรวดเร็วมาก เราจะทำbloggerให้เป็นหรือใช้กับ AMP html หลายคนถามว่าเป็นไปได้เหรอ ? มันเป็นไปได้ไหม?และมันเป็นไปได้มันไม่ได้ยากเลยครับ เพราะทุกวันนี้googleให้ความสำคัญ กับเรื่อง speed ของไซต์ พอสมควรประกอบกับทาง facebookได้ออกตัว instant article มา ทำให้googleต้องปรับตาม และเรื่องนี้ก็มาหลายเดือนแล้ว และ ผมก็ searchหา การทำให้ bloggerใช้รูปแบบ amp html blogger templateแต่ไม่เจอ มีแต่บอกว่ามันเป็นไปไม่ได้
ก่อนอื่นต้องขออธิบายเกี่ยวกับAMP html นิดหน่อย AMP หรือ accelerated mobile page project คือการทำให้หน้าเวปโหลด และแสดงผลแบบรวดเร็ว เหมือนสายฟ้าฟาดประมาณนั้นครับ และก็ไปหาศึกษาได้ที่ AMP Project ตอนนี้มีเวอร์ชั่นภาษาไทย แล้วครับแต่ยังไม่สมบูรณ์ และเวอร์ชั่นการค้นหาแบบ AMP ยังไม่ได้ใช้ในประเทศไทย แต่ผมเตรียมตัวไว้ล่วงหน้าก่อน และนี่เป็นตัวอย่างที่ผมทำไว้ครับ Thai food for you ไม่ต้องรีบแต่ต้องเตรียมตัวก่อน ใช้หรือไม่ใช้ สำหรับผลการค้นหาแบบ AMP HTML หรือไม่อย่างไรผมไม่ทราบ แต่ไม่อยากให้คนรัก bloggerต้องน้อยหน้าครับ
เลยทดลองทำนานหลายเดือน โดยถามใน stackoverflow บ้าง แต่ไม่ได้คำตอบที่ดีเท่าทีควร เลยต้องลงมือทำเอง ไม่เหมือนwordpress ที่มีpluginให้เสร็จสับเลย แต่บล็อกเกอร์ ต้องใช้ความสามารถนิดหน่อยครับ และยังได้ความรู้เพิ่มอีกด้วย แต่ต้องขอบอกก่อนครับว่า ผมไม่รู้ว่าที่ทำไปจะโดนบล็อกเกอร์แบน accountไหม แต่ที่รู้ๆคือ ทำแล้วก็เร็วดี แต่เป็นเฉพาะการค้นหาแบบ ในมือถือที่ใช้ browser chrome ที่เป็น google.com เท่านั้น มันจะนำแคชไฟล์มาแสดง คือกดปุ๊ปก็โหลดเสร็จเลย แต่หากว่าใช้ google chrome แต่เป็น https://google.co.th (บ้านเรา) ก็เป็นปกติไม่เร็วเท่าไหร่ เมื่อทำแล้วก็ติดปัญหาเรื่องรูปเหมือนเดิม หากไฟล์ใหญ่มากก็ช้าลงนิดหน่อย แต่ถ้าไม่อยากเปลี่ยน AMP HTML แต่อยากใช้ธีมแบบเดิมทีมีความเร็ว ผมก็อธิบายไว้ สามารถอ่านได้ที่ ทำบล็อกเกอร์โหลดเร็ว และผมคิดว่าสูตรเก่าผมดีกว่า ถ้าทดสอบใน page speed insight และ ใช้ google.co.th เอาล่ะ เราก็มาเริ่มกันตามstep ตามนี้เลยครับ
วิธีทำ amp html ใน blogger
1. กรุณาbackupธีมเก่าไว้ก่อน เป็นอันดับแรก แล้วเก็บไว้ในเครื่องคอมพิวเตอร์ของคุณก่อน เผื่อเกิดปัญหา และหากเกิดปัญหาเปลี่ยนกลับไม่ได้ให้เข้าไปที่แม่แบบ กำหนดค่าแล้วเลือก templateใหม่เปลี่ยนและ save จากนั้นให้สำรองแม่แบบที่ backup ไว้ในคอมพิวเตอร์เท่านี้ก็ได้แบบเก่าคืนกลับมา2.เข้าไปที่แก้ไข templateแล้ว disable css ทั้งหมดนี่คือสิ่งที่หลายคนในต่างประเทศติดปัญหานี้โดยการdisable ทั้งหมดแบบนี้ครับ
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
โดยคัดลอกโค๊ตที่ให้ไว้ไปวางทับโค๊ตข้างล่างครับ
<b:skin><![CDATA[*/]]></b:skin>
และยาวไปจนถึง
<b:template-skin>---css code---lt;/b:template-skin>
แล้วเดี๋ยวค่อยหา background มาใส่โดยหามาจากtemplate classicก็ได้ครับ โดยให้ปรับกลับไปเป็นtemplate classic แล้วคัดลอกเอามาเฉพาะcss โค๊ตมาบันทึกไว้ใน notepad หรือวางต่อจากข้อ2 เช่น
<style amp-custom='amp-custom'>
แล้วต่อด้วยcss code ปิดท้ายด้วย </style>
3.นำโค๊ตด้านล่างวางทับ
<html b:version='2' class='v2'..........>เพื่อเปลี่ยนแบบ html ส่วนหัวให้เป็นรูปแบบ AMP html และข้อควรระวังมันจะกลับเป็นแบบเดิมทุกครั้งที่เรากลับเข้ามาแก้ไขให้เปลี่ยนกลับทุกครั้ง
<html amp='amp'>
หรืออาจใช้โค๊ตนี้ไม่errorครับ
<HTML amp='amp'> และปิดท้ายด้วย </HTML>
3.1 นำโค๊ตนี้ไปวางต่อจาก
<head> เพื่อกำหนดวิวพอร์ตให้บล็อก
<meta content='width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' rel='canonical'/>
4.นำโค๊ตด้านล่างไปวางทับ
</body>
<!--</body>--></body>
5.นำgoogle plus ออกโดยนำโค๊ตนี้ออกเพราะเป็นerrorที่แก้นานมากสำหรับผม
<googlePlusBootstrap/>
6.เอา power by blogger ออก ไม่แนะนำให้เอาออก แต่ก็ต้องเอาออก เพราะมัน error อาจนำตัวอื่นมาแทนที่ อาจเป็นแค่ text มาใส่แทน เพราะbloggerเป็นของฟรี ก็ต้องให้credit bloggerและgoogle ด้วย (หลังจากเอาออกแล้วก็ใช้gadgetข้อความและใส่linkเพิ่มเข้าไปได้เหมือนเดิมครับ)
วิธีการเอาออกคือกด control+fค้นหาโค๊ตด้านล่างนี้แล้วเปลี่ยนจาก"true"ให้เป็น"false"แล้วกดsaveจากนั้นก็ออกไปเอาgadget footer ออก
<b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’>
7.นำโค๊ตAMPมาใส่ก่อน
</head>
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'/></script>
<script async='async' src='https://cdn.ampproject.org/v0.js'/></script>
8.รูปภาพที่ใช้ต้องข้อกำหนดของAMPเช่น
<amp-img src="urlของรูปเรา.jpg" alt="altคำอธิบาย" height="400" width="800"></amp-img>
โดยการนำurlของรูปมาวางตรง"urlของรูปเรา"และคำอธิบาย และกำหนดขนาดตามต้องการ หรือต้องการแบบ responsive ก็ไปหาวิธีที่ amp project ผมลองแล้ว desktopภาพใหญ่มาก คอนโทรลไม่ได้แต่mobile มันresponsive แบบยืดหดหรือfluid เพียงแค่เพิ่ม layout=responsive หรือใช้โค๊ตตามด้านล่าง
<center>
<amp-img alt="alt ของรูปภาพ" height="350" layout="responsive" sizes="(min-width: 650px) 350px, 70vw" src="urlของรูป.PNG" width="400"></amp-img></center>
<amp-img alt="alt ของรูปภาพ" height="350" layout="responsive" sizes="(min-width: 650px) 350px, 70vw" src="urlของรูป.PNG" width="400"></amp-img></center>
9.และหากว่าต้องการใส่ google analytic ให้นำโค๊ตด้านล่างที่ให้ไว้ไปวางต่อจากข้อ7
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/></script>
และนำโค๊ตด้านล่างส่วนที่2ไปวางแถวfooterและอย่าลืมเปลี่ยนหมายเลขไอดีด้วยครับ
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
10.และหลังจากนั้น ก็ลองเปิดในbrowserดู และกดf12และใส่ #development=1 ต่อจากurlของเราด้านล่างสุด ก็จะมีAMP validation แยกให้เช็คต่างหากด้วย และก็จัดการกับerrorที่ด้วยตัวของคุณเอง แนะนำว่าส่วนใหญ่จะต้องเปลี่ยนจาก style เป็น class หรือนำบางสิ่งที่ไม่จำเป็นออก ผมได้ลองเหลือ sidebarไว้ก็ช้าเหมือนเดิม และใช้ google structure data testing tool ทดสอบและแก้ไข ตรงนี้มีคนเขียนไว้เยอะมากแล้วครับ และที่เหลือเกี่ยวกับการบอกให้ search engine รู้ว่าบล็อกเราทำampก็ไปหาดูต่อที่amp projectหรือgoogle หรือทดสอบความเร็วblogได้ที่ page speed insights และขอให้สำเร็จกันทุกคนนะครับ หากทำแล้วใช้ได้ ก็กดไค์กดแชร์ หรือคอมเมนต์ไว้ด้วยครับ หรืออาจอีเมล์ติดต่อผมก็ได้ครับ
หากผิดพลาดประการได ก็ต้องขออภัยด้วยครับ เพราะผมเพิ่งหัดเขียนบล็อกได้ไม่กี่เดือนครับ และไม่ได้เรียนมาทางด้านนี้ เพียงแค่ตั้งใจทำและศึกษาในวันหยุดเท่านั้นครับ แต่ผมลองแล้วมันได้ผลครับ
หรืออยากทราบว่าผมทำได้จริงไหม ให้ใช้google/ncrหรือ google amp demo แต่ต้องใช้โทรศัพท์โดยพิมพ์คำว่า thaifoodguru จะเห็นสัญลักษณ์ สายฟ้า ครับ
ข้อควรระวัง คือ พยามแก้ไขไม่ให้ google structure data error กับ amp validate error เท่านี้ก็ได้แล้ว ส่วนอื่นก็ค่อยปรับปรุงกันต่อไปครับ
อัพเดท ครั้งที่1 เมื่อgoogle index แล้วมันจะโชว์รูปสายฟ้า แต่เมื่อคลิ๊กเข้าไปดูก็ไวมาก แต่ยอดวิวในแดชบอร์ดของbloggerไม่ขึ้น เป็นเพราะว่ามันเป็นเพียงแค่สิ่งที่goole แคชไว้ คงต้องรอดูgoogle analyticsอีกที ว่าจะใช้ได้ไหม สำหรับบล็อกผมยอดวิวน้อยก็เลยเช็คยากนิดหน่อย หมายเหตุจะขึ้นรูปสายฟ้าตอนนี้ https://g.co/ampdemo เพื่อดูเท่านั้น เพราะยังไม่ถึงเวลาของประเทศไทย ผมไม่รู้ว่าอนาคตจะเป็นอย่างไรกับเจ้าของเวป แต่ที่รู้ๆคือดีกับผู้เข้าใช้งาน และadsenseก็ยังทำงานเป็นปกติดีแต่จะไม่โหลดพร้อมกันเท่านั้น ตอนนี้googleได้เปิดใช้toolสำหรับทดสอบหน้าAMP htmlใหม่ที่ google search console amp test
ตัวอย่างตามภาพครับ หากทดสอบผ่านก็จะเป็นสายฟ้าสีเขียว และสามารถดูตัวอย่างหน้าgoogle amp searchและstructure data test ที่นี่ได้ด้วยครับ จบปิ๊ง
อัพเดท ครั้งที่2 ตอนนี้โครงการamp project ได้เพิ่มหลายอย่างมาอีกเยอะครับ เช่น amp sidebar amp youtube และผมก็ได้เปลี่ยนมาใช้ampแล้ว แต่ก็เหมือนเดิมหากบ้านเราไม่ใช้ ผมก็คงต้องเปลี่ยนกลับเป็น
เหมือนที่ผมเขียนไว้ วิธีทำบล็อกเกอร์โหลดเร็วเพราะโหลดแบบปกติไม่ใช่ amp cashผมคิดว่ามันช้าครับ
นำโค๊ตที่ให้ไว้ด้านล่างไปใส่ก่อน
</head>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
แล้วให้นำโค๊ดfacebook fanpage แบบiframe มาใส่ดังนี้
<amp-iframe width=250 height=200
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/xxxx/idxxxxxxxxx">
</amp-iframe>
เรียบร้อยแล้วครับ เท่านี้ก็ได้เหมือนที่ผมติดไว้ครับส่วนgoogle+ ผมกำลังหาวิธีอยู่ครับ
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/xxxx/idxxxxxxxxx">
</amp-iframe>
หากต้องการดาวโหลดธีมที่ผมทำไว้แบบง่ายก็สามารถดาวโหลดได้ที่นี่ครับ amp template blogger ฟรีครับ
อัพเดท ครั้งที่4 ขอให้อ่านเพียงแค่การศึกษาไว้เพื่อรอการใช้ amp เท่านั้น เพราะgoogle ยังไม่ใช้ในไทย สำหรับบางบล็อกของผมก็ถอดออกแล้ว หากกูเกิลไม่ได้cashไว้ก็เหมือนเดิมครับ ต้องออกแบบไซต์แบบง่ายๆ ดีกว่าและค่อนข้างจุกจิกมากในการแก้ไขครับ และหากต้องการทำ ให้ทำบล็อกใหม่ เพราะหากคุณมี 1000 โพสต์ นั่นหมายความว่า เราต้องแก้โค๊ดรูปใหม่ทั้งหมด เหนื่อยแน่ๆงานนี้
หมายเหตุ ใช้กับtemplate แบบเก่าเท่านั้น
Add comment click here