AMPとは何か？AMPの定義と実装方法例を解説

SEO内部対策
SEO対策
2018.01.31
2020.12.28

AMPという言葉をご存知でしょうか？Accelerated Mobile Pagesの略で、一言でいうと、モバイル端末でウェブページを高速表示するためのプロジェクト・フレームワークです。

今回は、このAMPについてご紹介します。AMPとは何かから、具体的な実装方法例もご紹介しますので、ご参考になさって頂ければと幸いです。

 

AMPとは？

AMPとは、Accelerated Mobile Pagesの略で、GoogleとTwitterなど共同開発している、モバイル端末でウェブページを高速表示するためのプロジェクト、フレームワークのことです。

AMP対応したサイトやページは、Google側にキャッシュとして保存され、専用のマークが表示されます。次にAMP対応にすることのメリットやデメリットをご紹介していきます。

1.AMPのメリット

AMPにするメリットは主に以下の3つが挙げられます。

1-1.読み込み時間が短縮され、ユーザの離脱を防げる

　AMPに対応したコンテンツは、サイトにアクセスした際にGoogle側のキャッシュを参照するため、通常のページを開いた時よりも読み込み時間が短縮されます。早くコンテンツが表示されることで、ユーザの離脱を防ぐことができる可能性があります。

1-2.上位化が期待できる

　2018年1月18日、Googleのウェブマスター向け公式ブログ(日本語版)において、ページ読み込み速度をモバイル検索のランキング要素に使用すると発表しました。これにより、前述した理由によりAMPなど読み込み速度が速いコンテンツの方が、上位化につながると考えられます。なお導入は2018年7月からのようです。

公式ブログではページ速度が遅いコンテンツに関しては、影響する旨を公表しておりますので、ページ読み込み速度が遅いコンテンツを運営されている方は、AMPの導入を検討してみても良いかもしれません。

1-3.カルーセルが表示され、記事がユーザの目に止まりやすい

　AMPに対応したコンテンツは、検索結果直下に大きく表示され、記事が読まれる確率があがります。

1.AMPのデメリット

一方AMPにするデメリットは主に以下の3つが挙げられます。

2-1.シンプルなHTMLとCSSのみで記述しなければならない

　高速表示させるため、シンプルなHTMLとCSSのみで記述するため、デザインが大きく崩れる可能性があります。また、JavaScriptに対応していないため、JavaScriptを多用しているサイトの場合コンテンツがうまく表示できない可能性があります。

さらに、CSSも上限50KB制限があり、style属性にCSSを記述することが禁止されている、画像の高さや幅を指定するなどいくつか制約があります。
具体的な制限については次のamp対応方法にて解説します。

2-2.AMP専用のページを作る必要がある

　PC版、スマホ版に加え、AMP専用のページが必要となってくるため、作成・運用・管理コストが増えてしまう可能性が高い。また、現状これをすればAMP対応というものがないため、まず自身のサイトの調査から始める必要があり、現段階では導入までの敷居が少々高い。

2-3.アナリティクスの設置が通常と異なる

　AMPに対応したページでは、javascriptが使えません。そのため、AMPに対応したアナリティクスを設置する必要があります。

また、ページやそのキャッシュをさまざまな方式で配信するために、適切にユーザーを識別することができずダブルカウント等が起こり、AMPページの解析には別のプロパティを作る必要があります。

AMPの実装方法

1.AMPを実装するための主な注意事項

それでは、実際のAMPコンテンツの実装方法を見ていきましょう。まず、前述しましたように、通常のhtmlとは異なりますので、実装には十分注意してください。
以下に基本的な注意事項を記載します。

1.HTMLの宣言は、HTML5で行う

　AMPのHTMLはhtml5が基本となりますのでHTMLの宣言は以下のようになります。なお大文字小文字どちらでも構いません。

<!DOCTYPE html>

 

2.htmlタグは ampもしくはAMP専用の絵文字を記述する

　htmlタグは ampもしくはAMP専用の絵文字を記述します。AMP HTMLが通常のHTMLと違う部分は、絵文字で表現することも可能という点です。

<html amp>

 

3.meta要素は必ずutf-8とviewportの両方を指定する

　こちらは、meta要素の指定となります。AMPは、現在のところ文字コードはutf-8のみ対応しておりますので、必ず文字コードは”utf-8″を指定します。また、”viewport”の指定も必須です。
どちらか一方を記述しない場合は、エラーとなってしまいますので、必ず両方とも指定します。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

 

4.canonical属性は、AMPの元となったHTMLページを指定し、元HTMLページにはlink要素を専用の属性を明示

