WordPress+AMP

©
WordBench
Miyazaki

WordPress + AMP
WordBench宮崎
ver.1.0.0
【WordBench宮崎勉強会】

©
WordBench
Miyazaki

⾃自⼰己紹介
2

⾼高⾒見見　和也（Takami Kazuya）
h6ps://twi6er.com/miiitaka

h6ps://www.facebook.com/miiitaka

株式会社アラタナ
フロントエンドエンジニア
WordPress と JavaScript が友達です。
h6ps://github.com/miiitaka

©
WordBench
Miyazaki

WordPressへの貢献
3

©
WordBench
Miyazaki

ハッシュタグ
4

#wbmiyazaki

©
WordBench
Miyazaki

アジェンダ
5

p  AMP（Accelerated
Mobile
Pages）とは？

p  AMPでできること

p  AMPの仕組み

v  AMPのファイル関連性について

v  AMPの定義（Schema.org）について

v  AMPの計測や広告出稿について

p  WordPressでの実装

p  まとめ

©
WordBench
Miyazaki

さてさて
6

AMP（Accelerated
Mobile
Pages）とは？

©
WordBench
Miyazaki

⼤大きく動き出したのは2016年年2⽉月
7

◆AMPとはモバイルウェブ環境を使いやすくするための技術
読み込みに 3 秒以上かかると 40% の⼈人がサイトの閲覧を諦める、という調
査結果も。（直帰率率率を下げたいわけです）
-  AMPはオープンソースプロジェクトで誰でも参加できる。
-  Googleのサービスにだけ導⼊入されるわけではない。
-  モバイルコンテンツ配信エコシステムを強化するための取り組み。
-  AMP⾃自体が1つのWebページで、APIやRSSエンドポイントを使⽤用するものでは
ない。

©
WordBench
Miyazaki

最近のGoogleはAMP押し（Google ウィブマスター向け公式ブログ）
8

2016年年9⽉月には
5回もAMP関連記事公開
＼(^o^)／
-  顧客サイトをAMP化するための８つのヒント
-  AMPの問題を効率率率的にチェックするには
-  Search Console をサイトのAMP化に活⽤用しよう
-  AMPを始めるには
-  APMについて #AMPlify

©
WordBench
Miyazaki

（・＿・？
9

AMPでできること

©
WordBench
Miyazaki

AMPでできること
10

◆AMPでできるようになること
-  Google検索索結果をカルーセル表⽰示できる。
-  検索索に関連する記事が⼀一覧で表⽰示され、
すぐに読むことができる。
カルーセル表⽰示
⚡AMP対応マーク
注：「検索索の順位を上げる技術ではない」

©
WordBench
Miyazaki

AMPの仕組み
11

AMPの仕組み

©
WordBench
Miyazaki

AMPの仕組み
12
Cache
Server
HTML
AMP-‐HTML
AMPデータを
Googleサーバーにキャッシュ
HTML/AMP-HTMLを
クローリング
サーバーでなく
キャッシュサーバーへ
スマフォで検索索

©
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ファイルとの関連性

©
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 定義

©
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>

©
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>

©
WordBench
Miyazaki

AMPの仕組み
17

◆AMPでの広告について
-  広告⼊入稿側は意識識しなくて⼤大丈夫。
-  Google以外の広告を表⽰示する場合は、その広告媒体が対応しているか確認。
-  技術者側はAMP対応⽤用の広告表⽰示タグ（<amd-ad>）設定が必要。
<amp-‐ad
width=“320”
height=“100”
type=“doubleclick”
data-‐slot=“xxxxxx”></amp-‐ad>
e.g. )

©
WordBench
Miyazaki

19

◆WordPressにはプラグインがあります。（Automattic社製）
インストールして有効にするだけでOK
＼(^o^)／
l  https://ja.wordpress.org/plugins/amp/ （Version 0.4.2 ※2016/10/31 現在）

©
WordBench
Miyazaki

20

◆Search Console でエラーチェック
l  検索索での⾒見見え⽅方→Acceletated Mobile Pages で確認
WordPressのプラグイ
ンは今のところ問題
なし

©
WordBench
Miyazaki

22

◆WordPressのAMPの問題点
-‐‑‒  Google Analytics タグを挿⼊入する仕組みがない。
※正確にはフックポイントが準備してあって、テーマから実装が必要。
-‐‑‒  Schema.org のタイプが、今のところBlogPosting対応のみ。
※これもフックポイントを利利⽤用すれば他の定義も実装可能。

©
WordBench
Miyazaki

まとめ
24

◆Google はスマフォに⼒力力を⼊入れている。
l  サクサク表⽰示技術、それがAMP。
l  AMPはまだまだ発展途上だが開発スピードが速い。やるなら今から。
l  WordPressは他のCMSより速くその準備ができている。
l  検索索順位を上げる技術でなく直帰率率率を下げる技術。
l  インデックスされるページは構造化して最適化する。欲しい情報を正確に
検索索してもらうために。（ページ品質：AMPはSchema.org定義が必要）
l  ※AMPとは別だが、PWAもチェックしておきたい。

©
WordBench
Miyazaki

Googleウェブマスター向け公式ブログ
https://webmaster-ja.googleblog.com
AMP Project
https://www.ampproject.org
参考URL
26

WordPress+AMP

Recommended

Recommended

More Related Content

Similar to WordPress+AMP

Similar to WordPress+AMP (20)

More from Takami Kazuya

More from Takami Kazuya (20)

Recently uploaded

Recently uploaded (9)

WordPress+AMP