AMPでの表示を改善しました

AMPとは、あるルールに則った高速表示用スマホページであり、Googleが推奨する仕様です。
このルールには様々な制約があり、コンテンツによっては表示が出来なかったり、表示方法を変える必要があります。
まめわざでは今回、AMP対応ページと非対応ページの差異を減らすべくシステムを見直しました。
ここではAMPのおさらいと、システム更新の内容を説明します。

AMPとは？

AMPの説明はこちらをご参考ください。
Googleが検索エンジンへの導入をアナウンスしていた2016年8月に、まめわざはAMPに対応しました。
翌9月には英語の検索結果にAMPが出るようになり、10月には日本語の検索結果にも表示されるようになり今に至っています。
多くの大手メディアが対応しており、検索をするとAMPを見かけることが増えました。

更新箇所のまとめ

今回の更新を要約します。

  • これまで非表示か定型表示だった共通部分（ヘッダーなど）のコンテンツを表示
  • フォームなどAMP非対応コンテンツは「コンテンツを表示する」ボタンでAMP非対応ページにリンクし、ワンクリック以内ですべてのコンテンツにアクセス可
  • 装飾と部分装飾（下線など）に対応

未対応箇所

未対応箇所をまとめると以下です。

  • レイアウト・共通部分
    デザイン固有のレイアウト
    メニューやメイン画像の位置の変更
    メニューの常時表示（サイドバー式のみ）
    パンくずリスト
  • コンテンツ
    「コンテンツを表示する」ボタンから表示可
    問合せフォーム系全般の表示
    カウントダウンの表示
    HTML（ブログパーツ）の表示
    スケジュールのカレンダーと出欠表の表示（スケジュールの一覧は表示可）
    Wikiボタンの表示
    じゃらん・楽天トラベル予約カレンダーの表示
    はてなブックマークの共有ボタン
  • 装飾
    画像ブロックの装飾
    目次ブロックの装飾
  • その他
    カレンダーをめくる動作
    よくある質問の絞り込み

更新箇所の詳細

上記でまとめた内容を詳しく解説します。

これまで非表示か定型表示だった共通部分（ヘッダーなど）のコンテンツを表示

次表のように共通部分のほとんどは非表示であったり、決まった内容だけの定型表示でした。
今回の更新により、「ヘッダーにはヘッダーに設定したコンテンツ」とAMP非対応ページ同様の表示となりました。

変更対象ビフォー(旧仕様)アフター(新仕様)
ヘッダーホームページタイトルのみを定型表示設定済みコンテンツを表示
メニューなしサイドバー形式で表示可
メイン画像なし設定済みコンテンツを表示
サイドなし設定済みコンテンツを表示
フッターcopyrightのみを定型表示設定済みコンテンツを表示
デザインの配色選択された3つの色選択された3つの色＋模様または画像
レイアウト固定固定
パンくずリストなしなし

レイアウトは、ヘッダー→メイン画像→メニュー→左サイド→メインコンテンツ→右サイド→フッターの順に固定されています。サイドはPCレイアウトで左右どちらにあるかでメインコンテンツの前後に配置されます。
パンくずリストはサイドバー形式のメニューで代替可能なため掲載していません。

メインコンテンツ

次のブロックはボタンを設置し、クリックするとAMP非対応ページの該当コンテンツ箇所にリンクするように見直しました。
例えば、問合せフォームがある場所に「問合せフォームを表示」というボタンが表示され、これを押すとAMP非対応ページの問合せフォームの箇所に移動します。ちょうど隠れていた問合せフォームが表示されるような操作感です。

  • 問合せフォーム系全般
  • カウントダウン
  • HTML（ブログパーツ）
  • スケジュールのカレンダーと出欠表（スケジュールの一覧は表示可）
  • Wikiボタン
  • じゃらん・楽天トラベル予約カレンダー

また、次の3つのブロックが表示可になりました。
「共有ボタン」ブロックは、AMP仕様で表示されますが、海外仕様のため「はてなブックマーク」はなく、Facebook・Twitter・G+の3種固定です。

  • 空白・区切り線
  • 共有ボタン
  • 不動産検索ボタン

装飾

これまですべてのブロックの装飾は固定で、デザインで選ばれた色を利用していました。
今回の更新で、ほとんど装飾がそのまま表示できるようになりました。

