手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

手機瀏覽改變了網路使用狀態,這一點不只是手機裝置或是平台間的戰爭,現在更可能影響企業生存的關鍵! 特別是針對目前PC桌上型電腦呈現飽和,還有"強者既強、弱者也難有早期進入優勢“的一個起步就輸的問題。

現在、後進者、起步較慢的朋友們,你該好好抓住這一波即將襲來的趨勢大浪了!  誰能趁勢抓住這一波,誰就有可能透過手機的成長浪頭,來場豬羊變色的大翻盤喔!

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

這個關鍵要點就是"習慣" !  而它背後有個更重要的技術,那就是“速度" !

我們越來越受不了一個手機開啟某個網站,等等等…. 網頁怎麼還是開不起來,更別說那些根本沒有針對手機瀏覽最佳化的使用者體驗,現在這類網站服務,除非"只有這一家能看的到、買的到“,不然我們通常都是馬上關掉另尋對手機更友善的網站來選用,對於內容產出為主要瀏覽服務提供者,這一點更是受到網友重視的關鍵。

為了能讓手機使用者能有更佳的瀏覽體驗、特別是"速度" !  現在三大龍頭不約而同推出本質相同但著重技術要點不同的服務推出市場了!  (不過、這篇我只談其中兩大龍頭的,至於蘋果的那一套~ 根本沒多少人用啦~ 看看就好~)

Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術 將是值得你好好睜大眼睛搞清楚的重要玩意喔~~

三個技術DEMO影片

Distributed Content Demo

這一篇除了讓你知道這兩家技術將帶來的重要影響是什麼之外,我也透過我自己的部落格、這個wordpress 開放CMS架構,實際"實作“以最低技術需要的方式,分別將外掛裝上並未來等待上線後再來分享相關影響數據給大家參考了。

我們就先從 Accelerated Mobile Pages 這Google主推的新技術開始聊起吧~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

如果你對 AMP 是什麼不清楚,下面兩個官方資料可以參考:

Accelerated Mobile Pages Project 官方網站

Google 搜尋指南:AMP 網頁 介紹

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

基本上 AMP 是使用Google自己優化過的 HTML 語法,將運算效能和網路頻寬較低的手機瀏覽器給予最佳化的讀取呈現。

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

並且google提供自家既有資源,全球各大機房主機,讓部分網站檔案都有能緩存機制,有點類似我們熟悉的CDN網路服務,而目前這個AMP技術的支援,一般自己申請CDN服務,價格可是部便宜的,但目前google可是免費的喔~   怎麼能不好好利用呢~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

更重要的還有這!!  SEO手機搜尋結果的"大優惠政策" 啊!

手機自然搜尋結果排列,目前google擺出殺手鐧,那就是若你的網站有提供AMP技術,並且網頁中的程式語法能符合google的各項規範,搜尋呈現上你會有非常好的版位和視覺效果,將會大大的增加排名露出的機會以及網友的點閱率!

瞧~  上塗有四大類型的呈現方式,還都是第一頁第一欄的呈現方式,是不是很吸引目光呢?

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

特別是目前以內容為網站經營主軸的朋友,這一個AMP技術更是非常需要重視的規範,目前手機自然搜尋結果可是已經和PC桌上電腦區分開來,原本也許你在PC上的排名結果不是很好,但現在可以單靠手機來扳回一成喔! 手機的使用族群越來越多、使用閱讀習慣也和PC的不太相同,好好學習手機最佳化體驗,將對你的內容提供有非常正向的幫助的!

Accelerated Mobile Pages Project 官方介紹影片

接下來我就來推薦我使用的WordPress Plugin外掛服務給大家參考看看!

如果你不是使用CMS這類開放架構的架站程式,那就請你自行研究程式語法要符合相關的規範有哪些了~

網頁程式示範說明 Create Your AMP HTML Page

這個AMP官方網站有詳細的說明文件可以參考!

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

我目前使用這個 WordPress Plugin 官方外掛
Enable Accelerated Mobile Pages (AMP) on your WordPress site

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

這個官方外掛簡單又好用! 只要裝好~ 一切搞定!!  靠~ wordpress真是太貼心了啊~~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

裝好之後原本的網址(如上圖) 會多出一個路徑/amp (如下圖) 。

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

基本上每一篇文章都會有單獨的支援AMP技術,但何時google會將他完全收錄到他的伺服器,還得多等幾天觀察就是,另外還有個小地方需注意,為了在搜尋結果上有比較好的縮圖呈現,請記得要準備 縮圖規格 height="400″ width="800 這大小的圖給他,不過、目前我在官方這外掛上沒看到文章編輯哪裡可以指定這圖的參數就是~

我是先直接給他WP的標準縮圖指定這規格的大小,看看google能不能自動認得,未來有新的後續心得再來補充。

接著是這 Facebook Instant Articles 有部分網站稱呼為: 原生閱讀器  (FB網站的稱呼: 即時文章)

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

Instant Articles 使用 RSS 和標準的 HTML 標籤,與AMP的發展不太相同,原本只提供和 Facebook 簽署過協議的網站,這部分大多為新聞媒體網站,最近也開放給一般內容網站,但這服務目前需要透過粉絲團申請使用,並且也只在FB的手機APP才會有特殊的加速效果!

但~ 說實在的~~  FB Instant Articles 即時文章 效果真的很不錯啊~~ 瞧瞧這即時使用實際狀況影片吧~

Facebook Launches Instant Articles

這個我裝的外掛是這:

Instant Articles for WP

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

如果你有用其他家的CMS系統,可以參考這個官方支援說明網頁

其他CMS平台請參考這個網頁

但其他平台要自行開發的朋友,就看官網的說明文件嚕~
即時文章 官方開發說明網頁

