ブログやサイトを運営している方は、「 AMP 」をご存知ですか？公開されてからしばらくたちますが、今げんざい導入率はどれくらいなのだろう？
ＡＭＰはGoogleも推奨する、というかGoogleが提供する新しい規格のプロジェクト。
正式にはAccelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）といい、モバイル端末でのウェブページの表示を高速化するためのプロジェクトです。
Googleのキャッシュを利用した規格らしく、規定の仕様どうりにつくれば一瞬でページが表示される爆速ページになるとのこと。
ただ、導入にはきちんと仕様を理解するひつようがあり、アナリティクスでのアクセス解析やアドセンスでの広告表示なども、指定の方法で記載する必要があります。
Wordpressでサイトを作っている人ならプラグインを導入することでカンタンに導入できるので、今回は導入までの手順を覚書きにしてみました。
WordPress に AMP を導入する
プラグインでカンタン導入
WordPressのメニュー「プラグイン」から「新規追加」を選択。
「ＡＭＰ」で検索すればイチバンに出てきます。
特別な設定項目はありません、インストールして有効化するだけで導入は完了です。
表示を確認してみる
URLの最後に「/amp/」を追加してみるとＡＭＰページが表示されます。
こういう感じの簡素なページが表示されれば、導入成功です。
表示されたページを見てみればわかると思いますが、非情にシンプルなページになっています。
余計な装飾要素が排除されており、場合によっては意図しないデザインに変更されてしまっているかもしれません。
高速表示させることが目的なので、そこは仕方ないかもしれませんね。
排除される要素
WordPress4.4から導入されたEmbed機能（他サイト・ワードプレス記事のURLを貼り付けると↓のような埋め込み表示がでる）のような要素にはまだ対応していないようです。
※Embed機能についてはこちらの記事を参照してみてください
単純な画像やYoutubeの埋め込み動画などは問題なく表示されます。その他の非対応要素は下記のように表示されません。
また、ワードプレス利用者に絵文字を利用する方がいる変わりませんが、絵文字を記事内に入力するとフルサイズ縮尺で表示される場合があるため、絵文字を使って記事を書かれている方は注意が必要です。
アナリティクス、アドセンスを実装する
記事内の要素も対応していない部分が多いＡＭＰですが、アナリティクスやアドセンスも元のページのコードをそのまま載せているだけでは機能しません。
それぞれＡＭＰページで動作するコードを記載する必要があります。
該当のfunction.phpやヘッダー部に直接コードを打ってもよいのですが、こちらもプラグインでカンタン導入できます。
プラグインで導入する
「Facebook Instant Articles & GoogleＡＭＰ Pages by PageFrog」というプラグインを追加しましょう。（名称が長いので以降、PageFrogと記述します）「ＡＭＰ」で検索すれば２番目くらいに出てきます。
ＡＭＰが既に導入されていれば「GoogleＡＭＰ HTML」の項目が「Ready」と表示されます。
画面左のメニューに「Mobile Formats」が追加されているのでその中から「Styling」を選びましょう
設定画面のChoose Logoでサイトのロゴ画像を設定しておきましょう。
ＡＭＰでは「logo」という項目が必須プロパティに指定されているので、ここの設定が抜けているとあとでエラー通知がきます。
（これについては後半に詳しく記述します）
既に他のプラグインやテーマの項目設定などでサイトロゴを指定していればPageFrogで指定しなくても大丈夫な場合もあります。
メディアライブラリー内から画像を選択するか、新たに画像をアップロードします。
該当の画像を選択したら「投稿に挿入」をおしましょう。
他にフォント、文字色、リンクの装飾、ページ上部の帯タイプ等を指定できます。
とくにこだわりがなければ、そのままでよいでしょう。
アナリティクスを設定
次にＡＭＰ用のアナリティクスを指定します。
左メニュー「Analytics」から「GOOGLE ANALYTICS」を選択します。
他のアクセス解析にも対応しているようですが、今回は試していません。
ポップアップが表示されるので、まず自身のGoogleアカウントの連携を許可します。
次に、ＡＭＰページに貼り付けるトラッキングコードを指定します。
１つのGoogleアカウントで複数のサイト、トラッキングコードを管理している場合は、その中から選択できるようになっています。
ＡＭＰページを別に分けてデータを取る場合は、ＡＭＰページ専用のトラッキングコードを作成してもいいでしょう。
トラッキングコードを選択したら「Enable Integration」をクリックして完了です。
逆の手順で、先に「Enable Integration」をクリックしても有効にはならないので、必ずトラッキングコードを先に選択しましょう。
アドセンスを設定
次にアドセンス広告をＡＭＰページに設定します。
通常アドセンスは１ページ内に３つまで貼り付け可能ですが、この方法だと表示できる広告は１ページに１つのみです。
自分でＡＭＰコードをカスタムできる人は３つ貼るようにコードを編集しても良いかもしれませんが、ＡＭＰページ自体が非情にシンプルなため３つも広告が入っているとちょっとしつこいので、ユーザビリティに直接影響しそうな感じもあります…。
左メニューの「Ads」からＡＭＰの項目までスクロールします。
こちらもアナリティクス同様、Googleアカウントを連携し、指定の広告コードを選択します。
ＡＭＰページ用の広告枠をつくっておくとデータを取るのに便利です。
ボクはレスポンシブ広告枠で作成しましたが、広告コード選択後に表示される「Enable Google AdSense forＡＭＰ HTML Pages」をチェックすれば自動で最適化される（？）ようなので、チェックします。
最後に「Save All Settings」で設定を保存し完了です。
既に公開済みの記事の設定
左メニュー「Settings」から既に公開済みの記事とこれから投稿する記事の設定が可能です。
「Setting for published posts」で公開済みの記事にＡＭＰページを適用するか。
「Default setting for new posts」で今後記事を投稿する際に自動でＡＭＰページを作成するかを設定できます。
とくにこだわりがなければ、どちらも設定しておくとベストでしょう。
エラー修正のメールが届いたら
導入してからしばらくして「ＡＭＰページのエラーを修正してください」というメール通知が届きました。
プラグインの導入でカンタンに始めることが出来ますが、先述したように必須のプロパティがかけているときちんと機能しません。
GoogleはＡＭＰページがきちんと用意されているサイトはSEOにもプラスの効果があるとコメントしているようですからエラーは極力修正していきたいところ。
サイトやブログをSearch Consoleに登録していれば、ＡＭＰのエラーをメールで通知してくれます。
さっそく、エラーの詳細を確認してみましょう。
Search Consoleのページに飛ぶとエラーの詳細を表示してくれます。
今回ボクの場合は計５件のエラーがあるようでした。
まず「１ 同等のＡＭＰタグがある HTMLタグの使用禁止」というエラー。
要は、記事内で<font>タグを使うな、ということらしいです。
HTML5から<font>が廃止になったのでそれに準じているのでしょうか。いまだにちょっとした修正にはクセでfontタグを使ってしまうのですが、これがダメってことですね。
記事内の<font>タグを削除し、文字装飾が必要なら<span>などでcss指定しなおします。
次に「２ 必須の構造化データのエラー」これが先述したエラーです。
（すごく簡単にいえば）ＡＭＰは記事内の要素（プロパティ）をJSONというデータ形式に書き出してそれらを読み込んでいるようです。
このデータ群には構成上、必須の項目があり、それが足りていないっていうエラーです。
今回のボクの場合、「logo」プロパティと「image」プロパティがないゾ！とのこと。
先述しましたが、「logo」プロパティはサイトロゴを設定していればそれが参照されます。
が、なんらかの理由でそれが参照されていない＆そもそも設定していない場合にこのエラーがでます。
logo プロパティエラー：ロゴ画像を設定する
https://twitter.com/OHexuan/status/702455568582070272
WordPress標準のカスタマイザーなどからロゴ画像を指定できるようですが、テーマによってはデザインに影響する場合があるので、今回はカスタマイザーからの設定は辞めておきました。
※ちなみにボクはSTINGER7というWordpressテーマを使用していますが、このテーマの「STINGER管理」という項目から設定できる「アイコン」や「ファビコン」の設定とは別物です。
そこで前項で紹介したPageFrogを利用します。
ここでロゴ画像を指定することでこのエラーは解消されます。きちんとロゴ画像が設定されているとPageFrogのプレビュー画像でロゴ画像が表示されていればきちんと設定できています。
image プロパティエラー：適切なアイキャッチ画像を設定する
次にimageプロパティのエラーです。
このプロパティは記事にアイキャッチ画像があり、かつその画像が696ピクセル以上なら自動的に設定されるプロパティのようです。
ボクは記事にはほぼ毎回アイキャッチ画像を指定しています。
使用しているテーマSTINGER7では記事一覧に表示されるサムネイル画像にアイキャッチが利用されるのですが、696ピクセル以上などの大きい画像をアイキャッチに指定すると、その大きい画像から自動でサムネイルがトリミング作成されてしまうことが個人的に好ましくありません。
そのため毎回、四方200ピクセルぐらいの正方形のアイキャッチ画像を作るというちょっと面倒いことをしているのですが、これがアダになりました。
アイキャッチのサイズが小さいとみなされてエラーが出ているようです。
（じゃあ、そもそもアイキャッチなしの記事は全部エラーになるのでしょうか…？謎。）
プラグインの「プラグイン編集」からＡＭＰを指定。
「amp/includes/class-amp-post-template.php」というファイルを編集します。
$image_metadata = $this->get_post_image_metadata();
if ( $image_metadata ) {
$metadata['image'] = $image_metadata;
}
上記のコードの下に下記のコードを挿入します。
if ( !$metadata['image'] ) { //アイキャッチエラー対策のため追加
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => '◯◯◯（指定の画像のURL）',
'width' => 指定の横幅（696以上）,
'height' => 指定の縦幅,
);
}
これで要件を満たすアイキャッチ画像がない場合、指定の画像を参照するようになります。
ただ、プラグインファイルを直接編集しているので、ＡＭＰプラグインのアップデートがあった場合、更新すると元の状態に上書きされてしまいますのでご注意下さい。
あとがき
ちょっとややこしい部分もありますが導入はカンタンです。
デザイン性を損なう点、カスタム性が乏しいことはまあ仕様上しかたがないのかなあ…。
プラグインを使わずに自力で導入する方法もあるみたいで、こちらは少しデザイン性に幅をもたせられそうなので近いうちにチャレンジしてみようと思います。
[myphp1 file=”series_amp”]