Google AMP 教學懶人包:網頁體驗將成為手機搜尋排名關鍵!

瀏覽數: 39760 | 更新日期: 2023-08-01 14:49:19

Google AMP能夠加快行動頁面加載速度|鯊客科技SEO優化公司

Mobile SEO中,我們提到使用行動裝置上網的流量已經超越桌機,這也意味著Google等搜尋引擎將開始著重行動裝置的使用者體驗。

Google除了推出25條行動網站設計寶典之外,也積極推廣「AMP加速行動網頁」計畫!

AMP是什麼?接著看下去😍

這幾年最重要的SEO優趨勢就是:網頁速度Pagespeed安全性問題https行動裝置優先Mobile-first

行動裝置的使用情境經常是:突然想到什麼,便直接打開搜尋引擎輸入關鍵字找答案,追求方便及快速!

今天就是要針對「行動裝置」的使用者,告訴你如何透過AMP提升行動頁面的載入速度,讓行動用戶獲得更好的使用者體驗的同時,也能間接性地提高SEO自然排序、轉換率




🆕 2022 更新:Google AMP 還有必要做嗎?

AMP 隨著網頁體驗價值提升,不再獨佔行動搜尋排名

根據 Google 聲明:「我們宣布自 2021 年 5 月起,網頁體驗信號將成為決定排名的依據之一。新的網頁體驗信號結合了網站使用體驗核心指標和現有的搜尋服務信號,包括行動裝置相容性、安全瀏覽、HTTPS 加密和插頁式廣告指南。」

此外,原先獨佔行動搜尋排名的 AMP 網頁的影響也削弱,自 2021 年 5 月後,非 AMP 內容也能顯示在行動版「焦點新聞」功能中。

也就是說,只要擁有高品質的網頁體驗,都有機會出現在搜尋結果前三名,無論該網頁使用的是 AMP 或其他網頁技術。

但這也並非意味著 AMP 網頁不再具有價值,筆者認為,對於新聞媒體、新知網站、論壇等較即時性的內容平台而言,AMP 網頁仍佔據極高的地位,畢竟對於即時新聞,越快速方便的使用者瀏覽體驗更佳。

📝補充資料來源:

Google 搜尋中心:Google 搜尋服務導入網頁體驗的時機點


💡 2019.8 更新:amp-script: AMP ❤ JS

AMP官方Blog釋出最新消息,現在可以使用 <amp-script> 在AMP頁面上加上你專屬的Javascript,且仍能維持超極速的載入體驗,不必再受限之前的JS格式,趕緊試試看吧!

📝補充資料來源:

(1) AMP Blog官方聲明:amp-script: AMP ❤ JS

(2) 使用<amp-script>教學指南:Add custom JavaScript to AMP pages with amp-script




一、Google AMP是什麼

AMP的完整名稱是:Accelerated Mobile Pages,意思即為加速行動網頁」,目的是提升行動裝置對網站的存取速度。

AMP即是透過「規範HTML框架」、「限制JavaScript」、「Google高速緩存」這三種要素,縮小網頁檔案、縮短傳輸時間、降低頁面載入時間。

只要透過「行動裝置」搜尋時,發現網址前面顯示一個閃電符號⚡️即屬於AMP網頁,通常優先出現在排序前幾名,甚至讓用戶點擊進去等不到一秒,就能看到網頁內容。不僅提高點擊率,也降低了因網頁載入太久的跳出率。

Google AMP是什麼-鯊客科技台北SEO優化公司Google AMP是什麼範例-鯊客科技台北SEO優化公司

(圖片說明:只有透過行動裝置搜尋才會出現AMP符號,Wordpress網站可以裝AMP掛件,客製化廠商就必須進一步詢問。)


構成一個Google AMP網頁有三大要素:AMP HTMLAMP JSAMP Cache。

1. AMP HTML

HTML一樣是描述網頁所用的標記式語言。然而,為了確保其網頁內容的可信度,會限制一般HTML的部分功能。使時必須遵守一套嚴謹的格式,例如文本格式、圖像、影像、廣告等都會有一定的格式。

2. AMP JS

是一套JavaScript庫,用不同步的方式加載所有外部資源,其目的是要確保AMP HTML能夠正確且快速地顯示。不僅如此,如果使用的瀏覽器只支援普通HTMLAMP JS也能支援AMP HTML的專屬功能。

3. AMP Cache

Google搜尋引擎會先快取並緩存AMP頁面,在緩存的同時會加強網頁性能,已加快頁面加載的速度。也就是說,用戶在搜尋引擎中點擊AMP網頁時,實際上存取的是最佳化後的快取頁面



二、AMP的優點

在了解AMP如何運作後,接下來將介紹AMP的三項優點:

AMP網頁優點對SEO影響-鯊客科技台北SEO優化公司


1.   提升使用者體驗UX

如前文所述,在資訊唾手可得的情況下使用者要求的不只是精準的資訊,更要快速且便利。若使用者在瀏覽網站時獲得良好的使用者體驗,也會增加使用者回流的機率。

2.   提升SEO成效

AMP的主要是為了解決網頁載入速度過慢的問題,不僅如此,以AMP網頁容易出現在搜尋結果前幾名看來,點擊率(CTR)的提升也能間接性地影響SEO排序。

3.   適合新聞媒體、內容經營者

