在當今以移動為中心的世界中,快速加載頁面對于滿足用戶需求至關重要。不僅如此,緩慢的頁面速度所帶來的影響與整體收入的下降和頁面被遺棄的增加有關。用戶已經開始期待移動站點的加載速度和桌面版一樣快。事實上,亞馬遜是最大的在線零售商之一,它得出的結論是,即使是在頁面加載速度上一秒鐘的延遲,也會導致年收入減少1.6億美元。
加速的移動頁面(AMPs)正迅速成為如何構建快速加載頁面的標準。使用預渲染,AMPs能夠比標準移動頁面的加載速度快15-80%,而不影響功能。雖然AMP實現的簡易性取決于你的CMS(內容管理系統),但WordPress可以作為一個良好的測試環境去預覽AMP頁面的大概模樣。
注意:本指南的部分假設您已經激活了Yoast 搜索引擎優化插件作為您的WordPress設置的一部分。如果你沒有,你可以跳過引用這個插件的部分——你仍然可以在沒有它的情況下激活AMP功能——但是如果你認真地為你的WordPress站點做搜索引擎優化,那么我強烈推薦這個插件。
步驟1:安裝并激活你的AMP插件(s)
Automattic 的AMP插件被要求啟動AMP功能。這是為了AMP工作需要用到的基本插件。
AMP插件會自動生成所有你的博文兼容的版本,您可以通過附加/放大器功能添加到你的博文URLs的末尾。例如:
注意,只有您的博文——而不是您的頁面——才會與這個基本插件兼容。為了使您的頁面能夠兼容,您需要安裝一個額外的插件(詳細說明)。
一旦您安裝了AMP插件,您就可以添加額外的插件以獲得更大的功能。有幾個免費的選項供您選擇,但我在本指南中使用的是如下:
AMP-加速移動頁面-這個插件的顯著特點包括Google AdSense集成,rel=canonical標簽支持,AMP拖放頁面生成器,以及創建AMP內容的能力,這些內容與標準移動頁面上的內容不同。
使用這個插件的好處之一是它允許你制作網頁、文章和媒體兼容的內容。Yoast插件的 The Glue也可以無縫地確保默認的AMP插件在正確的元數據中拉出。類似于WP插件的AMP功能,它支持AMP頁面的定制樣式,您甚至可以選擇一個定制圖標,改變您的網站的logo在AMP頁面上的樣子。(注意:您必須安裝并激活了Yoast 搜索引擎優化插件,這樣才能讓插件運行。)
第二步:建立 Google Analytics
為了將你的頁面設置為Google Analytics跟蹤,您首先需要找到您的跟蹤ID,登錄到Google Analytics,然后點擊左下角的齒輪圖標來打開管理面板。一旦您從各自的下拉菜單中選擇了帳戶和屬性,點擊屬性列中的“跟蹤信息”。然后,點擊“跟蹤代碼”來查看您的跟蹤ID——ID應該從UA開始。
復制您的跟蹤ID,然后登錄到WordPress。在左邊的導航欄中,您可以使用AMP功能分析并粘貼您的跟蹤ID,在這里輸入“Google Analytics”。然后單擊Save更改。
步驟3:配置插件設置
在這一步中,我將討論在步驟1中提到的Yoast 搜索引擎優化插件的一些基本配置。如果您選擇不安裝這個插件,您可以跳過這一步。
這里推薦的配置將允許您定制加速移動頁面的外觀和感覺,并支持對多種內容類型的AMP支持。
首先,使用Yoast 搜索引擎優化 》 AMP 》 博文 TypesPost。在這里,您可以選擇哪些博文類型應該能夠兼容AMPamp。
在第二個選項卡上,“設計”,您可以定制您的AMP激活頁面的外觀和感覺。應用CSS樣式,定制內容和鏈接顏色,上傳一個定制的AMP圖標,并為沒有與它們相關聯的圖像設置一個默認的圖像。
步驟4:測試/驗證AMP設置
既然我們已經創建了AMP URLs,那么確保它們正常工作是很重要的。如果沒有正確配置,谷歌將不會在搜索結果中顯示它們。雖然這可以防止您展示一個半功能的AMP頁面,但它也可能是許多網站管理員的傷心之處。
幸運的是,有幾個測試您的AMP URLs的解決方案。選擇幾個關鍵頁面,并使用下面的方法測試AMP版本。正如第1步中提到的,您可以附加/amp/附加到標準URL的末尾以查看它。
方法1:AMP測試
在這里刪除您的URL并單擊“Run Test”,然后注意結果(有效/無效)。
方法2:開發人員控制臺
這個選項特別針對那些使用谷歌Chrome瀏覽器的用戶。如果您使用另一個瀏覽器(Firefox、Safari、Microsoft Edge或其他瀏覽器),那么這個方法并不適用于您。
打開Chrome Dev Tools Console(在Chrome菜單中,選擇更多的工具,然后點擊“控制臺”選項卡)并檢查確認錯誤。
如果一切進行地順利,那么驗證就應該是成功的。
方法3:AMP驗證器
將AMP URL粘貼到“URL”字段中,然后單擊“驗證器”。
該工具將會突出顯示任何錯誤,并在HTML中標記它們。
注意:您還可以使用AMP Validator Chrome擴展來查看AMP URL本身的相同結果。
步驟5:為索引提交最重要的AMP URLs
如果在Google Search Console上使用AMP測試,您可以在運行測試并驗證頁面之后點擊“提交到谷歌”按鈕。
或者,如果您登錄到您的Google Search Console賬戶,您可以搜索“提交到谷歌”,并直接在谷歌搜索結果中提交網址:
雖然將AMP頁面提交給谷歌并不是一項要求,但如果它是在內部鏈接或在XML站點地圖中列出的,那么谷歌只會索引AMP頁面。
在搜索界面下,點擊加速移動頁面。
在這里,您將能夠看到您的加速移動頁面中有多少正在被索引,如果有的話,這些頁面有一些關鍵問題。如果您識別出有問題的頁面,您可以使用前面步驟中的工具進行故障排除。
第七步:測試頁面速度
一旦您完成了上面的工作,現在是時候看看努力有什么結果了。通過像WebPageTest這樣的頁面速度工具來運行你的AMP和標準移動頁面,并比較結果:
開始使用AMP !
隨著谷歌加大力度推出移動為先的索引和頁面速度,以成為移動排名的重要因素,在移動流量受到沖擊之前,利用AMP功能變得更加重要。按照上面的步驟,您應該能夠快速輕松地為WordPress站點啟用AMP頁面。
新聞熱點
疑難解答
圖片精選