今回は、エックスサーバー(X10)を使ってValidate AMP環境を整える手順のご紹介です。
Validate AMP環境は、npmを使います。エックスサーバーにnpm、node環境も一緒に構築しています。

nodeのバージョンは、v6.11.0です。

エックスサーバーにnode、npmをインストールする

エックスサーバーのgcc、g++のバージョンは、4.1.2と古いです。古すぎるため、node-v6.11.0のソースコードからコンパルすることができません。

エックスサーバーはLinuxを採用しています。
そのため、gccが古くても、直接バイナリーを入手することで対応可能です。

linux 64bitバイナリー版を入手し、手動で展開します。

展開後のイメージは、
~/local/bin/node
~/local/bin/npm
~/local/include/node/
~/local/lib/node_modules/
です。

ご自身の環境に合わせて、~/localを変更してください。

1. エックスサーバーにsshでログインします。
   

    

   
   
   
2. node v6.11のLinux64ビットバイナリーをダウンロードします。
   $ curl -O https://nodejs.org/dist/v6.11.0/node-v6.11.0-linux-x64.tar.xz
   
   xz拡張子は、XZ Utilを使って解凍します。
   
3. ブラウザからxz-5.2.3.tar.bz2をダウンロードし、エックスサーバーに転送します。
   

   gz版もあるので、お好きなものをダンロードしてください。
   XZ Util 入手先：https://sourceforge.net/projects/lzmautils/files/

   
   
   
4. XZ Utilを解凍＆コンパイル＆インストールします。
   

   $ bzip2 -dc xz-5.2.3.tar.bz2 | tar xvf -
   $ cd xz-5.2.3
   $ ./configure --prefix=$HOME/local
   $ make
   $ make install
   
   これで、~/local/binにxzがインストールされます。
   

   
   
   
5. node-v6.11.0-linux-x64.tar.xz を解凍＆展開します。
   $ ~/local/bin/xz -d node-v6.11.0-linux-x64.tar.xz
   $ tar xvf node-v6.11.0-linux-x64.tar
   
   
