Download to read offline
WordPress+AMP
- 1. © WordBench Miyazaki WordPress + AMP WordBench宮崎 ver.1.0.0 【WordBench宮崎勉強会】
- 2. © WordBench Miyazaki ⾃自⼰己紹介 2 ⾼高⾒見見 和也（Takami Kazuya） h6ps://twi6er.com/miiitaka h6ps://www.facebook.com/miiitaka 株式会社アラタナ フロントエンドエンジニア WordPress と JavaScript が友達です。 h6ps://github.com/miiitaka
- 3. © WordBench Miyazaki WordPressへの貢献 3
- 4. © WordBench Miyazaki ハッシュタグ 4 #wbmiyazaki
- 5. © WordBench Miyazaki アジェンダ 5 p AMP（Accelerated Mobile Pages）とは？ p AMPでできること p AMPの仕組み v AMPのファイル関連性について v AMPの定義（Schema.org）について v AMPの計測や広告出稿について p WordPressでの実装 p まとめ
- 6. © WordBench Miyazaki さてさて 6 AMP（Accelerated Mobile Pages）とは？
- 7. © WordBench Miyazaki ⼤大きく動き出したのは2016年年2⽉月 7 ◆AMPとはモバイルウェブ環境を使いやすくするための技術 読み込みに 3 秒以上かかると 40% の⼈人がサイトの閲覧を諦める、という調 査結果も。（直帰率率率を下げたいわけです） - AMPはオープンソースプロジェクトで誰でも参加できる。 - Googleのサービスにだけ導⼊入されるわけではない。 - モバイルコンテンツ配信エコシステムを強化するための取り組み。 - AMP⾃自体が1つのWebページで、APIやRSSエンドポイントを使⽤用するものでは ない。
- 8. © WordBench Miyazaki 最近のGoogleはAMP押し（Google ウィブマスター向け公式ブログ） 8 2016年年9⽉月には 5回もAMP関連記事公開 ＼(^o^)／ - 顧客サイトをAMP化するための８つのヒント - AMPの問題を効率率率的にチェックするには - Search Console をサイトのAMP化に活⽤用しよう - AMPを始めるには - APMについて #AMPlify
- 9. © WordBench Miyazaki （・＿・？ 9 AMPでできること
- 10. © WordBench Miyazaki AMPでできること 10 ◆AMPでできるようになること - Google検索索結果をカルーセル表⽰示できる。 - 検索索に関連する記事が⼀一覧で表⽰示され、 すぐに読むことができる。 カルーセル表⽰示 ⚡AMP対応マーク 注：「検索索の順位を上げる技術ではない」
- 11. © WordBench Miyazaki AMPの仕組み 11 AMPの仕組み
- 12. © WordBench Miyazaki AMPの仕組み 12 Cache Server HTML AMP-‐HTML AMPデータを Googleサーバーにキャッシュ HTML/AMP-HTMLを クローリング サーバーでなく キャッシュサーバーへ スマフォで検索索
- 13. © WordBench Miyazaki AMPの仕組み 13 HTML（h6p://example.com/hello-‐world/） AMP-‐HTML（h6p://example.com/hello-‐world/amp） <link rel="amphtml" href="h6p://example.com/hello-‐world/amp"> <html amp> <link rel="canonical" href="h6p://example.com/hello-‐world/"> AMP側で正規化 ◆通常のHTMLファイルとAMPファイルとの関連性
- 14. © WordBench Miyazaki AMPの仕組み 14 AMP-‐HTML（h6p://example.com/hello-‐world/amp） <script type="applicaOon/ld+json"> { "@context": "h6p://schema.org", "@type": "NewsArOcle", "mainEnOtyOfPage":{ "@type":"WebPage", "@id":"h6ps://example.com/my-‐arOcle.html" } ・ ・ ・ ◆AMPファイルに Schema.org 定義
- 15. © WordBench Miyazaki AMPの仕組み 15 ◆AMPでの制限（HTMLタグ） Tag Status in AMP HTML script type=“application/ld+json” base Prohibited img Replaced width amp-‐‑‒img video Prohibited audio Prohibited iframe/frame/frameset Prohibited object Prohibited param Prohibited applet Prohibited embed Prohibited form Prohibited（Support coming in the future.） input element Prohibited a If set, the target attribute value must be _̲blank. Otherwise allowed. <style amp-‐‑‒custom>
- 16. © WordBench Miyazaki AMPの仕組み 16 ◆AMPでの計測について - Google Analytics での計測⽅方法は確率率率されている。 - その他の計測タグはベンダーがAMP対応しているかどうか。 <amp-‐analyOcs type=“googleanalyOcs” id=“analyOcs”> <script type=“applicaOon/json”> { “vars”: { “account”: “UA-‐xxxxxxxx-‐x” }, “triggers”: { “trackPageview”: { “on”: “visible”, “request”: “pageview” } } } </script> </amp-‐analyOcs>
- 17. © WordBench Miyazaki AMPの仕組み 17 ◆AMPでの広告について - 広告⼊入稿側は意識識しなくて⼤大丈夫。 - Google以外の広告を表⽰示する場合は、その広告媒体が対応しているか確認。 - 技術者側はAMP対応⽤用の広告表⽰示タグ（<amd-ad>）設定が必要。 <amp-‐ad width=“320” height=“100” type=“doubleclick” data-‐slot=“xxxxxx”></amp-‐ad> e.g. )
- 18. © WordBench Miyazaki WordPressでの実装 18 WordPressでの実装
- 19. © WordBench Miyazaki WordPressでの実装 19 ◆WordPressにはプラグインがあります。（Automattic社製） インストールして有効にするだけでOK ＼(^o^)／ l https://ja.wordpress.org/plugins/amp/ （Version 0.4.2 ※2016/10/31 現在）
- 20. © WordBench Miyazaki WordPressでの実装 20 ◆Search Console でエラーチェック l 検索索での⾒見見え⽅方→Acceletated Mobile Pages で確認 WordPressのプラグイ ンは今のところ問題 なし
- 21. © WordBench Miyazaki WordPressでの実装 21 ◆クローリングを忘れずに l Fetch as Google でクローリングを促す Fetch as Google は 制限があるので注意
- 22. © WordBench Miyazaki WordPressでの実装 22 ◆WordPressのAMPの問題点 -‐‑‒ Google Analytics タグを挿⼊入する仕組みがない。 ※正確にはフックポイントが準備してあって、テーマから実装が必要。 -‐‑‒ Schema.org のタイプが、今のところBlogPosting対応のみ。 ※これもフックポイントを利利⽤用すれば他の定義も実装可能。
- 23. © WordBench Miyazaki まとめ 23 まとめ
- 24. © WordBench Miyazaki まとめ 24 ◆Google はスマフォに⼒力力を⼊入れている。 l サクサク表⽰示技術、それがAMP。 l AMPはまだまだ発展途上だが開発スピードが速い。やるなら今から。 l WordPressは他のCMSより速くその準備ができている。 l 検索索順位を上げる技術でなく直帰率率率を下げる技術。 l インデックスされるページは構造化して最適化する。欲しい情報を正確に 検索索してもらうために。（ページ品質：AMPはSchema.org定義が必要） l ※AMPとは別だが、PWAもチェックしておきたい。
- 25. © WordBench Miyazaki ご清聴ありがとうございました。 25 ありがとうございました。 次回は2ヶ月後の2016年12月開催です。
- 26. © WordBench Miyazaki Googleウェブマスター向け公式ブログ https://webmaster-ja.googleblog.com AMP Project https://www.ampproject.org 参考URL 26