AMPという言葉をご存知でしょうか？Accelerated Mobile Pagesの略で、一言でいうと、モバイル端末でウェブページを高速表示するためのプロジェクト・フレームワークです。
今回は、このAMPについてご紹介します。AMPとは何かから、具体的な実装方法例もご紹介しますので、ご参考になさって頂ければと幸いです。
目次
AMPとは、Accelerated Mobile Pagesの略で、GoogleとTwitterなど共同開発している、モバイル端末でウェブページを高速表示するためのプロジェクト、フレームワークのことです。
AMP対応したサイトやページは、Google側にキャッシュとして保存され、専用のマークが表示されます。次にAMP対応にすることのメリットやデメリットをご紹介していきます。
AMPにするメリットは主に以下の3つが挙げられます。
AMPに対応したコンテンツは、サイトにアクセスした際にGoogle側のキャッシュを参照するため、通常のページを開いた時よりも読み込み時間が短縮されます。早くコンテンツが表示されることで、ユーザの離脱を防ぐことができる可能性があります。
2018年1月18日、Googleのウェブマスター向け公式ブログ(日本語版)において、ページ読み込み速度をモバイル検索のランキング要素に使用すると発表しました。これにより、前述した理由によりAMPなど読み込み速度が速いコンテンツの方が、上位化につながると考えられます。なお導入は2018年7月からのようです。
公式ブログではページ速度が遅いコンテンツに関しては、影響する旨を公表しておりますので、ページ読み込み速度が遅いコンテンツを運営されている方は、AMPの導入を検討してみても良いかもしれません。
AMPに対応したコンテンツは、検索結果直下に大きく表示され、記事が読まれる確率があがります。
一方AMPにするデメリットは主に以下の3つが挙げられます。
高速表示させるため、シンプルなHTMLとCSSのみで記述するため、デザインが大きく崩れる可能性があります。また、JavaScriptに対応していないため、JavaScriptを多用しているサイトの場合コンテンツがうまく表示できない可能性があります。
さらに、CSSも上限50KB制限があり、style属性にCSSを記述することが禁止されている、画像の高さや幅を指定するなどいくつか制約があります。
具体的な制限については次のamp対応方法にて解説します。
PC版、スマホ版に加え、AMP専用のページが必要となってくるため、作成・運用・管理コストが増えてしまう可能性が高い。また、現状これをすればAMP対応というものがないため、まず自身のサイトの調査から始める必要があり、現段階では導入までの敷居が少々高い。
AMPに対応したページでは、javascriptが使えません。そのため、AMPに対応したアナリティクスを設置する必要があります。
また、ページやそのキャッシュをさまざまな方式で配信するために、適切にユーザーを識別することができずダブルカウント等が起こり、AMPページの解析には別のプロパティを作る必要があります。
アナリティクスについては下記の記事でも解説しています。
それでは、実際のAMPコンテンツの実装方法を見ていきましょう。まず、前述しましたように、通常のhtmlとは異なりますので、実装には十分注意してください。
以下に基本的な注意事項を記載します。
AMPのHTMLはhtml5が基本となりますのでHTMLの宣言は以下のようになります。なお大文字小文字どちらでも構いません。
<!DOCTYPE html>
HTML5については下記の記事でも解説していますので、ご興味のある方は是非ご覧ください。
htmlタグは ampもしくはAMP専用の絵文字を記述します。AMP HTMLが通常のHTMLと違う部分は、絵文字で表現することも可能という点です。
<html amp>
こちらは、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ページがない場合は、AMPページ自身を指定します。
また、AMPの元になった正規のページには、AMPページの存在をlink要素のamphtml属性を使って明示します。特にamphtml属性は通常のhtmlにない属性のため注意してください。
▼AMPページ
<link rel="canonical" href="AMPの元になったURL">
▼AMPの元になったページ
<link rel="amphtml" href="AMPページのURL">
canonical属性については下記の記事でも解説しています。
AMP用JavaScriptライブラリーを読み込むためのスクリプトをヘッダーの閉じタグの直前に追加する。
<script async src="https://cdn.ampproject.org/v0.js"></script>
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>
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>
HTMLタグの制約事項は以下の表のとおりです。とくにimgタグは高さと幅を指定する必要があります。
| 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のみ設定可能。それ以外は制限なし。 |
AMP対応のページを作成したら、実際にAMPに対応しているかどうかチェックしてみましょう。チェックツールがありますのでご紹介します。
Google Chromeをインストール済みの場合、ディベロッパーツールで、AMPが正しくコーディングできているか検証することができます。
ChromeのURLバーにAMPページのURLに#development=1をつけてアクセスします。
例:https://test.net/amp/amptest.html#development=1
まず、Chromeのディベロッパーツールを起動します。起動方法は以下の2つがあります。
1.[Google Chromeの設定]（一番右の3本バーor3本点）→[その他のツール] →[デベロッパー ツール]
2.Windowsの場合は、Ctrl+Shift+iを同時に押すか、F12を選択。Macの場合は、Cmd+Opt+i。
デベロッパーツールで「Console」メニューを選択します。Console画面にAMP対応ページであることのメッセージと解析を行った結果が表示されます。AMPHTMLの仕様に準拠していない箇所がない場合、「AMP validation successful」と表示されます。エラーがある場合は、エラーメッセージとが該当箇所の行数と文字数が表示されますので、該当箇所を修正していきましょう。
なおウィルスソフトによっては勝手にスクリプトタグが埋め込まれ、有効なAMPページと見なされない可能性があります(カスペルスキーはWEB関連保護機能で勝手にスクリプトを埋め込むようです)。
Chromeのディベロッパーツールについては下記の記事でも解説しています。
Googleでは、AMPページの検証するテストツールを公開しています。チェック方法は簡単で、テストするURLを入力し、「テスト実行」ボタンをクリックするだけです。純粋に書かれているソースを解析するので、先ほどのディベロッパーツールのように、ウィルスソフトによるスクリプトタグで有効な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"> 3-1.独自ドメイン</a></li>
<li><a href="#03-03"> 3-3.中古ドメイン</a></li>
<li><a href="#03-03-01"> 3-3-1.対象ドメインのチェック</a></li>
<li><a href="#03-03-02"> 3-3-2.過去のアーカイブの確認</a></li>
<li><a href="#03-03-03"> 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>
Googleは、11月28日付のウェブマスター向け公式ブログにおいて、2018年2月1日以降、AMP ページのコンテンツを（オリジナルの）正規ページのコンテンツと同等にすることがポリシーによって義務付けるとアナウンスしました。
つまり、 AMPページのコンテンツは、オリジナルのページのコンテンツと同等でなければいけません。例えば、記事の一部だけをAMPページに掲載し、「続きを読む」をクリックすると通常ページにアクセスさせるようなサイトはAMPページとして扱われなくなります。
いかがでしたか？2018年1月18日にGoogleが発表したようにモバイル版のランキング要素にページ速度が加わったことで、記事コンテンツをAMP対応にすることを検討の一つとしていた方もいらっしゃるかもしれません。
上記のようにAMPにはまだまだ制約が多いため、実装が難しいかもしれませんが、今回ご紹介した記事を参考にして記事コンテンツをAMP対応にして頂ければ幸いです。
受付時間：平日10:00~19:00(土・日・祝日を除く)
