SEO対策なら株式会社ペコプラ > SEO対策 > SEO内部対策 > SEO対策をする上でAMP対応はするべき？メリットやタグのルールなどを解説

SEO対策をする上でAMP対応はするべき？メリットやタグのルールなどを解説

SEO内部対策

SEO対策

2021.07.19

Googleが推奨しているAMP。AMPとはどのようなものなのか、わからないという方もいるでしょう。AMPを導入することで、さまざまなメリットやデメリットがあります。当記事では、AMPとはなにか、導入するにはどうすればいいのかなどをご紹介しています。AMPの導入を考えている方は、是非参考にしてください。

1 AMPとは
- 1.1 AMPとSEOの関連性
2 AMP導入のメリット
- 2.1 ユーザビリティが向上する
- 2.2 検索結果の目立つ場所に表示されやすくなる
3 AMP導入のデメリット
4 AMPの実装方法
- 4.1 AMPを実装するための主な注意事項
5 AMPにおけるHTMLタグのルールとは
- 5.1 AMPの実装サンプル
6 AMPページとして問題ないか確認できるツール4選
7 AMPは導入したほうがいいの？
8 まとめ

AMPとは

AMPとは、モバイル端末でWEBページをすばやく表示させるためのフレームワークのことです。JavaScriptの使用を制限し、アニメーションやグラフィックスなどを高速で読み込みます。

AMP対応のサイトは、検索結果のカルーセルの中にコンテンツが表示されやすくなります。

カルーセル

カルーセルは検索結果の目立つ位置に表示される、画像の赤枠の部分のことです。

※以前までは、トップニュースの枠に表示されるためにはAMP対応が必須でしたが、現在はAMP未対応でもトップニュース枠に表示されます。

AMPとSEOの関連性

AMPに対応することで、SEO効果が期待できます。

Googleは、読み込み速度の速さもSEOの要素の1つとしています。そのため、AMPに対応させ、読み込み速度をあげることで、Googleから評価されやすいページになる可能性があります。

ですが、あくまでも最優先事項はコンテンツの内容となりますので、ただ読み込み速度が早いだけで、検索順位が向上するわけではありません。

ですが、競合サイトと比較し、コンテンツの内容の評価が同等で、自社サイトのほうが表示速度が早い場合は、競合サイトよりも評価される可能性があります。

ですので、AMP対応することで検索順位が向上する可能性はあると言えます。

参考：Google「サイトの速度について」

AMP導入のメリット

AMPを導入することで、どのようなメリットがあるのでしょうか。主なメリットとしては、次の2つが挙げられます。

ユーザビリティが向上する
検索結果の目立つ場所に表示されやすくなる

それぞれ、詳しくみていきましょう。

ユーザビリティが向上する

AMP対応のコンテンツは読み込み速度が上がりますので、コンテンツを見ているユーザーがストレスを感じにくくなります。ページの表示速度が遅いとユーザーの離脱率の上昇の原因にもなりますので、表示速度を向上させることで、ユーザーの離脱を防ぐことができ、ユーザビリティの向上といった効果に繋がります。

▼関連記事

スマホサイトのユーザビリティが検索順位を上げる！SEOに効果的な改善ポイント7つ

PCよりモバイルでの閲覧ユーザーが増えるにつれて、重要度が増しているのが「スマホのユーザビリティ」です。そこで本記事では、なぜスマホのユーザビリ…

検索結果の目立つ場所に表示されやすくなる

上記でも記載しておりますが、AMP対応のページは検索結果のすぐ下にカルーセルとして表示されやすくなります。そのため、コンテンツが目立つ位置に表示され、クリック率の上昇が見込める可能性があります。

さらに、AMP対応ページには雷マークが付くため、ユーザーの目に多少付きやすくなるという特徴もあります。

なお、以前まではGoogle検索結果のトップニュースに掲載されるには、AMP対応であることが条件でしたが、現在はそうではなくなりました。

現在、トップニュースに掲載されるための条件は、Googleニュースのコンテンツポリシーを満たしているかどうかというものだけです。

ただ、Googleニュースのコンテンツポリシーの中には、ユーザビリティが高いかどうかという項目もあります。そのため、表示速度が早いAMP対応のコンテンツは、依然としてトップニュースに掲載されやすいといえるでしょう。

AMP導入のデメリット

続いて、AMP導入のデメリットを見ていきましょう。デメリットとしては、次の3つが挙げられます。

AMP対応前と対応後でデザインが変わる可能性がある
対応している広告が限られている
管理に手間がかかる

それぞれ、詳しく見ていきましょう。

AMP対応前と対応後でデザインが変わる可能性がある

AMPではJavaScriptが制限されます。そのため、AMP対応ページ（モバイルページ）とAMP未対応ページ（PCページ）ではデザインが大きく変わってしまう可能性があります。

また、サイトによってAMP導入の方法も異なり、AMPを導入するのは簡単とはいえません。思い通りのデザインにするには、ある程度コーディングの知識が必要です。

また、AMP導入を行い、デザインが大きく変わってしまった事が影響し、逆にユーザビリティの低下につながる可能性もありますので、導入する際はしっかりと注意を行いましょう。

対応している広告が限られている

AMPページに広告を設置している場合、広告が表示されないことがあります。AMPページに広告を表示させるには、AMP対応のディスプレイ広告ユニットを作成しなければいけません。その方法は、Googleのヘルプページにて解説されています。

