amp html 加速版行動網頁

什麼!!Google 於本週宣布 2016 2/24 發布AMP網頁 於搜尋結果頁(SERP) – Google Offical Blog

我們來看看2016一開工 Google 已經緊鑼密鼓的進行了哪些AMP網頁項目

  1. Google 正在測試搜尋頁的AMP版本
  2. Google 已於1/20將AMP 錯誤報告整合進Search Console 網站管理員工具

AMP 網頁 對Google 搜尋有甚麼樣的衝擊?

這是Google搜尋頁面的 AMP 版本，AMP 網頁會出現在搜尋Bar 最下方!! 而且採用結構化資料的呈現方式。
如左圖手機版搜尋下方會出現top stories，可以左右滑動來查看有那些文章，點開來後，會直接在Google 搜尋頁面展開(速度會非常快，並且可以在1秒內打開。)

amp html 加速版行動網頁 amp html 加速版行動網頁

先來看一段AMP 網頁 影片實際在Google 搜尋頁面的呈現方式

誰可以使用AMP 網頁?

只要網站開發出另外的AMP 網頁 版本就可以受惠

注意:不是將原本手機版網頁改成AMP 網頁唷，是另外打造一個版本，並且依照官方AMP 的規格下去寫。

詳細請看:Google 搜尋指南：AMP 網頁

那要如何打造出專屬行動版本的AMP 網頁 呢?

我們將分成三部分講解

  • AMP HTML
  • AMP JS
  • AMP CDN

AMP 網頁 <head>區塊

  • 首先你需要html標籤
    <html amp> 或者 <html ⚡>
  • 編碼一定要採用utf-8
    <meta charset=”utf-8″>
  • 因為針對行動裝置所以要加上veiwport
    <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
  • 需要在每個AMP 網頁頁面上加上 參照網址指向原本非AMP 網頁版本的網址  “AMP 網頁 → 原始HTML”
    <link rel=”canonical” href=”/orignal.html”>
  • 相對的原本的HTML 需要指向回去。 “原始 HTML → AMP 網頁”
    <link rel=”amphtml” href=”/orignal/amp.html”>
  • 專屬AMP 網頁的js檔案，裡面是啥不清楚，放就對了。
    <script async src=“https://cdn.ampproject.org/v0.js”></script>
  • 最後是一長串 inline StyleSheet

    <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>

基本上，這幾個元素就可以先建置出基本的AMP 網頁，使用Chrome F12 來檢查匯出現 Powered by AMP ⚡ HTML 的樣式代表成功了。

  amp html 加速版行動網頁

AMP 網頁 <body>區塊

基本上都要採用HTML5的標籤，這是AMP 特有的標籤，其他HTML5可用的標籤請參考AMP 網頁 TAG

裡面就屬img 標籤比較麻煩了，因為是需要去另外寫一隻程式將img 轉成amp-img

原本HTML 標籤 AMP 網頁 標籤
<img> <amp-img>
<video> <amp-video>
<amp-fit-text>
<amp-font>
<amp-carousel>
<amp-anim>
<amp-twitter>
<amp-youtube>
iframe <amp-iframe>
<amp-image-lightbox>
<amp-pixel>
<amp-audio>
<amp-lightbox>

特例AMP 網頁

  • 廣告格式如:Adsense
 <amp-ad width=300 height=200
 type="adsense"
 data-ad-client="ca-pub-8125901705757971"
 data-ad-slot="7783467241">
 </amp-ad>

懶人包AMP 網頁，使用Wordpress 架站的有福了，automatic 有打造專屬WP專用的套件https://wordpress.org/plugins/amp/

安裝好啟用後，只要在文章網址後面打上 /amp/ 就可以看到 AMP 網頁的版本了
https://www.williamformosa.com/amp-html/amp/

amp html wordpress 套件

待續…