canonicalは、AMPの元となったHTMLページを指定する。元がない場合はHTMLページがない場合は、AMPページ自身を指定します。
また、AMPの元になった正規のページには、AMPページの存在をlink要素のamphtml属性を使って明示します。特にamphtml属性は通常のhtmlにない属性のため注意してください。

▼AMPページ

<link rel="canonical" href="AMPの元になったURL">

 

▼AMPの元になったページ

<link rel="amphtml" href="AMPページのURL">

 

5.AMP用JavaScriptライブラリーを読み込む

AMP用JavaScriptライブラリーを読み込むためのスクリプトをヘッダーの閉じタグの直前に追加する。

<script async src="https://cdn.ampproject.org/v0.js"></script>

 

6.boilplateを記述する

head要素内にboilplateを記述します。なお、style要素にamp-boilerplate属性を付加して記述する必要があります。

<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}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

7.JSON-LDを指定する

JSON-LDとは、Linked Dataを記述するためのフォーマットです。Googleでは、検索結果のナレッジグラフと一部のリッチスニペットなどに利用されています。これを指定することで、そのページがどのようなページであるかをクローラーに伝えることができます。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "thumbnail1.jpg"
   ],
   "datePublished": "2015-02-05T08:00:00+08:00"
}
</script>

 

2.HTMLタグの制約事項一覧

HTMLタグの制約事項は以下の表のとおりです。とくにimgタグは高さと幅を指定する必要があります。

HTMLタグにおける制約事項一覧
HTML要素 AMP HTML
script application/ld+json以外は原則禁止。例外は、AMPランタイムと拡張コンポーネント用のScript
img amp-imgで記述。また、src、width、height属性の指定が必須。
video amp-videoで記述。
audio amp-audioで記述
iframe amp-iframe
form amp-formの拡張を使用する。これにより、input、textarea、select、option、field、labelも使用可能。
なお、input要素のtype属性値がbutton、file、image、passwordは使用不可
base 使用不可
frame 使用不可
frameset 使用不可
object 使用不可
param 使用不可
applet 使用不可
embed 使用不可
button 使用可能
svg 使用可能
meta http-equiv属性は禁止。それ以外は使用可能。
style head要素内に必須で記述する必要のあるopacityを調整する処理とSytleの変更用にamp-custom属性を付与したstyle要素をhead要素内に一つだけ使用可能。
link rel属性はmicroformats.orgに登録されている値は使用可能。
stylesheetとpreconnect、prerender、prefetchの値は許可しないが、Webフォントの読み込みは使用可能
a href属性にjavascript:から始まる値を指定するのは禁止。target属性を指定する場合は_blankのみ設定可能。それ以外は制限なし。

3.作成したらチェックしてみよう

AMP対応のページを作成したら、実際にAMPに対応しているかどうかチェックしてみましょう。チェックツールがありますのでご紹介します。

1.Chromeのディベロッパーツールでチェック

Google Chromeをインストール済みの場合、ディベロッパーツールで、AMPが正しくコーディングできているか検証することができます。

1.AMPページのURLの最後に#development=1をつける

ChromeのURLバーにAMPページのURLに#development=1をつけてアクセスします。
例:https://test.net/amp/amptest.html#development=1

2.Chromeのディベロッパーツールを起動する

まず、Chromeのディベロッパーツールを起動します。起動方法は以下の2つがあります。
1.[Google Chromeの設定]（一番右の3本バーor3本点）→[その他のツール] →[デベロッパー ツール]
2.Windowsの場合は、Ctrl+Shift+iを同時に押すか、F12を選択。Macの場合は、Cmd+Opt+i。

3.Console画面を開く

デベロッパーツールで「Console」メニューを選択します。Console画面にAMP対応ページであることのメッセージと解析を行った結果が表示されます。AMPHTMLの仕様に準拠していない箇所がない場合、「AMP validation successful」と表示されます。エラーがある場合は、エラーメッセージとが該当箇所の行数と文字数が表示されますので、該当箇所を修正していきましょう。
なおウィルスソフトによっては勝手にスクリプトタグが埋め込まれ、有効なAMPページと見なされない可能性があります(カスペルスキーはWEB関連保護機能で勝手にスクリプトを埋め込むようです)。

ディベロッパツール(AMPチェック画面)

2.AMPテストサイトでチェック

Googleでは、AMPページの検証するテストツールを公開しています。チェック方法は簡単で、テストするURLを入力し、「テスト実行」ボタンをクリックするだけです。純粋に書かれているソースを解析するので、先ほどのディベロッパーツールのように、ウィルスソフトによるスクリプトタグで有効なAMPページと見なされないということはありません。

