如何保證您的著陸頁符合 AMP 標準

當 Accelerated Mobile Pages (AMP) 項目開始時，它主要限於靜態內容。 基本框架主要幫助了出版商，使他們能夠為讀者構建更快、無縫的發現和消費體驗。

然而，多年後，情況發生了很大變化。 AMP 的一維開端被能夠構建整個網站的進化工具集所取代。 在推出這些多功能、快速加載的體驗時，AMP 的主要目標保持不變：讓移動網絡更快。

但是，實現的方式是不同的。 通過變通方法和先進技術，設計人員已經找到了滿足 AMP 約束的方法，同時創建對於臨時用戶來說根本不會看起來或感覺受到約束的頁面。

隨著不斷變化的更新和設計策略，今天的設計師在嘗試滿足 AMP 合規性標準時應該期待什麼？

AMP兼容頁面的7個設計原則

雖然 AMP 可以做的大部分事情已經改變，但指導其開發人員的設計原則沒有改變。 根據 AMP 網站，要創建符合 AMP 標準的頁面，在框架內進行設計時，您必須遵循以下七個支柱：

1. 用戶體驗 > 開發者體驗 > 易於實施

雖然 AMP 是一個開源項目，但它是由 Google 發起的。 而且，就像谷歌的所有東西一樣，用戶體驗是重中之重。 “當有疑問時，”AMP 創建者說，“為最終用戶體驗做最好的事情，即使這意味著頁面創建者更難構建或庫開發者實施。”

2. 只做可以快速完成的事情

作為一個開源項目，設計人員可以自己製作 AMP。 但是，加速移動頁面的最終目標是加速。 定制是公平的遊戲，也是意料之中的，但只是以速度的名義。 AMP 創建者警告說：“不要向 AMP 引入無法以 60fps 可靠運行或阻礙當今最常見移動設備上的即時加載體驗的組件或功能。”

3. 不要設計一個假設的未來更快的瀏覽器

AMP 創建者喜歡他們的框架就像網絡用戶喜歡他們的頁面一樣：現在。 該平台旨在在今天的移動網絡上運行，而不是在明天的移動網絡上運行。 所以設計師應該考慮到這一點，而不是一個以馬赫速度工作的假設瀏覽器。

與此同時，今天的開發人員塑造了 AMP 的未來。 所以，僅僅因為你現在不能做某事並不意味著你有一天不想做。 AMP 的創建者說，這就是為什麼 AMP 開發人員“參與標准開發”以在未來獲得對 AMP 可用的優化很重要的原因。

4. 不要破壞網絡

始終確保出色的用戶體驗意味著為最壞的情況做好準備。 在 AMP 的情況下，這可能以 AMP Cache 出現故障或 API 失敗的形式出現。 如果發生任何一種情況，您的內容的消費應該只會“優雅地降級”。 如果您的內容使用 AMP 緩存，它也應該在沒有它的情況下工作。

5. 優先考慮改善用戶體驗的事情——但在需要時妥協

雖然在大多數情況下，更快的頁面加載意味著更好的用戶體驗，但並非總是如此。 而且，AMP-ing 不應該阻止用戶。 有一個平衡，用戶體驗總是勝出。 根據 AMP 的網站：“只有在缺乏對某些東西的支持時才會妥協，才會阻止 AMP 被廣泛使用和部署。”

6.解決正確層上的問題

使用 AMP 解決問題不是開發人員最容易實施的方法，而是最終用戶最適合的方法。 不幸的是，這兩者並不總是重合。 例如，如果在客戶端集成更容易，不要簡單地實現用戶是否會從服務器端集成中受益。 強調用戶體驗，問題應該在正確的層解決。

7. 沒有白名單

該框架不支持白名單。 因此，如果您正在尋找特殊待遇，您將不會在 AMP 中為任何網站、域或來源找到它，只有一個例外，創作者說：
當“出於安全或性能原因需要”時。

如何檢查 AMP 合規性

您可能認為 AMP 頁面的最大優勢在於它們的速度。 不是這樣，它的創造者說。 使 AMP 如此吸引人的不僅僅是速度，還有它的驗證能力。 這樣，第三方（如社交網絡）就可以放心地將用戶發送到那裡，因為他們知道他們將獲得快速且無縫的點擊後登錄頁面。

要回答“我的網頁是否符合 AMP 標準？”這個問題，有四種方法。 三個是由 Google 使用其驗證器在通過/失敗的基礎上提供的。 AMP 驗證器將幫助您在啟動前發現頁面的任何問題。 最後，傳遞是讓他們符合 AMP 的原因，向第三方發出信號，他們可以期望從您的頁面獲得快速的用戶體驗。

瀏覽器開發者控制台

要使用瀏覽器開發者控制台發現 AMP 頁面的問題，請按照以下三個步驟操作：