6. node/npm環境を~/localに配置します。
   $ mv node-v6.11.0-linux-x64/bin/* ~/local/bin/.
   $ mv node-v6.11.0-linux-x64/include/node ~/local/include/.
   $ mv node-v6.11.0-linux-x64/lib/node_modules ~/local/lib/.
   
   

ここまでで、node,npmがエックスサーバーにインストールできました。
~/local/binへパスを通しておくと便利です。

bashrcファイルを編集して、
export PATH=$PATH:~/local/bin
を追加します。

$ vi ~/.bashrc

編集内容を適用した直後からnpmが使えます。
$ source ~/.bashrc

AMPってなに？

AMPとは、Accelerated Mobile Pagesの略で、HTML規格の１つです。

AMPプロジェクトは、ウェブをより良いものにすることを目指すオープンソースの取り組みです。このプロジェクトでは、デバイスや配信プラットフォーム全体で一貫して高速で美しく高性能なウェブサイトや広告を作成することができます。

公式ページ： https://www.ampproject.org/

AMP対応のメリットは、google検索の上位にカルーセルで表示

AMP対応は別にしなくても大丈夫です。
AMP対応していないページでも、PC、モバイルどちらの検索結果にも表示されます。

AMP対応したWebページは、Googleの検索結果上位に画像付きカルーセルで表示してくれるメリットがあります。
現状のAMP対応ページは、Googleでキャッシュされる仕組みです。

そのため、検索結果をクリックしてからブラウザにページが
反映されるまでの時間がとても速いメリットもあります。


AMPはモバイルユーザー限定の機能です。カルーセルに表示されなくても、稲妻マークでAMP対応していることがわかります。

「AMP対応ページはストレスがない」ってことをユーザーが体験していくことで、
検索結果から稲妻マークに対応したページを率先して選ぶようになっていくのではないでしょうか

WebページをAMP対応させる方法

ワードプレスサイトは、プラグインをインストールすることでAMP対応がほぼ完了します。

ACCELERATED MOBILE PAGES PROJECT公式のプラグイン：https://ja.wordpress.org/plugins/amp/

今あるワードプレスの記事をAMP対応してくれます。
ただ、アドセンス、広告などには対応していません。

HTMLサイトやACCELERATED MOBILE PAGES PROJECT公式のプラグインでは力不足っていう場合は、自力でAMP対応する必要があります。


AMP対応するための手順や仕様書は、こちらのURLに詳しく掲載されているので参考にしてください。
AMP ページの Google 検索ガイドライン：https://support.google.com/webmasters/answer/6340290?hl=ja
AMP対応の仕様書：https://www.ampproject.org/docs/reference/spec

カルーセルに表示するようにするためには、最低限こちらの適切なマークアップ プロパティを設定する必要があります。
適切なマークアップ プロパティ：https://developers.google.com/search/docs/data-types/articles#article_types

AMP対応しているかをチェックする３つの方法とメリットデメリット

WebページをAMP対応させる方法でAMP対応させたページが本当に対応できているのか？を簡単にチェックする方法があります。

その方法は、Google Chromeを使ったチェック方法です。

• ブラウザでAMP対応のWebページを開いて、
  URLに#development=1を追加して、再表示させます。
  
• 右クリックで「検証」を表示させるか、メニュー（表示メニュー）デベロッパーツールを表示させます。
  
• ConsoleにPowered by AMPとともにメッセージが表示されます。赤いエラーログがなければOKです。
  

もうひとつの方法は、こちらのURL経由でチェックする方法です。
https://validator.ampproject.org

• URLにご自身のサイトを指定し、「VALIDATE」ボタンをクリックすることでチェックできます。
  

これら２つの方法は、単一ページや少ないページのAMP対応を確認するのに重宝します。

チェックしたいページ数が増えてくると、確認する手間がかかるのがデメリットです。


複数ページをまとめてAMP対応しているかのチェックをしたい場合、スクリプトで一括処理できるコマンドラインツールが便利です。
https://www.npmjs.com/package/amphtml-validator

Webでやる方法と比較するとデメリットは、nodeが必要になることです。

エックスサーバーでValidate AMP環境を整える

ここでは、エックスサーバーを使ってamphtml-validatorが実行できる環境を整えています。

「エックスサーバーにnode、npmをインストールする」でエックスサーバーでnodeが動作する環境を整えています。

インストールしたnode、npmのバージョンは以下コマンドで確認できます。
$ node -v
v6.11.0

$ npm -v
3.10.10


amphtml-validatorは、npmで簡単にインストールすることができます。

$ npm install -g amphtml-validator
/home/アカウント/local/bin/amphtml-validator -> /home/アカウント/local/lib/node_modules/amphtml-validator/index.sh

> amphtml-validator@1.0.20 postinstall /home/アカウント/local/lib/node_modules/amphtml-validator
> /bin/sh -c "exit 0" 2> postinstall.DELETEME && rm postinstall.DELETEME || node postinstall-windows.js

/home/アカウント/local/lib
└─┬ amphtml-validator@1.0.20
├── colors@1.1.2
├─┬ commander@2.9.0
│ └── graceful-readlink@1.0.1
└─┬ promise@7.1.1
└── asap@2.0.5

インストールはnpm install -g amphtml-validatorで完了しました。
amphtml-validatorは、node/npmがインストールされたディレクトリにインストールされます。

これで、エックスサーバーで確認できるValidate AMP環境は整いました。

エックスサーバーでValidate AMPを動作させる

使い方は、amphtml-validator AMP対応しているかチェックしたURLです。

$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS

エラーが発生するURLを指定するとこんな感じに表示されます。
$ amphtml-validator https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html
https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/components/amp-img)
・
・
・
・

まとめ

広く普及しているLinuxを使ったエックスサーバーだと簡単にインストールすることができます。

バイナリーが用意されているって便利です。

マイナーなUnix系のディストリビューションだとバイナリーが用意されていないことが多いので大変です。
gccのインストールから始めないと使えません。