Google AMP框架详解：如何加速移动页面加载并提升SEO效果

hwyzw

    第一个放大器于2015年推出，该放大器是为了加速移动页面。使用开源AMP框架，Web设计人员可以创建快速加载的移动网页页面。该框架的创建是为了应对使用移动设备访问的个人数量的增加。从那时起，一直在推动使用AMP来增强SEO和移动设备上的用户体验。我们将在本文中更详细地研究AMP，并讨论它如何影响SEO。

    什么是放大器？

    如前所述，AMP是一个开源框架，允许开发人员创建快速加载的移动页面。 AMP使用HTML，CSS和薄版本可显着减少网页加载时间。 AMP还在服务器上缓存网页，允许用户在单击它们时几乎立即加载网页。使用AMP的网页显示在移动设备的搜索结果顶部的旋转木接口中，使用户更容易看到这些页面。

    为什么推动放大器？

    AMP的采用一直在推动许多原因。首先，AMP改善了移动设备上的用户体验。使用AMP的网页加载速度更快，可以更轻松地快速访问所需的内容。加载时间更快也降低了跳出率，这是的重要排名因素。其次，将AMP视为将用户保持在网络而不是应用程序中的一种方式。最后，希望通过提供出色的移动体验来保持领先地位。

    AMP如何影响SEO？

    AMP对SEO有重大影响。使用AMP的网页将获得优先处理。启用AMP的网页更有可能在移动设备上的搜索结果中排名第一。如前所述，AMP网页出现在搜索结果顶部的旋转频率接口中。与非交界接口中显示的网页相比，旋转木马接口中显示的网页获得的点击次数更多。

    AMP对SEO的影响不仅限于移动设备。 表示，AMP也是桌面搜索结果的排名因素。

    如何在您的网站上实施AMP

    在您的网站上实施AMP非常简单。第一步是创建网页的AMP版本。您可以手动创建网页的AMP版本，也可以使用插件或扩展程序自动创建AMP版本。

    创建网页的AMP版本后，您需要添加一些代码来判断在哪里可以找到AMP版本。为此，您可以将RER =“”标记添加到HTML代码的头部部分。此代码将告诉您在哪里可以找到页面的AMP版本。

    为了确保您的放大器页面符合AMP规格，必须对其进行验证。您可以使用AMP验证工具（提供的工具）来验证您的AMP网页。 AMP验证工具检查您的页面是否有错误，并提供有关如何修复它们的建议。

    AMP最佳实践

    在网站上实施加速移动页面（AMP）时，您应该遵循一些最佳实践，以确保您的页面表现良好并提供良好的用户体验。这是一些顶级AMP最佳实践。

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><code class="prism language-bash"><span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"canonical"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://www.example.com/amp/page.html"</span><span class="token operator">></span>
<span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"amphtml"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"https://www.example.com/amp/page.html"</span><span class="token operator">></span>
</code></pre></p>
   

    第一行代码告诉您网页的AMP版本已标准化，第二行代码告诉您在哪里可以找到网页的AMP版本。

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><code class="prism language-bash"><span class="token operator"><</span>script async custom-element<span class="token operator">=</span><span class="token string">"amp-analytics"</span> <span class="token assign-left variable">src</span><span class="token operator">=</span><span class="token string">"https://cdn.ampproject.org/v0/amp-analytics-0.1.js"</span><span class="token operator">></span><span class="token operator"><</span>/script<span class="token operator">></span>
</code></pre></p>
    您还需要将以下代码添加到HTML代码的主体部分：

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>amp-analytics</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>googleanalytics<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>analytics1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
   <span class="token string-property property">"vars"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string-property property">"account"</span><span class="token operator">:</span> <span class="token string">"UA-XXXXXX-Y"</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token string-property property">"triggers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string-property property">"trackPageview"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
         <span class="token string-property property">"on"</span><span class="token operator">:</span> <span class="token string">"visible"</span><span class="token punctuation">,</span>
         <span class="token string-property property">"request"</span><span class="token operator">:</span> <span class="token string">"pageview"</span>
      <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>amp-analytics</span><span class="token punctuation">></span></span>
</code></pre></p>
   

    用您的（分析）跟踪ID替换“ ua  -  y”。

    通过遵循这些AMP最佳实践，您可以确保页面为移动设备提供了快速加载，用户友好的体验。这有助于提高网站的搜索引擎排名并增加用户参与度。

    遵循AMP广告指南，以确保您的广告不会对用户体验产生负面影响。

    综上所述

    简而言之，AMP是一种强大的工具，可改善移动页面性能并改善您的SEO。通过遵循AMP最佳实践，您可以确保您的网页为移动设备提供了快速，用户友好的体验。 AMP可以帮助您提高网站在搜索结果中的可见性并增加用户参与度。如果您尚未实施AMP，请考虑在您的网站上实现AMP。

    如果您认为这篇文章非常好，则可以喜欢并收集它。如果您仍然对此有任何疑问，则可以发表评论并回答以回答。如果您需要SEO学习材料或相关的面试问题，则可以在文章结束之前免费获得它。