wordpress裝好外掛後,這個外掛不像AMP甚麼都不需要設定,他要做的相關步驟還滿多的~ 像是你得先有FB開發用的"畫布"相關ID~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

原本我就有使用FB的一些粉絲專頁經營用開發工具(雖然甚麼都沒寫出來過 哈~), 但這時這組當時申請的APP ID和相關密碼就能馬上派上用途了~~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

將FB開發後台的這組"一定“要提供給他!

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

這是必要步驟的第一步!

FB Instant Articles 官方說明網頁

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

接著再到  FB Instant Articles 官方申請登入網頁 登入選擇要連結的粉絲頁為哪一個~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

基本上基礎重要相關連結設定目前完成!

若安裝上還有細節不清楚,我推薦下面幾個網友寫的文章教學給各位參考:

如何在 WordPress 設定 Instant Articles

Instant Articles for WP 自動同步部落格文章到Facebook 粉絲團

如何申請 Facebook Instant Articles 替網站增加觸及率

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

接下來還有一堆~~~ 的細節要做(FB Instant Articles 還滿煩人的~ 請多點耐心喔~)

因為我這篇用的是wordpress的支援外掛,安裝好並將上面提到的設定做完後,未來你在WP中發布的文章,會自動同步一份到FB粉絲專頁的即時文章當中,但之前舊的文章並不會,請你找個至少10篇文章去按一下"編輯"再"另存發佈",將文章重新發佈,這時外掛就會一併丟到FB Instant Articles去了~

FB Instant Articles 還需要進行審核功能,而其中有個條件就是需要至少10篇有效文章! 所以這點不要忘記做喔~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

下方還有幾個功能設定可以先順道完成一下,其中裝好外掛好,FB Instant Articles會有一個專門的RSS,和一般部落格的RSS並不相同,其中裏頭送出去的資料多很多,一定是裝好 Instant Articles for WP 才會出現的!

你可以透過這特定網頁連結檢查看看是否可以看的到程式原始碼資料,確認外掛執行沒有問題。

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

一切申請規定完成後再來就是等待幾天FB的審核作業了。

(到目前 2016/06/07 我的部落格還沒通過,後續等有新的進度我再來補充紀錄。)

最後、要說說"成效追蹤“的部分了!!

目前 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術,雖然官方都有直接支援相關外掛,但這些外掛居然都不支援分析追蹤如我們習慣使用的Google Analytic 網站分析 服務,真是有夠扯的~~  當然、也許是對於流量"歸屬“這上頭有些爭議性,AMP (Accelerated Mobile Pages) 雖然基本上是抓google cache伺服器緩存中的資料,但Facebook 的 IA (Instant Article) 即時文章 根本上是用FB的相關主機,和你的網站沒有直接的關聯性(其實目前兩大技術都走自家主機和流量在使用)。

但內容文章畢竟是自家的~~  所以還是靠些"技巧"來"併入計算"一下吧!!

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

AMP 這部分得靠這個 AMP Analytics 非官方開發外掛 來幫幫忙~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

AMP Analytics 非官方開發外掛 這設定只有一個地方,就是把你的GATC編號 UAXXXX 這組設定進去就OK了~

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

AMP產生的內容網頁就會多出上面這些程式碼,說老實話,這樣的追蹤方式並不是我個人認為最好的方式,但目前我也還沒找到更佳的做法,Google AMP的伺服器基本上擋掉很多的JS語法,官方文件說未來會支援GA,但目前為止尚未見到正式的辦法,所以暫時先用這個不是很好的辦法頂一下吧~

而 FB的Instant Articles for WP 官方外掛這次倒是大方多(大概老偷人家內容流量良心發現了),官方外掛居然允許你加上GATC來記錄相關流量。

但GA報表本身不能分辨那些是 Instant Article 帶來的,你需要改一下GATC代碼。

請在這行GATC:
ga(‘send’, ‘pageview’);
後面加上:
ga(‘set’, ‘campaignSource’, ‘Facebook’);
ga(‘set’, ‘campaignMedium’, ‘Social Instant Article’);

這兩行的意思和自己帶UTM參數是相同道理,但因為這不是連結,所以從文章中直接帶上設定,當FB有撈到這篇文章就送一組流量標籤給GA去做紀錄。

手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術

這樣兩個手機特別服務,GA網站分析 報表就能有資料紀錄下來了!

這篇文章有點爆長的~ 希望你沒看到睡著了(或是都沒看懂….)  最後、再提供兩篇我覺得值得閱讀的文章給大家參考。

延伸閱讀:

Facebook 搶佔流量,WordPress 插件直上 Instant Articles

揭密 Google 秒開技術:如何讓網站瞬間下載完畢

 

吳 天元

溫厝的543大家長,平常沒時就愛碎碎唸,標準的阿宅。 平時就愛看電影、研究網路行銷,有時間當然也愛陪伴著家人! 總希望世界和平之外,更希望能看看外星人到底長啥模樣了!

在 “手機瀏覽 速度將是重要關鍵 Google 主推 AMP (Accelerated Mobile Pages) 和 Facebook 的 IA (Instant Article) 即時文章 兩個重要技術” 有 2 則留言

  1. 你安裝的 Instant Articles for WP 很多問題,很多人在設置開頭幾步就卡了,問題一籮筐,什麽問題隨便谷歌一下就知道了,我也折騰了好久。到最後終于找到了一個好用的外挂,可是中文字出現亂碼,你用 Instant Articles for WP發布的文章沒亂碼嗎?

  2. 我目前沒有亂碼,但外掛不是很"聰明"是真的~ 一堆圖檔格式老有錯誤訊息~ 但還好! 目前還是有幾篇文章通過,我也希望官方的外掛可以早點解決這些問題啊~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *