什麼!!Google 於本週宣布 2016 2/24 發布AMP網頁 於搜尋結果頁(SERP) – Google Offical Blog
我們來看看2016一開工 Google 已經緊鑼密鼓的進行了哪些AMP網頁項目
- Google 正在測試搜尋頁的AMP版本
- Google 已於1/20將AMP 錯誤報告整合進Search Console 網站管理員工具
AMP 網頁 對Google 搜尋有甚麼樣的衝擊?
這是Google搜尋頁面的 AMP 版本，AMP 網頁會出現在搜尋Bar 最下方!! 而且採用結構化資料的呈現方式。
如左圖手機版搜尋下方會出現top stories，可以左右滑動來查看有那些文章，點開來後，會直接在Google 搜尋頁面展開(速度會非常快，並且可以在1秒內打開。)
先來看一段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 網頁 <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.williamlion.tw/amp-html/amp/
待續…