また、Google以外の広告など、AMPに非対応の広告もあります。使用できる広告に制限があるのもデメリットといえるでしょう。

管理に手間がかかる

AMPを導入した場合、導入前のHTMLソースと、導入後のAMP HTMLの両方を管理しなければいけません。その分、管理に手間がかかってしまうこともデメリットの1つして考えられます。

AMPの実装方法

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

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

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

<!DOCTYPE html>

HTML5については下記の記事でも解説していますので、ご興味のある方は是非ご覧ください。

HTML5を初心者の方のために分かりやすく解説！学習サイトも紹介

今ではWebサイト制作の定番スキルとなったHTML5。その一方で「HTML5ってHTML4と何が違うの？」「どうやって学習したらいいの？」と思わ…

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

<html amp>

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">

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">

canonical属性については下記の記事でも解説しています。

SEO対策をする上でAMP対応はするべき？メリットやタグのルールなどを解説

Googleが推奨しているAMP。AMPとはどのようなものなのか、わからないという方もいるでしょう。AMPを導入することで、さまざまなメリットや…

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

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

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

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>

AMPにおけるHTMLタグのルールとは

AMPでは、通常のHTMLとは異なるタグを使用します。以下にまとめましたので、参考にしてください。

通常のHTML	AMPのHTML
<img>	<amp-img>…</amp-img>に置き換え
<video>	<amp-video>…</amp-video>に置き換え
<audio>	<amp-audio>…</amp-audio>に置き換え
<iframe>	<amp-iframe>…</amp-iframe>に置き換え
<base>, <picture>, <frame>, <frameset>, <object>, <param>, <applet>, <embed>	使用不可
<script>	type=”application/ld+json” または type=”text/plain”のみ使用可能
<style>	<style amp-custom>…</style>に置き換え
<link rel=”stylesheet”>	カスタムフォントのみ使用可能

カスタムフォントのみ使用可能AMPに対応させるには、以下のテンプレートをコピーして、.html 拡張子ファイルとして保存します。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>Welcome to the mobile web</h1>
  </body>
</html>

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>独自ドメイン</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>中古ドメイン</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>

AMPページとして問題ないか確認できるツール4選

最後に、AMPを導入した際に、そのページが問題ないかチェックできるツールを紹介していきます。せっかくAMPを導入しても上手く反映されていなければ意味がありません。ツールを使って確認しておきましょう。

AMPテスト

出典：https://search.google.com/test/amp

「AMPテスト」はテストしたいページのURLを入力するだけでチェックできるツールです。問題なければ「有効なAMPページです」と表示されます。問題があった場合は問題箇所が表示されますので、指示に従って修正してください。

AMP Validator

出典：https://validator.ampproject.org/

「AMP Validator」はAMPプロジェクトが提供しているチェックツールです。チェックしたいページのURLを入力し、「VALIDATE」をクリックすると、エラー箇所にマーカーがつきます。マーカーが付いた場合はその箇所を修正してください。

Search console

サーチコンソールでもAMPページが問題ないかチェックできます。

ホームから確認したいサイトを選択し、「拡張」の項目内にある「AMP」をクリックすることで、インデックス数や発生しているエラーが表示されますので、エラーが表示されている場合は、内容を確認し修正してください。

▼関連記事

サーチコンソールとは？設定方法や活用方法を分かりやすく解説

サーチコンソールは、Googleが無料で提供している解析ツールです。上手に使うことで、効率的にSEO対策をすることができます。Googleアナリ…

デベロッパーツール

AMP対応に問題がないか調べる際には、デベロッパーツールでの確認も可能です。

AMPページのURL末尾に「#development＝1」を付けてページを表示させます。そして、デベロッパーツールを起動してください。

デベロッパーツールは、chromeであれば設定から起動できます。「設定(右上の︙)」→「その他のツール」→「デベロッパーツール」の順でクリックしてください。また、「Ctrl＋Shift＋i」または「Cmd＋Opt＋i」のショートカットキーで起動することもできます。

デベロッパーツールの開き方

デベロッパーツールを起動したら、「Console」をクリック。「Powered by AMP」と表示されれば問題ありません。ページに問題があればエラーが表示されるので、指示に従って修正してください。

▼関連記事

Chromeデベロッパーツールの便利な使い方！タブの用途・使い方のコツを解説

Google Chromeデベロッパーツールを使いこなせていますか？経験豊富なプロのエンジニアやWebデザイナーに限らず、初心者ブロガーにとって…

【CWV】Googleデベロッパーツールで表示速度低下の原因調査

WEBサイトにおいてページの表示速度はユーザーの離脱率を抑える上で重要な要素です。更に、Core Web Vitals（コアウェブバイタル）が…

AMPは導入したほうがいいの？

ここまで、AMPについて解説してきましたが、結局のところAMPは導入したほうがよいのでしょうか。

AMPは管理が大変なものの、導入すればサイトの表示速度が向上するなどのメリットがあります。ですが、サイトによってはデザインが変わってしまうなどのデメリットもあるため、一概にAMP導入がSEOに大きなメリットがあるとは限りません。ですので、労力に対する成果を挙げられるかといえば、そうではない可能性があるといえます。

そのため、AMPの導入を行うよりは、コンテンツの見直しなど、基本的なSEO対策をおこなったほうがよいのではないでしょうか。