AMPテスト画面

AMPテスト画面

4.AMPの実装サンプル

今回の記事を基に、AMPコンテンツのサンプルを作成しました。ご参考にして頂ければ幸いです。なお以下のサンプルは、当社でアップした記事を、加工してAMP用に作成いたしました。

<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ドメインのSEO上の効果と効果的なドメインの選び方</title>
    <link rel="canonical" href="amptest.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
<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}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>ドメインのSEO上の効果と効果的なドメインの選び方</h1>
<div class="txt_box">
<p>
ドメインとはよく聞くけど、一体何かよくわからない方もいることでしょう。
今回は、ドメインとは何かはもちろんのこと新規のドメインは作る場合にSEO的に有効なドメインがあるのか？新規サイトを立ち上げる際に古いドメインを使ってもいいのか、古いドメインのチェック方法をご紹介しますのでご参考にしていただければと思います。
</p>
</div>

<div id="toc_container" class="no_bullets">
<p class="toc_title">目次</p>
<ul class="toc_list">
<li><a href="#01">1.ドメインとは何か？</a></li>
<li><a href="#03">3.各ドメインの選び方</a></li>
<li><a href="#03-01">&nbsp;&nbsp;3-1.独自ドメイン</a></li>
<li><a href="#03-03">&nbsp;&nbsp;3-3.中古ドメイン</a></li>
<li><a href="#03-03-01">&nbsp;&nbsp;&nbsp;3-3-1.対象ドメインのチェック</a></li>
<li><a href="#03-03-02">&nbsp;&nbsp;&nbsp;3-3-2.過去のアーカイブの確認</a></li>
<li><a href="#03-03-03">&nbsp;&nbsp;&nbsp;3-3-3.被リンクの確認</a></li>
<li><a href="#04">まとめ</a></li>
</ul>
</div>
<br>



<h2 id="01">ドメインとは何か？</h2>
<div class="txt_box">
<p>
ドメインは、ネットワークに接続しているコンピュータの場所を示すインターネット上の「住所」にあたり、同じドメインは存在しません。
通常、ドメインは、IPアドレスとセットでコンピュータネットワーク上に登録されます。<br>
例えば、このサイトの場合「pecopla.net」の部分がドメインとなります。
</p>
</div>

<h2 id="03">ドメインの取得方法</h2>
<div class="txt_box">
<p>
ここでは、独自ドメインの取得方法を見ていきます。
</p>
</div>


<h3 id="03-01">独自ドメイン</h3>
<div class="txt_box">
<p>
ドメインを取得する場合、まず最初にどんなトップレベルドメインで取得するかを決めましょう。主なトップレベルドメインは以下の表の通りです。
</p>
</div>
<table>
  <caption>主なトップレベルドメイン一覧</caption>
  <tr>
    <td>ドメイン名</td>
    <td>備考</td>
  </tr>
  <tr>
    <td>.com</td>
    <td>本来は、商取引事業者だが、サービス名としても利用される事が多い <br>
     特に使用・用途に制限がない。/td>
  </tr>
  <tr>
    <td>.net</td>
    <td>元々はインフラのためのものだが、現在では.comと同じく使用・用途に制限がない。</td>
  </tr>
  <tr>
    <td>.org</td>
    <td>元々は、非営利団体用だったが、現在では.comと同じく使用・用途に制限がない</td>
  </tr>
  <tr>
    <td>.info</td>
    <td>情報サイトであるが、情報サイトでなくても使用が可能。</td>
  </tr>
  <tr>
    <td>.biz</td>
    <td>ビジネス/商用のドメイン</td>
  </tr>
  <tr>
    <td>.name</td>
    <td>主に個人のドメイン名として使われるが、個人名と無関係に普通の「△△.name」というドメインも取得可能</td>
  </tr>
  <tr>
    <td>.pro</td>
    <td>弁護士、医師、会計士及び活動団体</td>
  </tr>
</table>

<br>

<div class="txt_box">
<p>
会社で取得する場合は、「co.jp」や「or.jp」がおすすめです。
これは、「co.jp」や「or.jp」が1組織に1つしか取得できず、「co.jp」ドメインは日本で登記を行っている会社しか取得できず、「or.jp」は財団法人や医療法人などの公共機関に限られるためです。個人でドメインを取得する場合、居住国に関係なく誰でも取得できる分野別トップレベルドメイン（gTLD）がおすすめです。

</p>
</div>