ただし画像ブロックと目次ブロック（ブログ目次・物件目次・お客様の声目次・ページ目次など）は装飾が適用されません。
画像ブロックは元の画像のサイズで表示され、タップすると拡大表示されます（lightboxを利用、ただしリンクがあったり「拡大しない」が選ばれている場合は除く）。
目次ブロックは左右にフリックして移動させるカルーセル表示になります。

部分装飾

これまで部分装飾には対応していませんでしたが、すべての部分装飾に対応しました。
ただし、蛍光マーカーと下線は、オレンジ色に固定されます（異なる色を選んでいてもオレンジになります）。

まめわざでのAMP利用方法とメリット・デメリット

まめわざでは、PCまたはスマホでホームページを作成すると、自動的にAMP対応ページが生成されます。
設定は一切不要です。この自動生成機能をオフにすることは現在のところ出来ません。

検索結果への反映

AMP対応ページを確認する場合は、Googleで検索する必要があります。Yahoo!Japanなど他の検索エンジンでは確認出来ません。
AMP対応ページはGoogleにデータを保持（キャッシュ）されるため、更新をしてもすぐには反映されません。
更新が確認出来ない場合は、1日～数日経ってからご確認ください。

AMPのメリット・デメリット

AMPのメリットはその仕様通り「高速表示」です。デメリットは未対応コンテンツがあることと導入が面倒なことです。
未対応コンテンツがいくつかあり、代表的なものとして「問合せフォーム」は対応していませんでしたが、最近になって追加対応されました。AMPの仕様は発展途上であり、今後は未対応コンテンツが減っていくと思われます。

メリットデメリット
ホームページ訪問者高速に表示されるAMP未対応コンテンツが見れない
ホームページ管理者高速に表示される
検索順位が優遇？		導入が面倒
AMP未対応コンテンツが提供出来ない

今回の更新により、AMP未対応コンテンツを減らし、デメリットが減りました。
まめわざユーザーであれば、自ら導入する必要もないことから、最小のデメリットで高速表示のメリットを受けられます。
AMPには見栄えの面でも色々な制約がありますが、これも可能な限り対応しています。

検索順位に好影響はあるのか

2016年3月時点で、グーグルの社員の方が「AMPはランキング要因ではない」と回答しています。
http://web-tan.forum.impressrd.jp/e/2016/03/04/22310

一方で昨年、ページの読込速度がランキング要因に組み込まれました。
AMPは高速化のための仕様なので、ページの読込速度の方で加点となる可能性があります。あるいは既になっているかも知れません。

昨今のGoogleはスマホ対応（モバイルフレンドリー）を最重視し、2015年と2016年にランキング要因としたことをアナウンスしています。
2017年にはモバイルファーストインデックスと呼ばれる更新が予定され、これによりマホサイトが優先され、PCサイトとスマホサイトの立場が逆転します。
Googleはホームページのスマホ対応を一貫して重視し、一方で自らAMPを提唱しているのですから、AMPが検索順位に好影響を与える可能性は大いにあると思われます。

弊社の実感としては、導入促進中の仕様とあってか、AMP対応ページのクロール率・インデックス率・クロール頻度は高めです。
インデックス数アップによるアクセスアップの恩恵が受けられる可能性があり、その点ではAMP対応は広義のSEOと言えます。

技術的説明

AMPではJavascriptを自由に利用できず、同等の機能が必要な場合はライブラリを利用する必要があります。
今回の更新で利用した機能を以下で紹介します。
導入方法は公式サイトで詳しく説明（英語）されています。仕様がとてもシンプルなので、敷居が低く、Chromeで手軽にデバッグ出来るので導入が容易です。
ここでは、使ってみてわかった特徴と、公式サイトの説明の補足をします。

サイドバー

特徴

  • display:fixedによりスクロールに依らず固定されたサイドバーを表示します。
  • サイドバーの高さは内容に依らずウィンドウサイズに固定され、ウィンドウの高さ以上に縦長の場合はスクロールが可能になります。
  • サイドバーを呼び出すための専用のイベントが用意され、ボタン押下によって表示・非表示を切り替え出来ます。
  • サイドバーの中身は自由にHTMLで構成できます。リスト形式でメニュー（ナビゲーション）を提供するのに最適です。
  • サイドバー以外の部分をタップするとサイドバーが閉じます。サイドバー内に「閉じるイベント」を付けたボタンを用意することも可能です。

