Google 跟 Facebook 都想讓手機上的網頁變成閃電

GOOGLE 跟 FACEBOOK 都想讓手機上的網頁變成閃電

 資料在手機或某些裝置上看起來很不舒服  各種惱人的蓋板廣告  各種讓人出戲的文章內廣告、  網頁上掛的插件太多，影響網頁開啟速度  影音自動撥放造成干擾
 網頁的載入時間比人看完網頁資料的時間還久  用舊裝置或舊軟體上網，宛如次等公民

Microsoft edge (Win10) Firefox Safari (iOS) 生命會自己找到出路或是有人會用…

則各提出了別種解決方案: 他們從網頁「打開」的流程就開始處理…

Google 主導的開源專案 https://www.ampproject.org/ https://developers.facebook.com/docs/instant-articles

1.用手機的網頁瀏覽器或 App，開啟 Google 2.搜尋以下任一關鍵字  Mars  cdn 選擇 
英文單字+urban  解除 line 被封鎖 3.找到有閃電圖案的網頁，點進去 4.Magic !

先討論為什麼網頁會慢? 因為網頁上太多降低效能的雜物，或是 code 寫得不好  html 與 css 寫法造成瀏覽器 render
畫面時經常重繪或重排  Javascript 寫法造成載入阻塞，或是一些動畫效果吃掉 cpu, gpu, ram 等系統資源  頁面雜物太多 (廣告、 flash、多餘的視覺或動態效果、外部連結檔案…)  主機頻寬、效能太差 AMP html 標準格式減少錯誤發生  統一撰寫的標準，封鎖一堆東西，避免頁面出現雜物的機會  不用擔心，AMP 頁面還是可以放 Google adsense、Google analytics  Google 會將完全符合 AMP 標準的頁面資料丟到 Google 的 CDN - Google AMP Cache 裡面

1.安裝 AMP 擴充套件 2.把網頁提交給 Google 3.等待網站在Google 中出現閃電

<!doctype html> <html amp lang="zh-TW"> <head> <meta charset="utf-8"> <meta content="width=device-width…….">
<script async src="https://cdn.ampproject.org/v0.js"></script> <link href="…. 等一下!

這些 css 不能這樣放這些 js 不能放

 1.有些 CSS 屬性不准用 Disallowed styles  2.CSS 要嘛寫在網頁裡面 (不要笑，這是從AMP官網截圖的)
 3.要嘛用 AMP html 格式包起來 <style amp-custom> {% include "/assets/css/main.min.css" %} </style>

https://www.ampproject.org/docs/guides/amp_replacements 圖片要改成 amp html 規範 <amp-img src="fixed.jpg" width="100" height="103"></amp-img>

 把網頁丟到 The AMP Validator 看會是 FAIL 還是 PASS 
將做好的 AMP 網頁提交給 Google  使用 Google search console 的 AMP 報告工具，看看哪些網頁沒通過。  一切成功後，就可以看到您的網頁在 google 搜尋中顯示閃電! 最蠢的就是，search console 裡面還是上面這個提示，但是網站在 Google 的搜尋結果已經跑出閃電了。 (╯‵□′)╯︵┴─┴

幹! 選擇要用哪種方案達成AMP 1. 做兩套方案 (一般網頁做一頁，AMP網頁做一頁)  在一般網頁加 <link rel="amphtml" href="path"
/>，讓搜尋引擎知道這頁的 amp 版本在哪。  在AMP網頁上也要加 <link href="path" rel="canonical">，這樣用電腦打AMP網頁的網址，會跳回正常電腦版，而不是 AMP 網頁。 2. 和合為一方案  一個網頁同時符合複雜的客戶需求與AMP標準  語畢，哄堂大笑

1. 將電腦瀏覽器的 UserAgent 設成行動裝置 2. 打開 google 搜尋引擎，任意測試一些關鍵字 3. 找到有
AMP 的網頁，看他的網頁怎麼寫， 4. 已知某網站有針對 AMP 做處理，檢視原始碼，看看有沒有 <link rel="amphtml" href="xxx" /> <link rel="canonical" href="xxx"> 之類的內容，看他的網頁怎麼寫。

