การแสดงผล Search แบบมี AMP
- code
June 2, 2017
AMP = Accelerated Mobile Pages
เป็น Technology ของ Google
ที่ต้องการให้เว็บแสดงผลรวดเร็วทันทีที่กดไม่ต้องโหลด เป็น Concept เดียวกับ Instant article ซึ่ง AMP เปิดตัวมาซักพักแล้ว แต่ว่า Google พึ่งเปิด เป็นทางการไปไม่กี่วันก่อน ซึ่งหากเรา Search บน mobile แล้ว เว็บไซต์ไหน Support AMP ก็จะมีรูปสายฟ้าโผล่ขึ้นมา
การแสดงผล AMP จะช่วยด้านการโหลดระหว่าง server กับ client แสดงผลข้อมูล โดยจะโหลดข้อมูลก่อนที่จะแสดงผลทั้งหน้า
AMP มีผลต่อการเสิร์ชไหม?
ทำให้อันดับดีขึ้นเหมือน Mobile Friendly ไหม?
แต่ปัจจุบันเห็นมีเครื่องหมาย AMP ทำให้ ผลการค้นหาเว็บ ยาวกว่าเดิมมาก
คำตอบแบบเป็นทางการจาก Google คือ “There is no ranking change on Search”
https://webmasters.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html
แต่ CTR ควรจะดีกว่าเว็บที่ไม่ได้เป็น AMP เพราะโหลดไวกว่า จึงน่าจะมีผลโดยอ้อมต่อ SEO
คิดว่าถ้า blogspot ทำ AMP ได้เมื่อไหร่ AMP อาจจะเป็น Ranking Factor แต่มันก็อาจจะไม่มีผลเท่าไหร่เพราะคนส่วนใหญ่ก็ทำได้
AMP HTML คืออะไร ?
เพราะโมบายเว็บทุกวันนี้มันโหลดช้า !
เทคโนโลยีของการทำเว็บพัฒนาไปไวมาก การพัฒนาเว็บจึงทำได้หลายวิธีมากขึ้น บางคนมีท่าที่ตัวเองถนัด ก็เลยเลือกใช้ท่านั้นมาตลอด จนอาจไม่รู้ว่ามันมีวิธีที่ดีกว่านั้นแล้ว บางคนไม่ถนัดเลยซักอย่าง search เจอท่าไหน เช่น ใน stackoverflow ก็ใช้ท่านั้นเลย เอามายำๆ กันจนงานเสร็จ สุดท้ายแล้วเว็บมันก็ช้า เพราะใส่โค้ดปนกันเต็มไปหมด แต่ละโค๊ดมาตรฐานไม่เหมือนกัน จะมี developer จึงควรเข้าใจในเรื่องของ web performance
Google คิดค้น Accelerated Mobile Pages
Google มองว่านี่คือปัญหาครับ ทุกวันนี้เรามักจะเห็นหลายๆ เว็บเลย ที่โหลดช้าเอามากๆ โดยเฉพาะในโมบาย
วิธีที่ Google คิดได้ก็คือการ “จำกัด” HTML
Google มองว่า developer เองที่ไปทำให้เว็บมันช้าด้วยการเขียนโค้ดที่ไม่คำนึงถึง performance
จึงมีไอเดียสร้าง HTML แบบใหม่ขึ้นมาที่มีชื่อเรียกว่า AMP HTML
HTML แบบใหม่ที่ว่านี้ มันก็คือ HTML แบบปกติที่เราเขียนกัน เพียงแต่มันจะมี tag ใหม่ๆ บางตัวเพิ่มเข้ามาให้เราได้ใช้กัน ซึ่ง tag พวกนี้เอง ที่ Google จะเอาไว้ใช้ “ล้อมกรอบ” ไม่ให้โค้ดของเราออกนอกลู่นอกทาง หรือพูดง่ายๆ ก็คือ AMP HTML เป็น subset ของ HTML ที่เพิ่ม tag ใหม่บางตัวเข้ามา เพื่อที่จะเอาไว้คุม performance ของหน้าเว็บไม่ให้ตกลงไป
ส่วนประกอบของ AMP HTML
AMP HTML มันประกอบไปด้วย 3 ส่วน
HTML Components คือ tag ใหม่ ที่ Google บอกให้เราเปลี่ยนมาใช้แทน tag แบบเดิม
JS Library เป็น JavaScript ใช้อ่าน tag ใหม่ที่เพิ่มเข้ามา
Validator เอาไว้ validate ว่าหน้าเว็บนี้เขียนโค้ดถูกต้องตามหลัก AMP HTML แล้วหรือไม่
ตัวอย่างAMP HTML
ข้อตกลงเบื้องต้นของ AMP HTML หน้าเว็บที่จะนับว่าเป็น AMP HTML ได้ จะต้องมีลักษณะอย่างไร?
```
<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://www.siamhtml.com/getting-started-with-amp-html/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hi</body>
</html>
```
สาเหตุที่ Google ต้องตั้งข้อตกลงขึ้นมาก็เพื่อที่จะสามารถการันตีในเรื่องของ performance ได้นั่นเอง
ประมาณว่า ถ้าคุณอยากให้เว็บของคุณโหลดเร็วๆ คุณก็จะต้องวางโครงสร้าง HTML ตามนี้
ตัวอย่างข้อตกลง
1. ประกาศก่อนว่าหน้าเว็บนี้ใช้ AMP HTML เริ่มด้วยการใส่ attribute amp เข้าไปที่ html แบบนี้
<html amp>
2. ทำ Canonical กลับไปที่หน้าหลัก จากนั้นก็กำหนด canonical ให้เป็น url ของหน้าเว็บแบบปกติของเรา
<link rel=”canonical” href=”http://cymiz.com/forum/index.php?action=post;board=50.0″ />
3. กำหนด Viewport Meta Tag ,ส่วนที่ meta viewport ให้เรากำหนดเหมือนกับการทำ responsive web ทั่วไป
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
4. Inline Critical CSS
สำหรับ css ให้เราใส่เฉพาะโค้ด critical css เข้าไป
ส่วนโค้ด css ที่เหลือ ค่อยโหลดตามมาทีหลังด้วยวิธี asynchronous
```
<style>body {opacity: 0}</style>
<noscript>
    <style>body {opacity: 1}</style>
</noscript>
```
5. โหลด JavaScript แบบ Async , ให้โหลด AMP JS library มาใช้ และต้องโหลดมันมาแบบ async
<script async src=”https://cdn.ampproject.org/v0.js”></script>
ดูเพิ่มที่
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#required-markup
ตัวอย่าง
```
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>
```
start with the doctype <!doctype html>. ?
contain a top-level <html ⚡> tag (<html amp> is accepted as well). ?
contain <head> and <body> tags (They are optional in HTML). ?
contain a <link rel=”canonical” href=”$SOME_URL” /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. ?
contain a <meta charset=”utf-8″> tag as the first child of their head tag. ?
contain a <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside their head tag. It’s also recommended to include initial-scale=1. ?
contain a <script async src=”https://cdn.ampproject.org/v0.js”></script> tag inside their head tag. ?
contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag. ?
HTML Tags ใน AMP HTML
เมื่อวางโครงเสร็จเรียบร้อยแล้ว เรามาดู tag ของ AMP HTML
Tag ที่ห้ามใช้
มีหลายๆ tag เลยนะครับ ที่ไม่สามารถใช้ได้แล้วใน AMP HTML แต่ส่วนใหญ่ก็จะเป็น tag ที่เราไม่ค่อยได้ใช้กันอยู่แล้ว อย่างพวก frame, frameset และ tag อย่าง object, param, embed ที่ต้องระวังหน่อยก็จะมี tag ในกลุ่มของ form และ input ต่างๆ รวมไปถึง textarea และ select ที่จะใช้ไม่ได้แล้วเหมือนกัน
Tag ที่ใช้ได้ภายใต้เงื่อนไขที่กำหนด
เช่น script ที่จะให้ใช้ได้เฉพาะโหลด AMP JS library รวมไปถึง library อื่นๆ ที่ AMP HTML เป็นคนจัดหาไว้ให้เท่านั้น นอกจากนั้นก็จะมี style และ link ที่ให้ใส่ได้เฉพาะตามข้อตกลงที่ AMP HTML ระบุไว้เท่านั้นเหมือนกัน ทั้งนี้ก็เพื่อที่จะคุมคุณภาพของโค้ดไม่ให้มีโค้ดที่ไม่จำเป็น
Tag ที่หน้าตาเปลี่ยนไป
tag อย่าง img, video, audio และ iframe จะมีการเพิ่ม prefix amp- เข้าไปข้างหน้าเป็น amp-img, amp-video, amp-audio และ amp-iframe จะสังเกตว่า tag พวกนี้ล้วนมีการโหลดของข้างนอกมาใช้ Google จึงต้องให้เราเปลี่ยนมาใช้ tag ใหม่ เพื่อที่จะสามารถจัดการเรื่องการโหลดทรัพยากรตรงนี้ได้
ตัวอย่าง code
```
<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="http://www.cymiz.com/insurances/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>
```
เราสามารถใช้ style เพื่อ inline critical css ได้ แต่ต้องใส่ attribute amp-custom เข้าไปด้วย
เรายังสามารถใช้ script ได้ แต่ type จะต้องกำหนดให้เป็น application/ld+json เท่านั้น เพราะ type ที่ว่านี้จะไม่มีการ execute ใดๆ จึงไม่มีผลต่อ performance
พวก script ที่เอาไว้ทำ ui ต่างๆ อย่างเช่น carousel ยังใช้ได้ แต่จะต้องเปลี่ยนมาใช้ของที่ Google เตรียมไว้ให้เท่านั้น
AMP HTML รองรับการใส่ Ad ด้วย ผ่านทาง amp-ad
ดูเพิ่ม
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
AMP HTML มีผลกับ Google Search !
หลังจากที่เราทำหน้าเว็บเวอร์ชั่นที่เป็น AMP HTML เสร็จแล้ว เจ้าหน้าพวกนี้มันจะไปแสดงใน Google Search ของโมบาย
Google จะดูว่าในบรรดาผลลัพธ์ที่เจอนั้น มีหน้าไหนที่รองรับ AMP HTML แล้วบ้าง
ถ้ามีก็จะเลือกเวอร์ชั่นที่เป็น AMP HTML มาแสดง
แล้ว Google จะรู้ได้อย่างไรว่าหน้าเว็บนี้มีเวอร์ชั่น AMP HTML ด้วย คำตอบคือ เพราะเราเป็นคนบอก Google เอง ด้วยโค้ดนี้
<link rel=”amphtml” href=”http://www.cymiz.com/insurances/”>
ให้เราใส่โค้ดด้านบนไว้ที่หน้าเว็บปกติของเรา Google ก็จะรู้แล้วว่า หน้าเว็บเวอร์ชั่นที่เป็น AMP HTML นั้นอยู่ที่ไหน
อนาคตของ AMP HTML
ก็ต้องคอยติดตามข่าวสารจาก Google ว่า อนาคตของ AMP HTML นั้นจะเป็นอย่างไร
ถึงแม้ว่าจะมีเว็บยักษ์ใหญ่หลายราย ที่เริ่มทำเวอร์ชั่น AMP HTML ไปบ้างแล้ว แต่ก็มีบางกระแสที่ไม่ค่อยเห็นด้วยกับไอเดียนี้เท่าไร เพราะเค้ามองว่ามันเป็นการจำกัดกันเกินไป จนลดความเป็น web ลง
หากคุณใช้ WordPress อยู่แล้วลง Plugin https://wordpress.org/plugins/amp/ หรือ อันไหนก็ได้ที่ Support AMP แล้วข้ามไป ขั้นตอน Verify เลย
ถ้า “ไม่” ขั้นแรกคุณต้องสร้าง หน้า ที่เป็น AMP Version ขึ้นมาก่อน ซึ่งก็เป็น HTML แต่ว่าจะมี tag ที่บางอย่างใช้ไม่ได้หรือบางอย่าต้องเพิ่มเติมลองดูตัวอย่างข้างล่างก่อน
```
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>
```
Spec ของ tag และ CSS ที่ใช้ไม่ได้ และใช้ได้ใน AMP
<script> ใช้งานไม่ได้ยกเว้นแต่ type=”application/ld+json” ที่เป็น config และ runtime ที่ต้องโหลด ซึ่งลองไปดูในนี้ว่า ใส่อะไรได้บ้าง
<img> ต้องเปลี่ยนเป็น <amp-img> และต้องปิดด้วย </amp-img>
<video><audio> <iframe> ต้องเปลี่ยนเป็น <amp-video> <amp-audio><amp-iframe>
<frame><frameset><object><applet><embed><form> และ input ทั้งหมดยกเว้น button ใช้ไม่ได้
<style> ต้องเขียนเป็น <style amp-custom>
<link> ใช้ได้เฉพาะ ที่กำหนดไว้ใน http://microformats.org/wiki/existing-rel-values เท่านั้น ส่วน stylesheet, preconnect, prerender, prefetch อาจจะมีปัญหากับ Browser ที่ไม่ support
<meta> attubute “http-equiv” ใช้ไม่ได้
<a> ใช้กับ link ที่เป็น javascript: ไม่ได้ ถ้าจะใส่ target ต้องเป็น _blank
<svg> ใช้ได้
on….. ทั้งหลาย เช่น onclick ใช้ไม่ได้
@import ไม่ได้ใน css
Custom font ใช้ได้เฉพาะ
Typography.com: https://cloud.typography.com
Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Font Awesome: https://maxcdn.bootstrapcdn.com
บอก Google ว่า AMP ของเราคือหน้าไหน
ใส่ tag link เข้าไปในหน้าเว็บปกติของเรา เพื่อเป็นการบอกว่า amp เราคือ url ไหน (แก้ url ใน href ด้วย)
<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>
นอกจากนั้นในหน้า amp ก็ใส่ tag link เข้าไปบอกด้วยว่า อันไหนคือ link หลักของเรา
<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>
Validate AMP ว่าใช้งานได้มั้ย
มีอยู่ 4 วิธีครับ
เข้าหน้า AMP แล้วเปิด Developer tools ใน Chrome ขึ้นมา เลือกหน้า console ถ้าขึ้นแบบนี้แสดงว่าใช้งานได้ ถ้ามี error chrome ก็จะบอกว่าให้เราไปแก้อะไรบ้าง
2. Validate ผ่าน https://validator.ampproject.org/ อันนี้เจ๋งตรงจะบอกเลยว่าต้องแก้บรรทัดไหน
3. ลง extension Support Chrome และ Opera ครับ
4.ใช้ command line tools วิธีการลง npm install -g amphtml-validator
npm install -g amphtml-validator
เวลาใช้งานก็สามารถพิมพ์ คำสั่งข้างล่างได้เลย
amphtml-validator https://www.ampproject.org/
Extended components
ด้วยความที่ AMP มีข้อจำกัดเยอะมากเรื่อง embed script ทำให้เราไม่สามารถใส่ javascript ลงไปได้ แต่ถ้าต้องการใส่ พวก Twitter Facebook Youtube ลงไปจะทำยังไงหละ AMP เลยมีสิ่งที่เรียกว่า Extended components อยู่ โดยเป็น tag ที่ AMP allow ให้ใช้ได้ วิธีการใช้คือ เรียก script ที่ต้องการใช้เช่นในตัวอย่างคือ Youtube
<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>
หลังจากนั้นก็เรียก ผ่าน component แบบนี้ได้เลย
<amp-youtube
data-videoid=”mGENRKrdoGY”
layout=”responsive”
width=”480″ height=”270″></amp-youtube>
ซึ่ง Extended ยังมีอีกมากมายตามไปดูได้ที่ https://www.ampproject.org/docs/reference/extended.html
รอ Google มาเก็บ
หลังจากที่ เช็คแล้วว่า AMP ของเราทำงานได้ ก็รอแค่ Google มา index เว็บ ซึ่ง เราสามารถดูได้ว่า Google มา index แล้วหรือยังจาก Search console https://www.google.com/webmasters/tools/
ดูเพิ่ม
https://www.ampproject.org/
สำหรับผู้ใช้ WordPress
ตอนนี้ทาง WordPress ก็มี Plugin ที่ทำให้เว็บ Blog ของเราสามารถรองรับ AMP HTML ดังกล่าวได้ โดยเราสามารถเข้าไปโหลด Plugin https://wordpress.org/plugins/amp/
หลังจากที่เราติดตั้งและ Activate แล้วเราสามารถเรียกหน้าที่เป็น AMP ได้โดยการพิมพ์ ?amp=1 ตามหลัง Permalinks ของเราได้เลย แต่หน้าที่ทาง Plugin ให้มานั่นจะเป็นหน้าโง่ ๆ ธรรมดาที่มีบทความ เราสามารถที่จะเข้าไปแก้ไขหน้าที่แสดงได้โดยการเข้าไปแก้ไฟล์ที่ชื่อว่า template.php โดยตรงแล้วอัพโหลดกลับเข้าไปที่เว็บของเราได้เลย
จากนั้นเราสามารถบังคับให้มัน Redirect ไปที่หน้าที่เป็น AMP ได้โดยการตั้ง Permalinks ใหม่ได้ โดยให้เราเลือกเป็น Custom แล้วพิมพ์ ?amp=1 ต่อท้ายไป เท่านี้หน้าเว็บของเราก็เป็น Accelerated Mobile Pages เรียบร้อยแล้ว
Plugin ตัวนี้ยังอยู่ในเวอร์ชั่นแรก ๆ เท่านั้น อาจจะมีการเปลี่ยนแปลงได้ตลอดเวลา และอาจจะมีความเสี่ยงในการใช้งาน ศึกษาให้ดีก่อนที่จะเอามาใช้ในเว็บจริง
เช็คความเร็ว
กด F12
เลือกที่ network
กด F5
อ่านเพิ่ม
http://www.thaiseoboard.com/index.php?topic=379969.20

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

รายละเอียด คอร์สสร้างเว็บไซต์

เวอไนน์เว็บไซต์⚡️

สร้างเว็บไซต์ ดูแลเว็บไซต์

กดถูกใจ เป็นกำลังใจให้เรา 😍

ขอบคุณน๊าา 🥰

การแสดงผล Search แบบมี AMP

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

Categories

code