<h3 id="03-03">中古ドメイン</h3>
<div class="txt_box">
<p>
中古ドメインの取得はまず、中古ドメイン販売サイトや、レジスターコンパス(http://www.registercompass.org/)などで、期限切れのドメインを探します。
できるだけ、質の良い中古ドメインを取得するようにしましょう。期限切れの前に対象ドメインが、どんなサイトであったのか、そのドメインがどんなリンクが貼られているのかチェックしましょう。
</div>
<h4 id="03-03-01">対象ドメインのチェック</h4>
<div class="txt_box">
<p>
いくつかの組織では、過去にスパムと判定したIPアドレスやドメインをチェックし、ブラックリストとしてデータベースに登録しています。
取得予定の中古ドメインがブラックリストに登録されていないか確認しましょう。
</p>
</div>

<h5>mxtoolbox</h5>
<div class="txt_box">
<p>
一度に大量にドメインをチェックしようとすると、チェックできなくなりますので注意してください。
</p>
</div>

<div class="img_box">
<amp-img src="https://pecopla.net/wp-content/uploads/2017/08/371b7ba51cb7da942f5931bbc98c4242.png" alt="重複コンテンツチェックツール(こぴらんのチェック画面)" width="625" height="753" />
</div>
<a href="https://mxtoolbox.com/blacklists.aspx" target="_blank" rel="nofollow">ブラックリストチェック(mxtoolbox)</a>
</a><br>

<h4 id="03-03-02">過去のアーカイブの確認</h4>
<div class="txt_box">
<p>
中古ドメインの検索でも過去のアーカイブを確認しましょう。
</p>
</div>

<h5>インターネットアーカイブ</h5>
<div class="txt_box">
<p>
対象の中古ドメインを入力すると、いつ更新がとまったのか、どんな内容のサイトだったのかを知ることができます。
</p>
</div>

<div class="img_box">
<amp-img src="https://pecopla.net/wp-content/uploads/2017/08/371b7ba51cb7da942f5931bbc98c4242.png" alt="重複コンテンツチェックツール(こぴらんのチェック結果)" width="625" height="753" />
</div>
<a href="http://archive.org/web/web.php" target="_blank" rel="nofollow">インターネットアーカイブ</a>
</a><br>

<h4 id="03-03-03">被リンクの確認</h4>
<div class="txt_box">
<p>
最後に、マジェスティックで中古ドメインに貼られている被リンクを確認します。
</p>
</div>

<h5>マジェスティックSEO</h5>
<div class="txt_box">
<p>
検索窓にの中古ドメインを入力すると、被リンクのアンカーテキストや被リンク数や被リンクドメイン、トラストフローなどが確認できます。
</p>
</div>

<div class="img_box">
<amp-img src="https://pecopla.net/wp-content/uploads/2017/08/371b7ba51cb7da942f5931bbc98c4242.png" alt="重複コンテンツチェックツール(こぴらんのチェック結果)" width="625" height="753" />
</div>
<a href="https://www.aguse.jp/" target="_blank" rel="nofollow">被リンクチェックツール(マジェスティックSEO)</a>
</a><br>

<h2 id="04">まとめ</h2>
<div class="txt_box">
<p>
いかがでしたか？今回はドメインとは何か？、独自ドメイン、サブドメイン、中古ドメインのメリットや取得方法をご紹介しました。
特にオールドドメインは便利な反面リスクもあるため、ドメインを取得する場合は、サブドメインか独自ドメインで運用するほうが良いと言えるでしょう。
</p>
</div>
  </body>
</html>

 

2018年2月1日にAMPのコンテンツの同一性に関するポリシーが変更される

Googleは、11月28日付のウェブマスター向け公式ブログにおいて、2018年2月1日以降、AMP ページのコンテンツを（オリジナルの）正規ページのコンテンツと同等にすることがポリシーによって義務付けるとアナウンスしました。

つまり、 AMPページのコンテンツは、オリジナルのページのコンテンツと同等でなければいけません。例えば、記事の一部だけをAMPページに掲載し、「続きを読む」をクリックすると通常ページにアクセスさせるようなサイトはAMPページとして扱われなくなります。

4.まとめ

いかがでしたか？2018年1月18日にGoogleが発表したようにモバイル版のランキング要素にページ速度が加わったことで、記事コンテンツをAMP対応にすることを検討の一つとしていた方もいらっしゃるかもしれません。
上記のようにAMPにはまだまだ制約が多いため、実装が難しいかもしれませんが、今回ご紹介した記事を参考にして記事コンテンツをAMP対応にして頂ければ幸いです。

SEO情報・WEB制作ナレッジコラム一覧

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

全て見る

最新コラム

全て見る

人気コラム

全て見る

カテゴリー検索

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間：平日10:00~19:00(土・日・祝日を除く)