PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Docker, Node.jsまで。プレスマンのスタッフが綴る技術ブログ。

WordPressをGoogleのAccelerated Mobile Pages (AMP) 対応にしてみる

google_amp

Googleが先週発表したAccelerated Mobile Pages (AMP) プロジェクト。現状をザックリ&表面的なところだけ言うと、この規格に対応したページを用意すると、スマホでの検索結果の上部にフィーチャーされ、そこからリンク先をサクサクで見れる仕組み、という感じでしょうか。(実際の見え方。※スマホ専用)
※当規格の詳細については、素晴らしいまとめ記事へどうぞ。(その1,その2

このプロジェクトのPublishersリストには、日本の新聞社を含む超大手出版社群、Technology partnersリストには WordPress.com も名を連ねていて、Googleの発表と同日に、Automattic社のGithubアカウントでAMP対応のWPのpluginを発表しています。
今回は、このプラグインを当ブログにインストールしてみました。

目次


plugin『AMP』をインストール

なにせ、Version 0.1ですので、プラグインページに

Developers: please note that this plugin is still in early stages and the underlying APIs (like filters, classes, etc.) may change.

と書いてありますが、おかしくなったら無効化すればいいや、ということで、とりあえず気軽にインストール。プラグインページにも説明がありますが、リライトルールを追加しているので、機能を完全に有効化するには、パーマリンク設定のページで、一度、更新ボタンを押す必要があります。(この時、特に、パーマリンクの設定を変える必要はありません。)
上記作業が完了後は、ページのURLの最後に/amp/もしくは ?amp=1を付けて各投稿へアクセスすると、AMP版のhtmlが表示されます。

URLの違いの例

最低限のお手入れを

とはいえ、サイト名の横にあるロゴがWordPressのままなのは頂けません。また、フォントの指定もblogテーマと同じものではなくなっています。これは、styleが独自のものがあてがわれているから。
というのも、AMP HTMLはGoogle側でキャッシュする事が前提の規格なので、独自のルールが色々とあって、基本的にstyleはhtml内に直書きだったり、独自のJavaScriptは禁止だったりと、リッチ&ヘビーになりすぎたhtmlへのアンチテーゼのようです。
コーディングルールはGitHubに記載されていますが、なにせ立ち上がったばかりのプロジェクトですから色々と変更が入りそうな予感満載ですので、今は、Automatic社を信じて、出力されているhtmlの構成を変える事無く、内容だけを修正する範疇にとどめるのか吉と思われます。
ということで、pluginフォルダ内のamp/template.phpというファイル内のWPロゴ部分を独自のsvgのロゴで差し替え、styleタグ内のbodyのfont-family指定のみを変更しました。

<link rel=”amphtml”> なるもの

最低限のお化粧が終わったので落ち着いてhtmlを眺めてみると、通常版URLのhtmlに見慣れない <link rel=”amphtml”> というタグでAMP版URLが指定されています。これでGoogle先生がAMP版ページの存在を知る訳ですね。逆に、AMP版URLのhtmlには <link rel=”canonical”> で通常版URLが指定されています。
思ったよりも仕組みはシンプルそうじゃん!と安心しましたが、実はこの仕様は完全には確定していない模様…

Google Analyticsへの対応が…

JavaScriptが使えないAMP HTMLでどうやってGoogle AnalyticsでPVをカウント出来るのかというのが気になります。折角、検索結果の上部で画像付きで表示してもらっても効果測定が出来なければ対応した意味がわからずじまい。
これは、先に紹介したまとめ記事内でも書かれているように <amp-pixel> というタグを使って1px画像を読み込ませる方法でカバー、という事らしいのですが、なんだかここだけ時代が一つ戻ってしまったかのような仕様…
ここら辺は、pluginのバージョンアップで対応していくのか、個々のサイトが手動で仕込むことになるのか、はたまた、AMPの仕様が変更になるのか、ちょっと様子見でというところでしょうか。

考えられる影響

AMPを設定するとGoogleの検索結果から記事を見てもらう近道が一つ増えることになる訳ですが、blogそのものへのアクセスは無くなってしまいます。これって、今までのサイト運営の概念からすると結構な致命傷。
なので、これが本格普及した場合には、コンテンツマーケティングの考え方を大幅に見直す必要が出てきそうです。その記事1本の内容で真っ向勝負みたいなことになるのか、もしくは、AMP版はリード的な内容のみとして記事の続きを読ませるような構成にしてサイト本体へ遷移させる工夫をするとか、でしょうか。
Facebookも似たような動きをしていますので、これから世界的な議論が深まっていくのは必至と思われます。
あと、GoogleのAMP対応リンクのリスト表示のデザイン故、サムネイル画像の重要性がいまま以上に高まるかと。ここら辺は新しいビジネスの予感がしてます。

最後に

簡単なテストの筈だったのに、『ユーザー至上主義』がもたらすコンテンツ業界への影響を色々と考えさせられるきっかけになりました。
進撃の巨人達の肩に上手い事乗っかって、楽しく共存していきたいものです。

投稿者:hiroshi
hiroshi

hiroshi の紹介

DTP、Webデザイン、プログラミングをへて、サービス企画に。
Wordpressのことなら何でもご相談ください。
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る