Pro Yearly is on sale from $80 to $50! »

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

C8f411867882d122213cf3a14c03898e?s=47 jiimmysu
October 31, 2016

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

這年頭許多人都把內容放在網路上,但瀏覽時有許多問題…
人們每天獲取資料的兩大地方,Google和臉書,則各提出了別種解決方案,他們從網頁「打開」的流程就開始處理…
一、體驗 AMP 神蹟
- AMP 為什麼可以這麼快?
- 如果你用 wordpress ,恭喜你!
- AMP 自己的網頁自己改
- 一開始跟一般現代網頁差不多
- 先了解什麼叫 AMP HTML 規範
- AMP HTML 規範 – css 範例
- AMP HTML 規範 – 圖片範例
- AMP HTML 規範 – 放 Youtube 範例
- 那「我們的優酷」要怎麼放在AMP網頁內呢?
- AMP 製作流程 – 等待審核
- 看到這裡,也許開發人員會說…
- AMP 學習流程 – 偷吃步
二、體驗 Facebook Instant Articles 神蹟
- 舒適的閱讀版面
- Facebook 廣告會出現在即時文章裡面
- 相關文章功能(人氣文章與地區人氣文章)
- FB 即時文章為什麼可以這麼快?
- FB 的互動功能屬性
- 申請 Facebook 即時文章
- 如何提交即時文章的文章?
- 百度 MIP - 標記語言與瀏覽內容優化大戰,微軟跟 YAHOO 又缺席了…
三、要做的理由
- 不要做 AMP 的理由 - 技術理由
- 不要做 AMP 的理由 - SEO
- 不要做的理由 – 從使用者面來評估
- 不要做 AMP 的理由 – 網路上的論點

http://jimmysu.logdown.com/posts/1061888-google-amp-and-facebook-instant-articles

C8f411867882d122213cf3a14c03898e?s=128

jiimmysu

October 31, 2016
Tweet