1. 打開手機 Facebook app 2. 尋找以下粉絲專頁  東森新聞雲  風傳媒
 三立新聞網  TVBS 新聞  CNN 3. 找到有閃電圖案的文章，點進去 4. Magic !

行動廣告聯播網，錢會分潤給粉絲團。(可以設定把錢撥到美金銀行帳戶或 Paypal 帳戶)

使用 HTML5 的標準標籤 + FB 的功能屬性 即時文章是來自您網站的文章，但因為託管在 Facebook 上，所以載入速度更快。即時文章需要有網址（在此稱為「標準
URL」）才能發揮作用。 https://developers.facebook.com/docs/instant-articles

https://developers.facebook.com/docs/instant-articles/design/interactive

 一定要先有一個網站  再設定哪個粉絲團的文章要有即時文章功能 https://www.facebook.com/instant_articles/signup

步驟 1 中較重要的 4 點 1. Connect Your Site
2. 建立樣式範本 3. 建立文章 4. 探索行動廣告聯播網：讓你的文章成為廣告獲利來源。

臉書會審查文章是否符合社群守則，所以應該沒機會看到「澳門首家線上賭場上線啦」用這功能

有些 CMS 的 RSS 中沒有這個標記，所以 FB 即時文章抓不到半篇文章。 https://developers.facebook.com/docs/instant-articles/publishing/setup-rss-feed CMS挑選要訣: 1.
要可以在<head>內加驗證網站的 meta 標記，如 <meta property=“fb:pages” content=“12345678901234 5” /> (痞客邦就不符合) 2. RSS 要符合 FB 即時文章要求的格式。 (Logdown 跟 Google Blogger 就不符合)

快速通過審查的密技: 去新聞網隨便找 5 篇老少咸宜的文章來貼像我是禮拜五晚上送審，禮拜二就一次過關了

臉書後台放了幾則範例讓我們點開來看一下… 編輯人員可能會想 WTF?

1. 將內容提交給臉書即時文章工具 a) 用網頁編輯軟體或任何方式編輯好，自己把 html code 貼到臉書即時文章的文章編輯區 b) 在部落格寫好，丟 RSS
給臉書即時文章來解析 c) 或是申請 FB 應用程式，用 Wordpress 等 CMS 的擴充套件把網站的文章丟給臉書即時文章。 d) 在自己網站寫好文章，用 FB 即時文章 SDK 把文章丟給臉書即時文章那邊去。

2. 在臉書即時文章的後台，檢視文章內有那些不對的 code 或多媒體內容。 3. 審核通過之後，網誌發的文章會瞬間跑到即時文章後台(狀態是未發佈或已上線) 4. 在
FB 粉絲專頁貼上要發佈的網誌文章連結， 5. 如果此文章也在即時後台內已上線，那麼您的粉絲專頁上面就會出現帶有閃電的文章。若此文在即時後台內是未發佈，那粉絲團上就只會出現一則慢吞吞的普通文章。

百度 MIP MIP和AMP技術是相通的，兩者的協議層面和規範層面完全一致，但發現谷歌的AMP有些服務在中國大陸境內用不了，於是才做了自己的MIP。 https://zhanzhang.baidu.com/mip/ Apple News Format Apple 出品的
App，媒體與出版者可申請在上面發布內容，資料為 json 格式。目前此 app 僅限美國地區的使用者使用。 https://developer.apple.com/news-publisher/ https://developer.apple.com/library/content/documentation/General/Conceptual/Apple_News_Fo rmat_Ref/HTMLMarkupforAppleNewsFormat.html#//apple_ref/doc/uid/TP40015408-CH110- SW1

