RailsでAMP対応する方法と注意点

      2016/06/15

SEOをやっているかたやWEBサイトを運営している方の中に「最近よくきくAMPってなんなの?」、「どうやって対応するの?」と気になっている方が多いのではないでしょうか。
仕事がらAMPについては耳にしていましたが、ニュース性のものが対象なのかと思いちょっと距離をとっていましたが
なぜか急に興味がわいてきたため私の個人サイト(Rails)に対してAMP対応をしてみました。

このページでは具体的なAMP対応方法をRailsサイトについて紹介していきます。
エンジニアで「AMPってどんなもの?」、「実装って大変?」と疑問に思っている方に対し、AMP対応方法やリファレンス、私がはまった注意点について紹介していきますので
参考になれば幸いです。

AMPとは?何ができるの?

AMP(Accelerated Mobile Pages)とは2015年からGoogleが進めいているプロジェクトで、スマホのWEBブラウジングが快適になるための仕組みです。
大半のWEBサイトではPCによるアクセスよりもスマホからのアクセスが多くなってきている状況でスマホによるWEBブラウジングをより良いものにしようとしています。
具体的にはAMPに対応したページをキャッシュすることにより、これまでのページ表示よりも格段に早く表示ができることとなります。

AMPの実装のイメージ

AMP対応として、対応したいページ(次からはオリジナルページといいます)をもう一つ作るイメージです。
技術的な特徴としては下記のようになります。

  • オリジナルページとは別にAMP対応ページのURLを用意する
  • 外部ファイル化したスタイルシートは利用できない
  • スタイルシートの一部の記述が使えない
  • スタイルシートの容量は50kByteまで
  • htmlタグの一部が使えない

これを理解しておくだけで次からの開発流れがつかみやすくなると思います。
注意点としては、スタイルシートやhtmlタグについてはAMPように準備する必要がでてくる可能性が高いので気をつけてください。
(ここでは力づくで回避する方法を紹介していますが。。)

AMP対応の開発の流れ

AMP対応の開発の流れは下記のようになります。

  1. MIMEとしてamp追加
  2. AMP対応ページのURLを決める
  3. AMPページのURLを通常ページに指定する
  4. controllerでampに対応するviewをレンダリングするようにする
  5. viewを用意する
  6. bodyタグ内のコーディング
  7. スタイルシートのコーディング
  8. 検証チェックする
  9. Fetch as Googleをかけて待つ

以降では、この流れに沿って説明していきます。
注意点やリファレンスも随時紹介していきます。

MIMEタイプとしてampの追加

html、jsonに続き、MIMEタイプとしてampを追加します。

config/initializers/mime_types.rb

WEBrick(rails s)を再起動しましょう。

AMP対応ページのURLを決める

オリジナルページのURLとは別のAMP対応のURLを決めましょう。

私はオリジナルページ

を、APM対応ページ

としてました。

AMP対応ページでもオリジナルページと同じ内容を表示するため、同じcontrollerやrouteが使えるようにするのが良いと思います。

AMPページのURLを通常ページに指定する

オリジナルページのhead内に、AMP対応ページのURLを指定します。
下は表示イメージです。

URLは絶対パス、相対パスのどちらでも問題ありません。
私は開発環境が変わっても影響を受けない相対パスを利用していますが、SEO的には絶対パスが良いという都市伝説もあります。

Railsでは、layoutで指定することになるでしょう。
request.pathあたりから動的に出力すればOKだと思います。
(私は、設計上の都合で下記のコードを利用していません&試していません)

ノーマルなlayoutは「app/views/layouts/application.html.erb」になると思います。この変更例は下記の用になります。

controllerでampに対応するviewをレンダリングするようにする

MIMEタイプがampできたら、ampに対応するビューをレンダリングするようcontrollerを修正します。

該当のcontroller actionの最後に下記を追加します。

コントローラ「app/controllers/xxx.rb」の変更例は下記のようになります。

注意点はlayoutを使わないようにしています。
理由は、一部のhtmlタグと一部のCSSが使えないため、はまる可能性が高くなるためです。
レイアウトの表示をしたい方は、:layout => falseの指定を任意のレイアウトにしましょう。

ここまでは簡単ですね。

viewを用意する

ここからがAMP仕様に依存してきます。

まず、viewを用意しましょう。

app/views/xxx/yyy.amp.erb

のようなファイル名になるかと思います。

用意したファイルに、下記のAMPのテンプレートを貼り付けます。
テンプレートは下記のサイトを参考に作りました。ありがとうございます。

