使用外部库即可快速构建页

[sakibkhan22197]

创建您的 AMP HTML 页面
基本代码
首先，这是基本 AMP 页面的标记：



添加图片
如果您想添加图像，则必须将普通的 HTML 标记替换为其 AMP 等效标记。

在这种情况下，标签<amp-img>而不是<img>.

要测试它，请将以下代码复制并粘贴到页面 <> 的正文中。


height="400"></amp-img>
添加样式
下一步是添加样式。

任何样式都必须使用 CSS 属性来完成。但是，AMP 要求所有 CSS 都包含在文档 <style amp-custom>中调用的自定义标记中。 cabecera<>

例如，尝试将以下样式添加到您的页面：

<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: verde;
}
</style>
JavaScript
AMP 允许通过组件自定义 JavaScript <amp-script>。

它允许您编写和运行自己的 JS，以便维持 AMP 性能保证。无需编写 JavaScript 或使用外部库即可快速构建页面。

有关更多详细信息，请阅读AMP使用自定义 JavaScript的指南并按照其AMP JS 教程开始使用。

审查和验证
有效的 AMP 页面意味着它遵循严格的准则，以确保其缓存友好并创造良好的用户体验。

在验证 AMP 网页之前，请务必遵循以下最佳实践：

如果您要针对 Google 进行优化，请遵循他们的AMP 网页指南
将您的 AMP 页面链接到其规范页面（非 AMP 版本或 AMP 页面本身）
在 AMP 和规范页面上 使用相同的结构化数据标记
使用富结果测试检查您的结构数据是否有效
检查您的robots.txt文件是否不会屏蔽您的 AMP 网页
遵循国际 SEO 指南hreflang
当您准备好进行审核时，请使 伯利兹 whatsApp 用AMP 测试工具来确保您的网页满足所有要求。

AMP测试工具
有关更详细的指南，请参阅验证 AMP 页面的官方 AMP 教程。

如果您是 Web 开发新手，请使用AMP 课程或Google 的 AMP 基础 Codelab 。

使用 CMS 创建 AMP 页面
如果您通过 CMS 管理内容，则可以使用Drupal、Joomla或WordPress。

例如，让我们看看使用AMP for WP会是什么样子。

适用于 WP 的 AMP 插件
在 WordPress 中激活插件后，您可以开始创建 Accelerated Mobile Pages。

首先添加新页面或新帖子。

菜单中的“添加新”页面
接下来，单击“启动 AMP 页面生成器”。

突出显示“启动 AMP 页面生成器”按钮
您可以选择使用预定义的布局或通过拖放元素来创建自己的布局。

AMP 页面生成器拖放元素
接下来，单击齿轮图标来编辑页面元素。

突出显示的齿轮图标
并在使用时保存每个模块。

“保存模块”按钮
发布页面后，通过在页面网址末尾添加“amp”，您将看到该页面的 AMP 版本。

示例页面的 AMP 版本
监控和改进您的 AMP 网页
监控和改进 AMP 页面的最佳方法之一是定期审核您的网站。它将帮助您控制任何 HTML、模板、样式和设计问题。

首先通过我们的站点审核工具运行您的站点。

提示： 创建一个免费的 Semrush 帐户，并从任何域、子域或子文件夹中抓取最多 100 个 URL。

现场审核工具
一旦您的网站被抓取，请转到“统计”选项卡。您将在标有“AMP 链接”的行中看到主题。

站点审核中的“统计”选项卡
该工具可检查 40 多种与 AMP 页面相关的最常见错误。它告诉你如何解决它们。

为什么以及如何解决 AMP 页面问题部分
尽快解决任何问题。它们会影响搜索引擎向搜索引擎提供您的内容的方式。

查找并修复 A