AMP 自稱能夠提高 15%~85% 的網頁下載速度 華盛頓郵報使用了 AMP 之後增加了 23% 的行動用戶量 Facebook
推出 Instant Article後，為文章增加 20% 點擊率，減少 70% 跳出率，增加30%分享 時代趨勢、提早佈局、增加經驗 號稱產品有採用最新酷炫技術 (永遠把資源分去做新東西，舊的洞都不補起來)

 所有瀏覽器都看得到 AMP 網頁，完全沒有瀏覽器相容問題….嗎?  官方號稱支援最新兩版的現代瀏覽器 (2 latest versions of
major browsers)  要另外研究 AMP 的資料格式規範，把網頁內容轉成對應格式  會員登入/購買的 AMP 相關規範還在開發中，所以購物網站或會員網站暫時無法實做。  今天把 code 寫好，明天就可以看到閃電了? 不行。  把 code 寫好一次，就一輩子不用再去維護了? 才怪。  產品需求是要在網頁上放不符合 AMP 標準的內容，那就破功了。  現在大部分的 AMP 網站都是部落格、字典、百科、新聞網之類的網站  又回到電腦做一套、手機做一套，後端工程師維護兩份程式的老路?  速度慢是因為資料庫跟伺服器的問題? AMP 也難救。

 AMP 對 SEO 有幫助嗎?  依照 Google 搜尋引擎最佳化入門指南，使用者體驗好的網頁是有機會提高排名的。
 但是 Yahoo 是另一個鬼城，很多在 Google 名列前茅的網頁，在 Yahoo 不知道排到第幾頁去。還常常跑出一堆跟關鍵字無關的內容。  可以讓網頁排在第一頁嗎?  事實上…還是有很多沒有 AMP 的網頁排在第一頁。  事實上…有許多 AMP 網頁排在第二頁之後。  AMP 的 Top stories  台灣目前不支援

 客群 / 網站狀況適合嗎?  負能量  FB 跟 Google
的東西在"大中華市場"預設都是被封鎖的。  目標客戶只會用 Yahoo，你做的這些通通沒用。  花很多時間跟心力，覺得幫使用者省下開網頁的幾秒，但大部分人都看不出來差異在哪。  大家都有聽過網頁三秒原則，但實際上就是有很多又慢又難用的網頁很多人看。  FB即時文章  只會在手機的 FB App 顯示，  用臉書手機版網頁、平板 FB App、電腦，是看不到的。  Google AMP  Google APP 跟手機網頁瀏覽器都可以看到  平板看不到。

 必須將網頁的語法改為符合 Google AMP 的標記或結構化資料，才能讓 Google 好好索引，會有點麻煩。  部落格的許多設計，都是為了留住訪客而生，諸如導覽列、搜尋框、相關文章工具等等，
在在提供了友善的使用體驗。同時看完了文章，有所感觸的訪客，可能會想要與作者交流、留下一些意見，甚或看看其他讀者是怎麼評論這篇文章的。  原始網站精神完全被剝奪，任何一篇文章都成了 Google 這個大農場裡面的作物，雖然文章原本各自屬於不同的網站，但現在則統一成為 Google 作物的一份子。  當你在搜尋資料時，會樂於看到出現 AMP 標誌的網頁；而如果是經營網站，就不太會喜歡 AMP 了。  詳全文 http://www.wfublog.com/2016/10/google-amp-mobile-search.html

 開發人員看 AMP https://blog.othree.net/log/2016/10/14/acclerated-mobile-pages/  導入 AMP 的 10 大迷思
https://paulbakaus.com/2016/10/13/debunked-10- misconceptions-about-amp  Google 官方相關 AMP 說明 https://support.google.com/webmasters/answer/6328309  百度MIP技術強勢來襲帶你的網頁飈起來 https://kknews.cc/tech/yaq5b9n.html  行銷利器多一項，來看FB Instant Articles怎麼應用 https://www.smartm.com.tw/article/32323937cea3  2016/2 有位 Google 主管宣稱 AMP 還不是排名的主要指標 http://searchengineland.com/google-amp-not-yet-a-search-ranking-signal-243498  網路行銷達人介紹這兩項技術 http://www.9i543.com/22831/tech  【教學文】如何在 Wordpress 設定 Instant Articles | 企業號航行網誌 https://www.enterpr1se.info/2016/04/how-to-add-instant-articles-support-in-wordpress/ 幾乎是 step by step ，雖然才距離幾個月，臉書有些地方的設定位置已經不同了。

Google 跟 Facebook 都想讓手機上的網頁變成閃電

Google 跟 Facebook 都想讓手機上的網頁變成閃電

More Decks by jiimmysu

Other Decks in Technology

Featured

Transcript