WordPressの

AMP対応⚡️

宇都宮　諒(@ryo511)

WordPressもくもく勉強会@日本橋 #12

2017-12-09

自己紹介

  • 宇都宮　諒（うつのみや　りょう）​
  • 株式会社 一休 宿泊事業本部 マーケティング部
  • 職種は「フロントエンドエンジニア」
  • 主なお仕事
  • ​WordPress歴
    • ​ユーザとして3年くらい
    • 開発者として半年くらい
  • ​Twitter: @ryo511
  • 個人ブログ( https://ryo511.info/ )

一休コンシェルジュ

  • 上質なホテル・旅館を紹介するメディア
  • powered by WordPress!

https://www.ikyu.com/concierge/​

AMP(⚡️)

モバイルで検索してるとたまに見るやつ

AMPとは

  • Accelarated Mobile Pagesの略称
  • モバイルWebの表示速度を最適化する技術
  • 一定のフォーマットに沿ったHTMLの作成が必要
    • たとえば、HTMLの開始タグは<html>ではなく<html ⚡>（または<html amp>）
    • JavaScriptは使用不可

AMPのメリット(1)

  • Google等、検索エンジンでキャッシュされるため、表示が高速
  • SEO上有利ということはないが、似たような記事が並んでるときはAMP対応した記事をクリックしたくなるので、集客面でメリットがある

AMPのメリット(2)

  • カルーセルで優先的に表示されることもある
  • ↑は「iPhone」の検索結果のカルーセル

WordPress AMP対応

  • AMPプラグインを入れるだけ
  • 記事のURLの末尾に/ampをつけるとAMPページが表示される
  • インストールしてしばらく経つと、検索エンジンがクロールしてAMPページをキャッシュしてくれる

AMPページのデザイン

  • デフォルトのデザインは最低限
  • ←のようにシンタックスハイライトが効かなかったり。。。
  • ちゃんとやるならカスタマイズが必要

カスタマイズ方法(1)

add_filter( 'amp_post_template_file', 'amp_set_custom_template', 10, 3 );

function amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
        $file = dirname( __FILE__ ) . '/amp/single.php';
    }
    return $file;
}
  • AMPプラグインのテンプレートを置き換えるのが一般的と思われる
  • AMP用のテンプレートはテーマの配下にampディレクトリを切って配置するのがおすすめ
  • テーマのfunctions.phpでamp_post_template_fileフィルターを使って読み込むテンプレートを差し替える

カスタマイズ方法(2)

  • AMP用テンプレートのひな形はAMPプラグインのtemplatesディレクトリをコピーするのが簡単
  • 必要なファイルが一式揃っている
  • CSSはstyle.phpに書く
  • JavaScriptが使えない点に注意！
    • シンタックスハイライトとか、普通はJSでやるようなことをサーバサイドでやる必要があったり…

まとめ

  • AMPは検索流入を増やすのに効果的
  • WordPressならAMP対応は簡単
  • 今から作るなら、AMP対応を念頭に置いてデザインを考えるのが良さそう
Made with Slides.com