WordPressの
AMP対応⚡️
宇都宮 諒(@ryo511)
WordPressもくもく勉強会@日本橋 #12
2017-12-09
自己紹介
- 宇都宮 諒(うつのみや りょう)
- 株式会社 一休 宿泊事業本部 マーケティング部
- 職種は「フロントエンドエンジニア」
- 主なお仕事
-
WordPress歴
- ユーザとして3年くらい
- 開発者として半年くらい
- Twitter: @ryo511
- 個人ブログ( https://ryo511.info/ )
一休コンシェルジュ
- 上質なホテル・旅館を紹介するメディア
- powered by WordPress!
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対応を念頭に置いてデザインを考えるのが良さそう
WordPressのAMP対応
By Ryo Utsunomiya
WordPressのAMP対応
WordPressもくもく勉強会@日本橋 #12(2017-12-09)
- 2,037