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


関連記事

安全な検索体験を守るGoogle

Googleによるスパム対策の話や違法コンテンツに関する話が連日続いていましたが、同様に米国現地時間4月29日のThe Keywordにて、Googleが検索結果に対してどのような安全策を講じているのか、措置を行っているのか、改めて案内していますので和訳してご紹介します。ずっと検索やSEOに接してい ...(続きを読む)

違法コンテンツに対するGoogleの措置

SEOに取り組んでいるあまり、まるでGoogleを神様や法の裁定人かのように思いがちですが、GoogleはあくまでもWebサイトを検索ユーザーに紹介するだけのプラットフォームです。ですので、第3者として提供しているに過ぎません。しかしながら、ここまで世界的規模で利用されていたり、情報提供の正確さによ ...(続きを読む)

2020年のスパム対Google

毎年恒例となりましたGoogleによる前年のスパム対策振り返り。今年もGoogleはSearch Central Blogで2020年を振り返って発表していますので和訳してご紹介したいと思います。 Googleからの発表内容 米国現地時間4月29日にGoogleが発表した内容です。若干長文ですが、ご ...(続きを読む)

パラメータ付URLについて

SEOを考えた時、パラメータ付URLが存在しているものについて懸念する人が多いです。懸念する理由を聞くと「パラメータ付URLは良くないと聞いたから」「パラメータ付URLは何となく良くなさそう」等という曖昧な返答が多い気がします。そもそもパラメータ付URLの良し悪しはケースバイケースなので、Googl ...(続きを読む)

コメントを書く

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