出店元:
AMPの説明に詳しい「Syncer」(https://syncer.jp/amp)
SEOの情報に詳しい「海外SEO情報ブログ」(https://www.suzukikenichi.com/blog/schema-org-articles-for-amp/)

一般的なWEBサイトであれば、これで問題ないでしょう。
対応できないものとしては、Twitter/Facebook/画像のカルーセル対応/動画/音楽 です。

あとから拡張していくことも可能だと思いますので、取り急ぎAMP対応したい方、理解したい方はこのテンプレートを使うことをおすすめします。

このテンプレートから下記のものを変更していきましょう。

  • title
  • canonical
  • application/ld+jsonの下記のプロパティ
    • mainEntityOfPage -> @id:サイトのURL
    • headline:ページタイトル
    • image -> url:アイキャッチ画像のURL
    • datePublished:公開日時
    • dateModified:更新日時
    • author -> name:著者名:
    • publisher -> name:サイト名
    • publisher -> logo -> url:サイトロゴ画像のURL
    • publisher -> logo -> width:サイトロゴ画像の幅
    • publisher -> logo -> height:サイトロゴ画像の高さ
    • description:概要

エンジニアとしてはscriptやstyleの内容を理解したいでしょうが、これをカスタマイズする機会はほぼないようなので無視して大丈夫でしょう。

次に気になるのは「application/ld+json」でしょう。
これは、構造化データといいGoogleに掲載内容を伝える書式なようなものです。

レビューや製品、記事など様々あり「構造化データマークアップ支援ツール」(https://developers.google.com/structured-data/testing-tool/?hl=ja)でも作れるはずでしたが試しにやってみたところ失敗したので私はいったんこれで進めました。

変更した構造化データはあとでテストしますので、編集が完了したら次の工程にうつりましょう。

bodyタグ内のコンテンツの追加は次で説明します。

bodyタグ内のコーディング

当たり前ながらbodyタグ内に伝えたいコンテンツをhtmlでコーディングしていきますが、AMPの場合は一部のタグが利用できませんので注意ポイントです。
使えないタグは、AMP専用のタグにするか使用しないようにします。

具体的には、imgタグは利用できません。その代わりamp-imgタグを利用します。
単にamp-imgタグを利用すれば良いかというとそれだけではなく、amp-imgタグの必須属性も指定しなければいけません。

具体的には、src、width、height属性です。
これを指定しないと「The implied layout 'CONTAINER' is not supported by tag 'amp-img'」なるエラーがあとからでます。
参考:https://www.ampproject.org/docs/reference/validation_errors.html#implied-layout-isnt-supported-by-amp-tag
AMPでは利用できないタグ一覧です。

禁止タグ 対応
img amp-imgを利用する
form 利用不可
input 利用不可
textarea 利用不可
select 利用不可
option 利用不可
iframe amp-iframeを利用する
video amp-videoを利用する
audio amp-audioを利用する
base 利用不可
frame 利用不可
frameset 利用不可
object 利用不可
param 利用不可
applet 利用不可
embed 利用不可

 

私は、imgタグのみ該当しました。しかもpartialで共通化された部分だったので下記のようにして対応しました。

app/views/xxx/yyy.amp.erb(partialの呼び出し側)

formatをhtmlにして、MIMEタイプがhtmlでもampでも同じpartialを利用します。

 

app/views/xxx/_yyy.html.erb(partial側のimgタグ部分)

AMPの場合は、imgタグではなくamp−imgを利用し、src、width、heightを指定するようにしています。

 

スタイルシートのコーディング

スタイルシートは一般のhtmlと比べて下記のような制約があります。

  • 外部ファイル化したスタイルシートは利用できない
  • スタイルシートの一部の記述が使えない(important、charsetなど)
  • 50kByte以下であること

特に外部ファイルかしたスタイルシートが利用できないのが絶望的です。同じようなCSSをなんども書きたくない。。。

っということで、せっかくRails使っているのでなんとか流用できないかと考えたところ、下記の手順でできるのではと思いました。

  1. プリコンパイル済みのスタイルシートのファイルを開き、CSSの記述を取得する
  2. importantやcharsetを削除する
  3. AMP対応のViewに出力する。

具体的には下記のようなコードを追記します。

 

app/views/xxx/yyy.amp.erb

<style amp-custom>
<%= File::open("#{Rails.root}/public#{asset_path('application.css')}", 'r').read.remove('@charset "UTF-8";').remove('!important').html_safe %>
</style>

ポイントは

  • html_safeをお忘れなく!です。うっかり忘れてはまってしまいました。
  • 「<style type="text/css">」ではなく、「<style amp-custom>」です。

なんだか無理矢理感ありますが、なんとか外部スタイルシートを利用することに成功しました。

検証チェックする

厳しい制約があるAMP対応化をしてきましたが、「本当にコーディングが正しいか不安だなぁ」と思う方も多いのではないでしょうか。安心してください。検証ツールありますよ!

そこはGoogle、簡単に検証するツールを用意しています。
それは「Chrome」!

Chromeを持っていない人はChromeのダウンロードをしましょう。

そしてAMP対応のURLにページ内リンク「#development=1」を付け加えてアクセスしましょう。

今回の例では、次のURLがAPM対応ページの検証URLになります。

アクセスしたら開発社ツールでConsole画面を見ると、検証結果が返ってきます。

AMPの検証

Consoleに「AMP validation successful.」と出ています!

Railsの開発はここで完了です。お疲れさまでした。

 

Fetch as Googleをかけて待つ

Search ConsoleでFetch as GoogleをかけてGoogleがAMP対応を認識するのを待ちましょう。

ちなみに、キャッシュされたかをSearch Consoleで調べる以外にAMP CDNにキャッシュかどうかで見る方法もあります。

AMPページがAMP CDNにキャッシュされているかどうかを調べる方法

httpsの場合の調べ方

https://cdn.ampproject.org/c/s/www.example.com/blog/amp/hoge.html

httpの場合の調べ方

https://cdn.ampproject.org/c/www.example.com/blog/amp/hoge.html

以上、RailsでAMP対応するためのまとめと注意点でした。

 

参考にさせてもらったサイト(ありがとうございます)

AMPの対応方法まとめ

Google、AMPに対応した記事向けschema.orgの仕様を公開

AMPページがAMP CDNにキャッシュされているかどうかを調べる方法

 - プログラミング ,