行動裝置瀏覽比例增加,為了降低使用者因等候而分心跳出的機率,AMP對於內容經營者來說是相當重要的技術,一秒內立即載入對於資訊爆炸時代來說是非常有優勢的!



▍三AMP的疑慮

然而,在實際使用過AMP後,也有一些使用者表達了他們對AMP的疑慮,甚至決定暫時不使用AMP:

1. 流量都被Google偷走

還記得我們在介紹AMP的三大要素時有提到其中一點為「AMP Cache」。

Google會先快取並緩存,以加快頁面載入速度,但當使用者點擊AMP網頁後,實際上進入的是「Google快取的頁面」。

圖示說明:AMP頁面快取

amp頁面及原始網頁的網址比較


💡2019.8更新:Google solution: Signed Exchange

由於有眾多用戶反應AMP頁面為什麼不是自己的網址名稱,因此Google於2019年4月提出AMP能使用自訂網域的解決方法:Signed Exchange

這項新的技術能在使用者點進AMP網頁後,瀏覽器顯示自有網域URL,不會被強制加上「google.com/amp/」。

AMP signed exchange-鯊客科技台北SEO優化公司

這項消息一出也讓業主們鬆了一口氣,不用再擔心AMP網頁分散流量、網頁資安及影響品牌形象的風險。

目前Cloudflare也針對AMP推出「AMP Real URL服務」,讓所有用戶都能免費使用。

只是目前Signed Exchange技術還在測試階段,未來是否會普及使用,只能持續等待進一步訊息了。

📝補充資料來源:

(1) Google官方聲明:Instant-loading AMP pages from your own domain

(2) Signed Exchange解釋:Signed HTTP Exchanges

(3) 使用Signed Exchange教學指南:Serve AMP using Signed Exchanges


2. 不易回到原始網站

如果使用者想要進入原始網站(非AMP快取網頁)的話需要多按幾個按鈕才行。

進入AMP網頁後,點擊頂部標有原網址(如圖顯示cnn.com)時並不會跳轉回原網址,使用者必須先點擊「超連結」符號,再點擊跳出來的網址才會連結到原始網站。

許多企業端或是發布者認為這豈不是多此一舉,也認為實際點選超連結按鈕回到原始網站的使用者少之又少。

amp頁面需要點擊特殊符號才會顯示原網址



補充:AMP頁面導流回官網小技巧

鯊客在發現這個問題後,就主動在AMP頂端加上鯊客Logo,並且加上CTA引導點回官網,就可以成功引流囉!


AMP網頁導流回到官網教學技巧1-鯊客科技台北SEO優化公司AMP網頁導流回到官網教學技巧-鯊客科技台北SEO優化公司


3.  AMP不支援JS,因此只適合部落格文章頁面

隨時跨裝置瀏覽的比例增加,為了降低使用者等候而分心跳出的機率,AMP對於內容經營者來說是相當重要的技術,一秒內立即載入對於資訊爆炸時代來說是非常有優勢的!

鯊客科技SEO優化公司-AMP測試工具





▍總結


AMP確實會加快行動版頁面的加載速度,然而發布者應該依照各自需求去評估是否使用Google AMP,畢竟要使用的話勢必要取捨其中幾項功能限制,或是委託有經驗的網站服務商,才不會做出來的成效不如預期!

➠ 深入了解AMP:《如何在 Google Ads 中使用 AMP
➠ 立即檢測是否屬於AMP網頁:Google AMP測試工具


💡點擊按鈕看更多行動網站優化教學:
行動網站設計電商網站設計
行動網站SEO行動網站檢測


若對於Google AMP或是SEO網站設計有興趣,歡迎聯絡鯊客,將提供最專業的SEO教學協助及顧問諮詢

你可能也會喜歡
joy
Joy

行動力趕不上想像力的傢伙

鯊客SharkTech-自經營品牌服務

poshme 茶茶茶-ThreeTea
茶農、焙茶、茶藝,同時具備三種身分優勢,茶茶茶讓消費者能夠直接接觸台灣茶,瞭解台灣茶道,並將高級茶帶入日常。茶葉、山坡、以及植木,傳遞的是茶葉本質。Three tea融合成Threa,三茶一體。
mabao 媽寶補給站-Mabao
在資訊爆炸的時代,過多的孕期育兒資訊反而是無用的雜訊,本站希望將親切、白話、實用的媽媽及寶寶的照顧資訊,補給予社會大眾,在獲得充足的知識養份後,進而做最適合的決定。有用的媽媽寶寶資訊,轉變為己身的知識,做出適合的決定,來媽寶補給站就對了。
beshe BeShe一個專為女性著想的網站
一個專為女性著想的字媒體網站,分享女性愛美相關知識。
poshme POSHME美甲、美睫沙龍POS系統
免安裝、免下載的網頁收銀POS系統。可以幫助小工作室也可以擁有專業的客戶管理、記帳報表、業積報表等功能,成為你的開店小幫手。
ezbow EZbow
EZbow由一群金融與科技業專業人才組成, 分享並傳遞專業的知識,打造Fintech人才交流及學習平台, 提供最新以及熱門的金融科技議題、產業趨勢、關鍵技術講座等, 滿足求職志願者研習、社會新鮮人進修、中高階主管鑽研的各種需求。 跟著EZBow一起搭上Fintech的趨勢列車!