Accelerated Mobile Pages - AMP

2024-08-08T17:25:42+08:00 | 3 minutes read | Update at 2024-08-08T17:25:42+08:00

sqrtcat

Accelerated Mobile Pages (AMP) 是 Google & Twitter 合作制定的一套页面加速组件库。通过 AMP 技术不仅可以使得用户可以更快更稳定的访问 你的页面，还会带来 Google 收录及排名上的加持，通过 AMP 提供的组件可以很方便的帮助我们快速构建出一套符合 AMP 标准的页面。

虽然 Google 拒绝承认 AMP 标准的页面会被优先收录展示，但访问更快更稳定本就是 SEO 体验的一项重要评分，AMP ≈ 快速稳定，也就不必争论了，的确是 公平的优先收录访问快速稳定的页面。

AMP 的优势

  1. AMP 能够带来 SEO 排名优化，虽然 Google 不承认。
  2. 基于 Google 的免费 CDN 缓存页面，更快的访问速度，更好的用户体验。
  3. Google 搜索对 AMP 页面有做预加载处理，这使得用户可以更快地到达着陆页。

适用场景

并非所有的场景都能很好的套用 AMP 方案，如果你的业务在海外推广，看重 Google 搜索排名，并且 AMP 组件库的素组件能满足你的页面丰富度时，那建议 你考虑 AMP。例如新闻资讯、词条百科、商品着陆页，都可以借助 AMP 来优化用户体验、提升排名竞争力。

AMP 如何运作？

AMP 类似于任何其他 HTML 网页，但具有一组有限的允许技术功能，这些功能由开放源代码 AMP 规范定义和管理。与所有网页相同，AMP 将在任何现代浏 览器或应用 WebView 中加载。

AMP 文件利用各种技术和架构方法，优先考虑速度，为用户提供更快体验。AMP 开发者可以使用不断增长的丰富网络组件库，嵌入视频和社交帖子等富媒体对象、展示广告或收集分析数据。 目标不是使内容的外观和风格同质化，而是在网页之间建立更通用的技术核心，以缩短加载时间。

此外，AMP 文件可在云端缓存，缩短内容到达用户移动设备的时间。通过 AMP 格式，内容制作者将 AMP 文件中的内容提供给第三方缓存。 在这种类型的框架下，发布商和广告客户仍然控制内容，但平台可以轻松缓存或镜像内容，实现向用户的最佳传输速度。 Google 已经免费提供 Google AMP Cache，并且所有 AMP 都将被 Google AMP Cache 缓存。其他公司也可以建立自己的 AMP 缓存。

AMP 示例