1. 在網絡瀏覽器中打開 AMP 頁面
2. 在 URL 末尾添加“#development=1”
3. 打開瀏覽器開發者控制台以檢查驗證錯誤

任何阻止您的網頁符合 AMP 標準的錯​​誤都將類似於以下內容：

網頁界面

使用 Web 界面來確定 AMP 合規性很容易。 首先導航到界面。 然後，只需在其“URL”字段中輸入您的源代碼，最後單擊驗證按鈕。

使用此方法發現的錯誤看起來會有些不同。 如下所示，它們將出現在頁面的 HTML 源代碼旁邊：

瀏覽器擴展

三者中最簡單的是，此驗證器以漂亮的 Chrome 擴展程序的形式位於您的工具欄中。 您無需付出任何努力，該擴展程序就會驗證您所在的任何 AMP 頁面。 它的狀態將用三個彩色圖標之一指示。

• 藍色圖標表示您所在的頁面不是 AMP，而是它的 AMP 版本。 如果單擊該圖標，瀏覽器將帶您進入加速的移動版本。
• 紅色圖標表示此頁面上存在錯誤，並且該圖標旁邊會顯示一個數字，準確指示錯誤數量。
• 綠色圖標表示當前 AMP 頁面上沒有錯誤。 但是，可能會有警告。 如果有，該圖標旁邊會出現一個數字，詳細說明具體有多少。

這三者都可以在發布之前輕鬆地捕獲 AMP 頁面中的錯誤。 第四個選項不是由 Google 提供，而是由 Instapage 提供，用於嘗試構建快速點擊後登錄頁面的創作者。 以下是在構建 AMP 點擊後登錄頁面時如何使用它：

如何使用 Instapage 創建 AMP 點擊後登錄頁面

閱讀這些合規性標準，您可能會感到困惑。 幸運的是，使用 Instapage，構建 AMP 點擊後登錄頁面很簡單。 用戶可以簡單地按照以下步驟操作：

1：新建一個頁面

當您開始創建新頁面時，在出現提示時單擊“AMP 頁面”：

對於用戶來說，下一步可能會顯得陌生，因為通常情況下，構建器會詢問您要使用哪個模板。 雖然 Instapage 為非 AMP 頁面提供了數百個經過轉換驗證的模板，但 AMP 頁面是從頭開始構建的。 因此，AMP 頁面當前不存在模板選項。

第 2 步：向頁面添加元素

如果您是 Instapage 的普通用戶，您還會注意到 Timer 和 HTML 小部件不在工具欄中。 但是，您可以使用所有其他圖標及其功能來構建頁面：

此外，由於 AMP 限制了 CSS 和 JavaScript，因此構建器不會提供這些常用選項。 您將看到以下內容：

調整背景、字體、SEO 以及您在上面看到的所有內容。 自己動手，或使用 Instapage 協作解決方案與您的團隊協作。 然後，甚至將您的頁面組件保存為 Instablocks™ 以插入到其他頁面中。 （注意：雖然 Instablocks 和協作解決方案可與 AMP 構建器一起使用，但全局塊和熱圖目前不可用。）

添加小部件時，您會注意到頁面的權重增加。 每個 AMP 點擊後登錄頁面都有 75KB 的重量限制，Instapage AMP 驗證器可確保您不會超過該限制。 當您達到設計限制的 80% 時，屏幕底部會出現警告，如下所示：

第 3 步：驗證頁面

如果您繼續構建超出 AMP 重量限制，則會再次出現警告窗口以通知您。 它將提示您驗證頁面以確認：

如果您的頁面低於重量限制並通過驗證，這些通知將顯示在您的屏幕上：

第 4 步：發布

設計好頁面並準備好發布後，只需單擊“發布”。 如果您仍然超過重量限制，則會出現此警告：

返回您的頁面並嘗試通過刪除內容來縮小頁面。 請記住，研究表明，體重的最大貢獻者通常是圖像。 準備好後，再次點擊發布。 顯然，如果您再次看到該消息，則需要進一步縮減頁面。

如果您沒有看到該消息，則您已準備好發布您的頁面，在您點擊“發布”按鈕後，系統會提示您輸入您的子域和域。

實時頁面在您的儀表板中將如下所示，其名稱旁邊帶有閃電 AMP 標誌：

隨時單擊它以返回到它，您可以在其中進行編輯、運行 A/B 測試、收集報告等。

開始構建符合 AMP 標準的點擊後登錄頁面

不僅僅是速度，它的合規性使 AMP 點擊後登錄頁面如此強大。 通過遵守框架的設計原則，您可以確保第三方可以依靠優化的移動體驗來引導流量。

準備好構建快速且合規的 AMP 點擊後登錄頁面了嗎？ 在此處獲取定制的 AMP 演示。