「Accelerated Mobile Pages (AMP)」での WordPress.com の表示について

以下の記事などによると

今後は、iPhone 等で Google 検索したときに、通常の記事よりもサクッと表示される「Accelerated Mobile Pages (AMP)」(以下、「AMP 対応のページ」と呼びます。)の方が優先的に表示されるらしいです。

以下の記事によると WordPress.com の方ではすでに対応済みのようです。

最高な点は、WordPress.com ユーザーは何もしなくて良いということです。

引用先:AMP: WordPress.com のモバイル体験をスピードアップ — WordPress.com ニュース

また、以下の記述から、Google  の方では、WordPress.com も意識しながら改良していることが推察されますので、特にユーザーの方では何もしなくても良さそうな感じです。

They include platforms like Twitter and Google, tech players like ChartBeat and WordPress.com and publishers like Vox, The New York Times, The Guardian and Globo.

引用先:FAQ

 

あれこれと試してみると、WordPress.com では、どうやらコンテンツタイプ「投稿記事」の後ろに「/amp/」を追加すると、

2016-02-29 at 11.05.png

AMP  対応のページが表示されるようです。

2016-02-29 at 11.06.png
Passenger | comemo com

comemoarrow

2016-02-29 at 11.06.png
amp バージョン|Passenger – comemo com

早い話、サイドバー等の情報をバッサリと削除した軽量バージョン、ということのようです。

で、ざっくりと表示速度の比較をしてみたところ、こんな感じでした。

2015-09-04現在のあるページの表示速度。

2016-02-29 11.11.24.png

2016-02-29現在の同じページの表示速度。mac や Firefox 、特に WordPress.com の改良の賜物?

2016-02-29 11.11.26.png

2016-02-29現在の同じページの AMP 対応のページでの表示速度。さらに倍、みたいな。

2016-02-29 11.11.29.png

作業環境や表示する記事の内容等によって傾向は異なるとは思いますが、ざっくりと言って、かなり表示速度は改善されてきているようです。

AMP 対応のページでの記事内の各構成要素の表示状況

で、ここからが私が気になっていた部分です。情報が間引かれすぎて表示がおかしくなってしまうことはないんでしょうか? そこで私自身が記事内でよく使っているものについてざっくりとチェックしてみました。確認日は 2016-02-25 です。

特に問題なさそうなもの

画像

画像のキャプションの方もレイアウトが崩れずにちゃんと表示されました。

2016-02-29 11.22.04.png

Twitter

Twitter も OK。

2016-02-29 11.22.07.png

注釈

注釈も OK でした。

2016-02-29 11.22.10.png

ただし、注釈用のキーワードに日本語が使われている場合、 AMP 対応のページでは注釈のリンクが効かなくなるので、最初からアルファベットを使う習慣をつけておいた方がいいと思います。

まあまあ問題なさそうなもの

ここで挙げているものは、いずれも AMP 対応のページでは下の方のスペースが潰れてしまうようです。

YouTube

2016-02-29 11.26.16.png

VideoPress

2016-02-29 11.26.19.png

ギャラリー

AMP 対応のページではカルーセル表示に変更されるようです。

2016-02-29 11.26.22.png

CodePen

2016-02-29 11.26.26.png

Scribd

2016-02-29 11.26.30.png

投稿記事での使用は避けたほうがいいかもしれないもの

ショートコード「display-posts」の場合、その使いこなしにあたっては CSS でのカスタマイズが重要になってきますが、AMP 対応のページではそれらが効かなくなるので、以下のような感じで表示が崩れてしまいます。ですので、ショートコード「display-posts」を使うのは固定ページ等に限定した方がいいと思います。

2016-02-29 11.34.30.png

同じことは ShareHtml にも言えます。

2016-02-29 11.39.30.png

なお、以下の記事によると

レンタルサーバ等にインストールして使うタイプの WordPress の場合は、AMP 対応のページに独自の CSS を追加することができるようです。

当方の情報不足等で判断のつかないもの

ショートコード「sourcecode (code)」

2016-02-29 11.40.22.png

状況によっては右端が切れることがあるようです。もしかしたら、 iPhone 等では問題ないのかもしれません。こちらごとで恐縮ですが、2016-02-29現在、当方の iPhone 相当機のバッテリーがいかれているため実機での確認が取れていません。

いくつかの埋め込み機能は AMP 対応のページには反映されなくなる?

issuu や Simplenote など、いくつかの埋め込み機能は AMP 対応のページには反映されないようです。もしかしたら、これから対応していくのかもしれませんし、逆に重要度低しと判断され、そのまま表示されないままかもしれません。もしくは、そんな機能があるのかどうか知りませんが、「issuu 等が埋め込まれている記事は AMP 対応のページには遷移しない」なんていうアルゴリズムが追加されるのかもしれません。このあたり、当方では皆目見当がつきません。

そういうわけで、私自身はこれまで、CSS 等を記事に表示するとき、Simplenote をよく使っていたのですが、今後は CodePen に切り替えていこうかなと思っています。

投稿者: comemo

WordPress.com での記事の作成方法など

「Accelerated Mobile Pages (AMP)」での WordPress.com の表示について」に2件のコメントがあります

  1. いつもお世話になっております。AMP対応について、詳しい検証ありがとうございます。当方では動画を含む投稿についてエラーメッセージが出ましたが、特に表示等については問題なさそうなのでそのままにしておりました。こちらでも何か判明いたしましたらまたコメント致します。今後ともどうぞよろしくお願いします。

    いいね: 1人

    1. ご連絡ありがとうございます。私の方では現在、バッテリー切れで実機での確認ができない状態のため、実際の状況を連絡していただき助かりました。WordPress.com の英語のブログのコメント欄の方でもそういった連絡があったようで、現在、WordPress.com の方で原因等を調査中のようです。私の方でも何か新しい情報を得ましたら、ブログの記事等でご連絡致します。

      いいね: 1人

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。