<!doctype html>
<!-- amp 标识 -->
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Detailed AMP Example</title>
    <!-- amp 作为检索收录页使用 canonical 指向对应的PC页 相应的可以在PC页使用 amphtml 指向 -->
    <!-- <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> -->
    <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

    <!-- AMP核心库 -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- AMP组件 -->
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

    <!-- 样式必须内联 -->
    <style amp-custom>
        body {
            font-family: 'Roboto', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        h1, h2 {
            color: #1a73e8;
        }

        .menu {
            margin-bottom: 20px;
        }

        .menu a {
            margin-right: 15px;
            text-decoration: none;
            color: #007bff;
        }

        .content {
            margin: 20px 0;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
        }

        .carousel-container {
            margin-bottom: 20px;
        }

        .video-container {
            margin-bottom: 20px;
        }

        .form-container {
            margin-top: 20px;
        }

        .footer {
            margin-top: 40px;
            font-size: 0.9em;
            color: #666;
        }
    </style>
</head>

<body>
    <header>
        <h1>AMP Demo Page</h1>
        <nav class="menu">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <article class="content">
        <h2>Introduction to AMP</h2>
        <p>AMP (Accelerated Mobile Pages) is an open-source framework that allows you to create fast-loading, user-first web pages.</p>

        <!-- 图片轮播 -->
        <div class="carousel-container">
            <amp-carousel width="600" height="400" layout="responsive" type="slides" autoplay>
                <amp-img src="https://blog.chztkc.com/posts/wechat/wechaty.png" width="600" height="400" layout="responsive" alt="Image 1"></amp-img>
                <amp-img src="https://blog.chztkc.com/posts/wechat/wechaty.png" width="600" height="400" layout="responsive" alt="Image 2"></amp-img>
                <amp-img src="https://blog.chztkc.com/posts/wechat/wechaty.png" width="600" height="400" layout="responsive" alt="Image 3"></amp-img>
            </amp-carousel>
        </div>

        <!-- 嵌入视频 -->
        <div class="video-container">
            <amp-video width="640" height="360" layout="responsive" poster="https://amp.dev/static/inline-examples/images/kitten-playing.png" controls>
                <source src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4" type="video/mp4">
                <div fallback>
                    <p>Your browser doesn't support HTML5 video.</p>
                </div>
            </amp-video>
        </div>

        <!-- amp-list 这里使用了 mustache 的模板 json endpoints 需要返回 {items: [{url: xxx, title: xxx}, {url: xxx, title: xxx}]}  -->
        <amp-list width="auto" height="100" layout="fixed-height" src="https://amp.dev/static/inline-examples/data/amp-list-urls.json">
            <template type="amp-mustache">
                <div class="url-entry">
                    <a href="{{url}}">{{title}}</a>
                </div>
            </template>
        </amp-list>

        <!-- 表单 -->
        <div class="form-container">
            <h2>Contact Us</h2>
            <form method="post" action-xhr="http://localhost:8888/index.php" target="_top">
                <label for="name">Name:</label><br>
                <input type="text" id="name" name="name" required><br><br>
                
                <label for="email">Email:</label><br>
                <input type="email" id="email" name="email" required><br><br>
                
                <label for="message">Message:</label><br>
                <textarea id="message" name="message" rows="4" required></textarea><br><br>
                
                <input type="submit" value="Submit">
                <!-- http status == 200 时 {err: 0, msg: 'success', data: {name: xxx}} -->
                <div submit-success>
                    <template type="amp-mustache">
                        <p>Thanks {{data.name}} for your message! We'll get back to you soon.</p>
                    </template>                  
                </div>
                <!-- http status != 200 时 {err: 400, msg: 'sth wrong', data: null} -->
                <div submit-error>
                    <template type="amp-mustache">
                        <p>there were something wrong with submit!</p>
                    </template>
                </div>
            </form>
        </div>
    </article>

    <footer class="footer">
        <p>AMP is a web component framework that you can use to easily create user-first websites, stories, emails, and ads.</p>
        <p>© 2024 Example.com</p>
    </footer>
</body>

</html>

AMP 收录设置

AMP 的优点很多，但限制也不少，有时可能无法满足我们的设计要求。这时通常会出两个页面，非 AMP 版本 和 AMP 版本。 非 AMP 页面需要指向 AMP 页面：

AMP 页面需要指向 非 AMP 页面（PC）页面： 这样既可以保证 AMP 带来的收录加持，也可以保证进一步的用户体验。

AMP 标准校验工具

AMP 发布前建议进行校验检测，不合格的 AMP 页面 Google 不会收录的。 Chrome 插件校验工具

AMP 是否被缓存校验

缓存规则如下

https://www.alibaba.com/insights/videos/index.html

转换后 CDN 链接

https://www-alibaba-com.cdn.ampproject.org/c/s/www.alibaba.com/insights/videos/index.html

当转换后的 CDN 链接可访问，则说明缓存副本已经生成，但是该副本何时出现在 Google 搜索结果中，还需要等待 Google 收录。

文档参考

AMP 组件库 - amp.dev

AMP 组件库 - amp.org.cn

Previous page your girlfriend - chapter-1
Next page sitemap 0.9 标准的网站地图协议 for Google / Bing / Yahoo / Baidu

© 2024 - 2025 sqrtcat 的博客

🌱 Powered by sqrtcat

关于我

资深云程序员，在线支持技术的讨论、攻坚、架构等高级话题，线下暂提供初级技术支持。 在线接单：App / 小程序 / WordPress / 商城 / 预约 / 企业站 / 外贸站 / MES系统 / SEO优化

wx: bigcat582

Search

如何开启检索功能，只需创建 search 文档即可。

hugo new search/_index.md