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化に苦労しそうでございます(>_<;)


関連記事

GSCの関連付け機能が拡張

Googleは、Search Consoleに関連付けられるサービスが新しく増えた旨、発表しました。今まではGoogle Analyticsとだけ関連付けられましたが、Google広告やYouTube等が加わる形になっています。ここでは、その発表内容の和訳とともにご紹介します。 Googleからの発 ...(続きを読む)

画像検索結果を多様化

Googleは画像検索結果にも多様性を持たせる動きを加えたと米国現地時間2月11日にツイートしました。画像検索結果に様々な画像を表示することで、ユーザーの選択肢や情報を増やすことを目的としているようです。 TwitterでのGoogle発表内容 まずは以下のツイート内容をご確認ください。 Have ...(続きを読む)

Passage(文節)ランキング始動

昨年10月に告知されたGoogleのPassage Indexingについて、「文節単位でしっかりとインデックスしてランキング」しますというPassage Ranking(パッセージランキング)が米国現地時間2月10日にローンチしたと発表されましたのでご紹介します。 Googleの発表内容 Goog ...(続きを読む)

Discoverレポート対象がChromeも

2019年4月から始まったGoogle Search ConsoleにおけるDiscoverのレポートですが、今まではAndroidとiOSのGoogleアプリでの表示に関するレポートだけが対象でした。でも、この度Chromeでの表示に関するレポートも含有されるようになったとSearch Centr ...(続きを読む)

コメントを書く

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