如何使用 Elementor 創建與 AMP 兼容的網站
已發表: 2020-10-21現在世界是移動的。 它成為我們越來越依賴互聯網的地方,我們在大多數情況下都在智能手機上使用它。 回顧 2019 年,全球有 43 億互聯網用戶。 其中近 39 億人通過手機使用互聯網。
因此 AMP(加速移動頁面)在移動 Web 使用方面發揮著重要作用。 與未啟用 amp 的網站相比,與 amp 兼容的網站在您的手機上的加載速度更快。 但是,如果您有一個 WordPress 網站,並且您正在使用 Elementor 來構建您的網頁,您是否需要 amp 兼容性?
是的,當您正在閱讀此博客時,您會這樣做。 在這裡,我們將向您展示如何使用 AMP 讓 Elementor 構建的 WordPress 頁面更加適合移動設備。 因此,您將輕鬆理解整個事情。 讓我們開始。
什麼是加速移動頁面 – 概覽

AMP 是一個開源 HTML 框架。 它是為移動網頁瀏覽和網頁加載速度而創建的。 谷歌於 2015 年推出它以響應 Facebook Instant Articles 和 Apple News。 因為後兩個名字都是谷歌的直接競爭對手。
兼容 AMP 的網站往往會改善移動互聯網體驗。 當您使用手機訪問頁面時,速度就是一切。 根據谷歌和 SOASTA 的研究,如果頁面加載時間超過三秒,40% 的用戶傾向於離開頁面。 AMP 網頁旨在讓您的網站快速移動。
因此,加速的移動頁面需要在您的網頁中啟用 AMP 框架。 當您使用 Elementor 時,工作會更有趣,結果也應該很棒。 像 Elementor 這樣功能強大的頁面構建器可幫助您創建移動速度快的網頁。 因此,放大器兼容性只會使它們更具轉換性。
Amp 兼容網站的好處

迄今為止,已創建超過 15 億個 AMP 頁面,超過 100 家領先的分析、廣告技術和 CMS 提供商支持 AMP 格式。
InstaPage
主要是,當您的 Elementor 構建的網頁與 AMP 兼容時,您將獲得兩個最重要的優勢。 他們是-
提升您的網站性能:兼容 AMP 的網站為您的用戶提供更清晰的瀏覽體驗。 由於 amp 網頁不需要太多時間來加載,它會吸引移動和桌面訪問者的期望關注。 因此,您的網站變得更具吸引力,並實現了目標。
提高您在 Google 搜索中的排名:當 AMP 頁面出現在搜索結果中時,它們會顯示一個閃電標誌。 由於它是一個谷歌框架,當您用戶訪問與 amp 兼容的網站時,搜索引擎巨頭逐漸將您的網站視為一個更加用戶友好的網站。
那麼,為什麼 AMP 網頁會立即加載? 該框架限制了 HTML/CSS 和 JavaScript。 此限制允許移動網頁以更快的速度呈現。 它引導由 Google AMP Cache 自動緩存的 AMP 頁面。 這就是他們在 Google 搜索上的加載時間更快的原因。
在 Elementor 上啟用 AMP 並構建兼容 AMP 的網站

甚至在一年前,AMP 啟用過程還是有點複雜。 但 WordPress 是最具活力的行業之一。 因此,當您擁有 WordPress 網站時,您將獲得創建響應速度更快的網頁的最簡單方法。
你需要的是這三樣東西——
- Elementor 頁面構建器。 它應該安裝在您的 WordPress 網站上
- AMP for WP 的 AMP 插件
- AMP Page Builder 兼容性插件
由於您的儀表板中已經有 Elementor,因此您只需為 WP 插件安裝 AMP。 但是,您可以閱讀我們關於如何在 WordPress 中安裝 Elementor 的詳細指南。
好吧,讓我們按照以下步驟操作。
第1步
在您的 WordPress 站點中安裝並激活 AMP for WP 插件。

第2步
轉到 AMP for WP 併購買 AMP Page Builder Compatibility 擴展。 嗯,這是一項獨特的服務,你不能免費獲得它。 付款後,您可以輕鬆下載插件。


現在,將下載器插件文件保存在您的桌面中。 並轉到您的 WP 儀表板。 然後從側邊欄轉到插件部分。 並且,單擊以添加新的。

單擊“添加新”後,單擊“上傳”選項,然後從桌面上傳保存的擴展程序。 現在你有你的強項的擴展。
第 3 步
轉到儀表板的側邊欄。 然後點擊 AMP 插件。

您將被重定向到 AMP 插件儀表板,如下圖所示。

您可以在選項列表的底部看到第3 方兼容性選項。 現在點擊查看列表。
下一頁將帶您進入第三方兼容性功能列表。 您將在 SEO 下拉列表下方看到Elementor Compatibility幻燈片。

現在打開幻燈片,您的 Elementor 頁面構建器將準備好創建與 amp 兼容的網站。
啟用 AMP 的移動頁面的外觀如何
非放大器移動頁面在搜索結果中提供的前景與桌面網頁沒有什麼不同。 但是,當您為兼容 amp 的網站啟用 Elementor 頁面構建器時,它將如下所示 -

您會注意到搜索結果中第二項的框中標記了一個灰色閃電標誌。 這就是您的放大器兼容網站而不是非放大器網站的標誌。
但是,這是非 amp 與 amp 移動頁面的區別——

好吧,您肯定可以在這裡看到不同之處。 AMP 不僅可以提高您的移動速度,還可以提高您的內容的可見性。
關閉 Elementor 的 AMP 兼容性
您認為該過程簡單且易於採用嗎? 我們相信它是。 您只需要 AMP 插件,單個網站的起價為每月 89 美元,甚至更高。
在移動互聯網過度飽和的氛圍中,您唯一的機會取決於您的內容變得對用戶友好的程度以及它想要成為多少。
像 Elementor 這樣的頁面構建器可以讓您構建高度響應的網頁,並且它具有第三方小部件支持,例如 Happy Addons,可以使您的業務更易於訪問。 因此,AMP 兼容性只會帶您走向勝利的一方。