AMPを実装してみた

AMP時代到来の兆しを受けて、試しに私も本ブログの一部ページでAMPを導入してみました。このブログはWordPressですので、単純に提供されているAMPプラグインを導入したバージョンと、改めてAMPを自分でヘッダーから構築したバージョンと2パターン作ってみましたので、(noindexにしつつ)実際のページとしてご紹介したいと思います。

ややこしい

ふわふわ

↓(今回AMP対応した)従来のページ↓
//fuwafuwa.biz/seo/concrete-internal-links-improvement-procedure/

ふわふわ

単純にAMPプラグインを導入

↓AMPプラグイン導入ページ↓
//fuwafuwa.biz/seo/concrete-internal-links-improvement-procedure/amp/

JavaScript部分が無くなり、フォントがデフォルトフォントとなります。WordPressのデフォルトテーマ(テンプレート)になるイメージです。カスタムしたUIも崩れます。既に「WordPressのプラグインでブログをAMP対応にしてみた」例もございますが、私も行ってみました。AMPプラグインを実装すると、JavaScript機能部分がキャンセルされるイメージですね。

ふわふわ

独自AMP実装

↓ヘッダーからAMPを構築↓
//fuwafuwa.biz/amp-html/concrete-internal-links-improvement-procedure/

改めてAMPを自分でヘッダーから構築してみたものです。ルールに倣いJSON-LD以外のJavaScriptは無くしてコーディングしています。本来であれば、リンク先までしっかりとAMP化して設定しなければならないのですが、面倒なのでそこまでしていません。ちなみにPHPコードは一応WordPressにて読み込んでくれるようですので、(私のサイトでは、従来のデスクトップ上のサイドバーがレスポンシブウェブデザインとしてフッターに回り込むように)サイドバーも下に表示することができました。プラグインとコーディングが異なる点は、AMPを実装するために自分でJavaScript部分を無くしていくイメージですね。

自分でAMPを構築する上で手間がかかる部分としては、

  • CSSからしっかりと直打ちしなければならないこと
  • AMP-IMGタグを書くときに幅と高さをしっかり指定しないと表示が崩れること
  • <p>タグにて段落をしっかりと指定しないと表示順に不具合が生じること

 
この3点です。また、リンクやファイルを設置する際には、AMP対応記事を呼び出すために1つずつ指定していかなければなりません。

AMP実装

ふわふわ

レスポンシブの場合は??

これ…AMP対応したページを作る場合、そもそもレスポンシブウェブデザインですと、デスクトップ(PC)での表示も変わるというか、崩れるわけです…。つまり、従来のデスクトップページをしっかりと表示させつつ、モバイル(スマホ)の場合のAMPページ化するためには、別ファイルにしなければなりません。しかし、それですとアノテーション設定しなければならず…結局管理が面倒になります。私が提唱してきた「レスポンシブの方が良い」という意見と相反してしまうわけなんです…。これは…どうしていけば良いんでしょうね…。

ふわふわ

レスポンシブのままAMPを担保するためには

レスポンシブウェブデザインのままAMPを導入し、そのデザイン性も担保するためにはどうすべきか…。そもそもAMP表示前提でデスクトップUIを考えるしかないですね。もしくはJavaScriptに依存せず、徹底的にCSSでレスポンシブのルール付けを行っていくか、デスクトップUIでもワンカラムとかで展開していくか、といった感じでしょうか。

そうでないと、AMP対応ページを別ファイルにしてアノテーション設定を頑張ることになります。願わくば、WordPressの場合、このジレンマを解消できるプラグインが生まれれば良いのですが…(笑)。いずれにしましても、凝ったデザインのサイトはAMP化に苦労しそうでございます(>_<;)


関連記事

スマホの検索結果が無限スクロールに

随分前から一定のIPでテストされていたと思いますが...いよいよスマホでのGoogle検索結果が無限スクロールUIに変わるようです。米国現地時間10月14日、The KeywordでGoogleが発表しています。 The Keywordの和訳 UIというか、ページ送りに関する機能性が変わるという話で ...(続きを読む)

Googleによるファクトチェック

先日、「About This Result」機能についてご紹介しました。要は、この検索結果に登場するWebサイトページの信憑性を測ったり、拡張して情報を得るための機能です。米国の英語圏が対象の機能ですので、まだ私たちはその機能に触れることはありませんが、その「About This Result」機能 ...(続きを読む)

3ツールでUIと機能変更

Google Search Consoleではお馴染みのURL検査ツールですが、実はこれと同じメカニズムで動いているのがAMPテスト、モバイルフレンドリーテスト、リッチリザルトテストのツールのようです。それが今回、この3つのツールにURL検査ツールと同じ機能を導入し、UIを統一していくと米国現地時間 ...(続きを読む)

About This Result機能の更新情報

まだ日本には導入されていませんが、既に英語圏では「About This Result(この検索結果について)」機能が実装されています。今回はこの機能によって知り得る情報に新しい情報が追加されたとのことで、The Keywordでその説明がされています。この「About This Result」機能は ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。