導入方法

公式サイトの説明をご参考ください。以下、補足します。

まずヘッダー部分で次のscriptを定義します。
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

次に、amp-sidebarタグを用意します。
<amp-sidebar id="navi" layout="nodisplay" side="right"></amp-sidebar>
イベントで指定するためのid属性を設定します。
layout=nodisplayは必須です。必要に応じでside=rightとしてサイドバーの位置を右にします。

最後にサイドバーを呼び出すためのボタンをセットします。
<span class="navi" on="tap:navi.open">メニュー</span>
イベントは
on="tap.(id属性).(open|close|toggle)"
という形式です。
amp-sidebarに付与したid属性を指定します。複数のsidebarを使い分けることも可能なので、ヘルプ的にも使えそうです。

シェアボタン

特徴

  • Facebook・Twitter・G＋・Pinterest・LinkedIn・Tumblrなどの代表的なSNSとメール送信用の共有ボタンを設置します。
  • 日本のSNSやブックマークサービスには対応していません。

導入方法

公式サイトの説明をご参考ください。以下、補足します。

まずヘッダー部分で次のscriptを定義します。
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

次に、ボタンごとにamp-social-shareタグを用意します。
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="facebook" data-param-app_id="アプリケーションID"></amp-social-share>
<amp-social-share type="gplus"></amp-social-share>
Facebookのシェアボタンには、Facebookの開発者向けサービスで申請するアプリケーションIDが必要です。

カルーセル

特徴

  • 複数画像のうち1枚めだけを表示し、2枚め以降は画面外に並列配置され、左右のボタンを押したりフリック（画面を左右に指でなぞる）することで表示する画像を切替える、カルーセル表示を簡単に実装できます。
  • amp-img同様にlayoutとwidth/heightの指定が必要なため、定型サイズに縮小したサムネイルで使うのに適しています。画像サイズが異なる場合は、小さいものに合わせる・大きいものに合わせるなど、ルールを決める必要があります。
  • 上述の通りwidth/heightの指定が必要なため、画像のキャプション（説明）を併記するのには適しません。
    併記する場合は、説明文をtext-overflow:ellipsis;で丸めて1行表示にしたり、display:absoluteで画像の上に重ねたり、amp-fit-text（ある領域に合ったテキストサイズを提供してくれるAMPの拡張機能）を使うなど、工夫が必要です。
    amp-fit-textとの併用は、上記の公式サイトの説明に例があります。
  • 後述するlightboxとの併用も可能です。
    画像をリンクにして、カルーセル式のメニュー（目次）にも使えます。

導入方法

公式サイトの説明をご参考ください。以下、補足します。

まずヘッダー部分で次のscriptを定義します。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

次に、amp-carouselタグを用意します。
<amp-carousel layout="responsive" width="300" height="300" type="slides" controls>
<amp-img src="画像パス" layout="responsive" width="300" height="300"></amp-img>
<amp-img src="画像パス" layout="responsive" width="300" height="300"></amp-img>
・・・
</amp-carousel>
上述のようにlayout/width/heightが必要です。一部のlayoutでは横スクロール用のtype="carousel"も選べます。
その他の属性として、
controls：ボタンを常時表示
loop：画像をループ（最後の画像の右を押すと最初の画像にループする）
autoplay：自動で画像が切り替わる
などがあります。

Lightbox

特徴

  • 画像をタップした際に拡大表示します。
  • タップする画像と、拡大表示する画像のパスは変えられないようです。
    例えば、image_small.jpgをクリックするとimage_large.jpgを表示することは出来ません。
    ただし、今回使っているamp-image-lightboxではなく、もう1つのamp-lightboxという別機能では可能です。
  • 拡大表示は、画像以外の部分をタップするか、スクロールをすると消えます。

導入方法

公式サイトの説明をご参考ください。以下、補足します。

まずヘッダー部分で次のscriptを定義します。
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

次に、amp-imgタグを用意し、onイベントを設定します。
<amp-img src="画像パス" layout="responsive" width="300" height="300" on="tap:ID" role="" tabindex=""></amp-img>

onイベントで設定したIDを使い、拡大される側のamp-image-lightboxをセットします。
<amp-image-lightbox id="ID" layout="nodisplay"></amp-image-lightbox>

2017/2/13