AMP(Accelerated Mobile Pages)とは?意味をわかりやすく簡単に解説
公開:
AMP(Accelerated Mobile Pages)とは
AMP(Accelerated Mobile Pages)とは、Googleが中心となって開発したモバイルウェブページの高速表示を実現するためのオープンソースプロジェクトです。従来のモバイルページと比較して、読み込み速度を大幅に向上させることで、ユーザー体験の改善とモバイル検索における優位性を提供します。
このフレームワークは2015年10月に発表され、HTMLの軽量版である独自の仕様を採用することで実装されています。AMP HTMLと呼ばれる制限付きのマークアップ言語、AMP JSライブラリ、そしてAMP CDNという3つの主要コンポーネントから構成され、これらが連携してページの高速化を実現しています。
AMP HTMLの基本構造と記述方法
AMP HTMLでは通常のHTMLに様々な制限があり、ページを作る際には特定の属性や専用タグを使う必要があります。ドキュメントタイプ宣言の直後に配置する<html>タグには、amp属性(または稲妻マーク⚡でも可)を必ず含める必要があり、<head>セクション内にはAMPが定めた必須のメタタグとAMPライブラリの読み込みを記述します。
<!DOCTYPE html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}</style>
</head>
<body>
<h1>AMPページ</h1>
</body>
</html>
通常のHTMLでは<img>タグを使用しますが、AMPでは<amp-img>という専用タグに置き換える必要があります。このタグでは幅と高さの属性指定が必須となっており、レスポンシブ対応のためにlayout属性を活用してレイアウトモードを制御できます。
AMPページの配信とキャッシュの仕組み
AMP CDNはGoogleが提供するコンテンツデリバリーネットワークで、検証済みのAMPページを自動的にキャッシュして配信する役割を担っています。このCDNは世界中に分散配置されたサーバーからコンテンツを提供するため、ユーザーの地理的位置に関わらず高速なページ表示を実現します。
| 配信方式 | URLの形式 |
|---|---|
| オリジナル配信 | https://example.com/amp/ |
| Google AMP Cache | https://example-com.cdn.ampproject.org/ |
| Bing AMP Cache | https://www.bing-amp.com/ |
検索エンジンのクローラーがAMPページを発見すると、そのページの検証とキャッシュ処理が自動的に実行されます。キャッシュされたページはプリレンダリング技術によって、即座に表示可能な状態で保持されるため、検索結果からのタップ操作に対して、ほぼ瞬時にコンテンツが表示されるのです。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
左へフリックで次のページ、右へフリックで前のページに戻れます左右の矢印ボタン、左右のスワイプで移動できます





