l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在您的 WordPress 站点上正确设置 Google AMP

如何在您的 WordPress 站点上正确设置 Google AMP

Bug编译狮

Bug编译狮

在WordPress站点上设置Google AMP（Accelerated Mobile Pages）可以帮助提高网站加载速度，尤其是对于移动设备用户来说。AMP是一种为快速网页设计的HTML5标准，它允许开发者创建可以立即在移动设备上显示的页面。

步骤1：安装Google AMP插件

首先，在您的WordPress后台中，找到“插件”部分，点击“添加新插件”，搜索并安装“Google AMP for WordPress”。这个插件会自动启用AMP支持，并且会自动检测您的所有文章和页面是否符合AMP规范。

步骤2：配置Google AMP

安装完成后，您可能需要对一些设置进行调整以确保最佳性能：

  • 选择语言：根据您的需求选择合适的语言。
  • 设置优先级：您可以根据需要选择哪些页面或文章应优先加载AMP版本。
  • 禁用广告：如果您的网站有大量广告，可能会降低AMP加载速度。因此，建议禁用这些广告。
  • 检查错误：定期检查AMP页面是否有任何错误，这有助于保持您的AMP页面的高效运行。

示例代码

以下是一个简单的示例代码，展示如何在WordPress文章中使用Google AMP。请注意，这里提供的代码只是一个基础示例，实际使用时还需要根据您的具体需求进行调整。

<!-- 使用Google AMP -->
<amp-ad width="300" height="250"
        type="text/html"
        layout="container">
  <amp-img src="https://example.com/image.jpg" alt="Image description"></amp-img>
</amp-ad>

<!-- 您的文章内容 -->
<article class="amp-article">
  <h1>文章标题</h1>
  <p>文章内容。</p>
</article>

使用步骤及效果

  1. 上传到服务器：将上述代码保存在一个新的HTML文件中，并上传到您的WordPress服务器。
  2. 激活插件：在WordPress后台启用“Google AMP for WordPress”插件。
  3. 发布文章：在编辑文章时，插入上述代码即可生成AMP版的页面。

通过这种方式，当用户访问您的网站时，他们会在手机或平板电脑上看到更快速、更简洁的页面体验。这样不仅可以提升用户体验，还能帮助搜索引擎优化，因为Google AMP可以显著减少加载时间，从而提高排名。

注意事项

  • 部分浏览器可能不完全支持AMP，所以在发布AMP版本之前，请确保测试其兼容性和功能。
  • 如果您的网站有大量的动态内容或者复杂的JavaScript，可能需要考虑使用其他方法来实现类似的效果。

通过以上步骤，您可以轻松地在WordPress站点上设置Google AMP，从而提供更快、更好的移动用户体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在您的 WordPress 站点上正确设置 Google AMP 是一个重要的步骤，因为它可以帮助您优化网站性能并提高用户体验。以下是如何在 WordPress 中正确设置 Google AMP 的几个关键步骤：

1. 安装 Google AMP 插件

首先，确保您的 WordPress 主题或插件已包含 Google AMP 功能。您可以通过访问 Google AMP 插件页面 来找到适合您的主题或插件。

示例代码：

add_theme_support('amp');

2. 创建 Google AMP 视频片段

要创建 Google AMP 视频片段，请按照以下步骤操作：

  • 在 WordPress 编辑器中打开您的网页。
  • 尝试加载某个视频，如 YouTube 或 Vimeo 的链接（例如：）。
  • 在浏览器的开发者工具中查看加载时间是否显著降低。

示例代码：

// 获取YouTube视频ID
$video_id = get_field('youtube_video_id', 'option');

if (!empty($video_id)) {
    // 设置AMP视频
    $amp_video_url = wp_amp_get_video_url($video_id);
    echo '<div id="amp-video"><iframe class="embed-responsive embed-responsive-16by9" src="' . esc_attr($amp_video_url) . '" frameborder="0" allowfullscreen></iframe></div>';
}

3. 使用 Google AMP HTML 标签

除了使用 iframe 外，还可以使用 Google AMP HTML 标签来加载视频和图像等元素。

示例代码：

<div id="amp-video">
  <script async defer src="https://www.youtube.com/iframe_api"></script>
  <source type="text/html" src="<?php echo esc_url(get_post_meta(get_the_ID(), '_amp_html', true)); ?>" />
  Your video here...
</div>

<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');</script>

请注意，上述示例代码中的 YOUR_VIDEO_ID 应替换为实际的 YouTube 视频 ID。

4. 检查和优化

完成以上步骤后，通过检查 Google Analytics 数据报告以了解哪些元素正在加载以及它们的表现如何。根据需要调整设置以进一步提升体验。

总结

正确设置 Google AMP 可以显著提高网站的速度、响应时间和用户体验。通过结合 iframe 和 Google AMP HTML 标签，您可以有效地展示各种类型的内容，同时保持良好的 SEO 能力。实践是检验真理的道路，不断尝试不同的策略和布局，直到达到理想的效果为止。

最新更新