Transcript

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

  2.  資料在手機或某些裝置上看起來很不舒服  各種惱人的蓋板廣告  各種讓人出戲的文章內廣告、  網頁上掛的插件太多,影響網頁開啟速度  影音自動撥放造成干擾

     網頁的載入時間比人看完網頁資料的時間還久  用舊裝置或舊軟體上網,宛如次等公民
  3. Microsoft edge (Win10) Firefox Safari (iOS) 生命會自己找到出路 或是有人會用…

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

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

  6. None
  7. 1.用手機的網頁瀏覽器或 App,開啟 Google 2.搜尋以下任一關鍵字  Mars  cdn 選擇 

    英文單字+urban  解除 line 被封鎖 3.找到有閃電圖案的網頁,點進去 4.Magic !
  8. 先討論為什麼網頁會慢? 因為網頁上太多降低效能的雜物,或是 code 寫得不好  html 與 css 寫法造成瀏覽器 render

    畫面時經常重繪或重排  Javascript 寫法造成載入阻塞,或是一些動畫效果吃掉 cpu, gpu, ram 等系統資源  頁面雜物太多 (廣告、 flash、多餘的視覺或動態效果、外部連結檔案…)  主機頻寬、效能太差 AMP html 標準格式減少錯誤發生  統一撰寫的標準,封鎖一堆東西,避免頁面出現雜物的機會  不用擔心,AMP 頁面還是可以放 Google adsense、Google analytics  Google 會將完全符合 AMP 標準的頁面資料丟到 Google 的 CDN - Google AMP Cache 裡面
  9. 1.安裝 AMP 擴充套件 2.把網頁提交給 Google 3.等待網站在Google 中出現閃電

  10. None
  11. <!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="…. 等一下!
  12. 這些 css 不能這樣放 這些 js 不能放

  13.  1.有些 CSS 屬性不准用 Disallowed styles  2.CSS 要嘛寫在網頁裡面 (不要笑,這是從AMP官網截圖的)

     3.要嘛用 AMP html 格式包起來 <style amp-custom> {% include "/assets/css/main.min.css" %} </style>
  14. https://www.ampproject.org/docs/guides/amp_replacements 圖片要改成 amp html 規範 <amp-img src="fixed.jpg" width="100" height="103"></amp-img>

  15. <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp- youtube-0.1.js"></script> <amp-youtube data-videoid="影片ID" layout="responsive" width="480" height="270">

    </amp-youtube> Components / Tags https://www.ampproject.org/docs/reference/components
  16. <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe- 0.1.js"></script> <amp-iframe …> </amp-iframe> https://www.ampproject.org/docs/reference/components/amp-iframe

  17.  把網頁丟到 The AMP Validator 看會是 FAIL 還是 PASS 

    將做好的 AMP 網頁提交給 Google  使用 Google search console 的 AMP 報告工具,看看哪些網頁沒通過。  一切成功後,就可以看到您的網頁在 google 搜尋中顯示閃電! 最蠢的就是,search console 裡面還是上面這個提示, 但是網站在 Google 的搜尋結果已經跑出閃電了。 (╯‵□′)╯︵┴─┴
  18. 幹! 選擇要用哪種方案達成AMP 1. 做兩套方案 (一般網頁做一頁,AMP網頁做一頁)  在一般網頁加 <link rel="amphtml" href="path"

    />,讓搜尋引擎知道這頁的 amp 版 本在哪。  在AMP網頁上也要加 <link href="path" rel="canonical">,這樣用電腦打AMP網頁 的網址,會跳回正常電腦版,而不是 AMP 網頁。 2. 和合為一方案  一個網頁同時符合複雜的客戶需求與AMP標準  語畢,哄堂大笑
  19. 1. 將電腦瀏覽器的 UserAgent 設成行動裝置 2. 打開 google 搜尋引擎,任意測試一些關鍵字 3. 找到有

    AMP 的網頁,看他的網頁怎麼寫, 4. 已知某網站有針對 AMP 做處理,檢視原始碼,看看有沒有 <link rel="amphtml" href="xxx" /> <link rel="canonical" href="xxx"> 之類的內容,看他的網頁怎麼寫。
  20. None
  21. 1. 打開手機 Facebook app 2. 尋找以下粉絲專頁  東森新聞雲  風傳媒

     三立新聞網  TVBS 新聞  CNN 3. 找到有閃電圖案的文章,點進去 4. Magic !
  22. None
  23. 行動廣告聯播網,錢會分潤給粉絲團。(可以設定把錢撥到美金銀行帳戶或 Paypal 帳戶)

  24. None
  25. 使用 HTML5 的標準標籤 + FB 的功能屬性 即時文章是來自您網站的文章,但因為託管在 Facebook 上,所以載入速度更快。即時文章需要有網 址(在此稱為「標準

    URL」)才能發揮作用。 https://developers.facebook.com/docs/instant-articles
  26. https://developers.facebook.com/docs/instant-articles/design/interactive

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

  28. 步驟 1 中 較重要的 4 點 1. Connect Your Site

    2. 建立樣式範本 3. 建立文章 4. 探索行動廣告聯播網:讓你的文章成為廣告獲利來源。
  29. 臉書會審查文章是否符合社群守則,所以應該沒機會看到「澳門首家線上賭場上線啦」用這功能

  30. 有些 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 就不符合)
  31. 快速通過審查的密技: 去新聞網隨便找 5 篇老少咸宜的文章來貼 像我是禮拜五晚上送審,禮拜二就一次過關了

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

  33. 1. 將內容提交給臉書即時文章工具 a) 用網頁編輯軟體或任何方式編輯好,自己把 html code 貼到臉書即時文章的文章編輯區 b) 在部落格寫好,丟 RSS

    給臉書即時文章來解析 c) 或是申請 FB 應用程式,用 Wordpress 等 CMS 的擴充套件把網站的文章丟給臉書即時文章。 d) 在自己網站寫好文章,用 FB 即時文章 SDK 把文章丟給臉書即時文章那邊去。
  34. 2. 在臉書即時文章的後台,檢視文章內有那些不對的 code 或多媒體內容。 3. 審核通過之後,網誌發的文章會瞬間跑到即時文章後台(狀態是未發佈 或 已上線) 4. 在

    FB 粉絲專頁貼上要發佈的網誌文章連結, 5. 如果此文章也在即時後台內已上線,那麼您的粉絲專頁上面就會出現帶有閃電的文章。 若此文在即時後台內是未發佈,那粉絲團上就只會出現一則慢吞吞的普通文章。
  35. 百度 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
  36. AMP 自稱能夠提高 15%~85% 的網頁下載速度 華盛頓郵報使用了 AMP 之後增加了 23% 的行動用戶量 Facebook

    推出 Instant Article後,為文章增加 20% 點擊率,減少 70% 跳出率,增加30%分享 時代趨勢、提早佈局、增加經驗 號稱產品有採用最新酷炫技術 (永遠把資源分去做新東西,舊的洞都不補起來)
  37.  所有瀏覽器都看得到 AMP 網頁,完全沒有瀏覽器相容問題….嗎?  官方號稱支援最新兩版的現代瀏覽器 (2 latest versions of

    major browsers)  要另外研究 AMP 的資料格式規範,把網頁內容轉成對應格式  會員登入/購買 的 AMP 相關規範還在開發中,所以購物網站或會員網站暫時無法實做。  今天把 code 寫好,明天就可以看到閃電了? 不行。  把 code 寫好一次,就一輩子不用再去維護了? 才怪。  產品需求是要在網頁上放不符合 AMP 標準的內容,那就破功了。  現在大部分的 AMP 網站都是部落格、字典、百科、新聞網之類的網站  又回到電腦做一套、手機做一套,後端工程師維護兩份程式的老路?  速度慢是因為資料庫跟伺服器的問題? AMP 也難救。
  38.  AMP 對 SEO 有幫助嗎?  依照 Google 搜尋引擎最佳化入門指南,使用者體驗 好的網頁是有機會提高排名的。

     但是 Yahoo 是另一個鬼城,很多在 Google 名列前茅 的網頁,在 Yahoo 不知道排到第幾頁去。還常常跑出 一堆跟關鍵字無關的內容。  可以讓網頁排在第一頁嗎?  事實上…還是有很多沒有 AMP 的網頁排在第一頁。  事實上…有許多 AMP 網頁排在第二頁之後。  AMP 的 Top stories  台灣目前不支援
  39.  客群 / 網站狀況適合嗎?  負能量  FB 跟 Google

    的東西在"大中華市場"預設都是被封鎖的。  目標客戶只會用 Yahoo,你做的這些通通沒用。  花很多時間跟心力,覺得幫使用者省下開網頁的幾秒,但大部分人都看不出來差異在哪。  大家都有聽過網頁三秒原則,但實際上就是有很多又慢又難用的網頁很多人看。  FB即時文章  只會在手機的 FB App 顯示,  用臉書手機版網頁、平板 FB App、電腦,是看不到的。  Google AMP  Google APP 跟手機網頁瀏覽器都可以看到  平板看不到。
  40.  必須將網頁的語法改為符合 Google AMP 的標記或結構化資料,才能讓 Google 好好索 引,會有點麻煩。  部落格的許多設計,都是為了留住訪客而生,諸如導覽列、搜尋框、相關文章工具等等,

    在在提供了友善的使用體驗。同時看完了文章,有所感觸的訪客,可能會想要與作者交 流、留下一些意見,甚或看看其他讀者是怎麼評論這篇文章的。  原始網站精神完全被剝奪,任何一篇文章都成了 Google 這個大農場裡面的作物,雖然 文章原本各自屬於不同的網站,但現在則統一成為 Google 作物的一份子。  當你在搜尋資料時,會樂於看到出現 AMP 標誌的網頁;而如果是經營網站,就不太會 喜歡 AMP 了。  詳全文 http://www.wfublog.com/2016/10/google-amp-mobile-search.html
  41.  開發人員看 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 ,雖然才距離幾個月,臉書有些地方的設定位置已經不同了。