2020.1.23

AMPページの作成方法

覚書。今更感あるけどAMPのお話し。

様々なAMP化の確認方法

▼Chromアドオンを使用した方法
https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=ja

▼デベロッパーコンソールでの確認方法
F12でコンソールを表示し、Console タブを開く
Powered by AMP ⚡ HTML　が表示されていればOK

▼WEBサイト上での確認
https://validator.ampproject.org/
※手書きの場合はここで確認しながら実装がオススメ

手書き実装の例

▼通常のサイト
http://test9.cfp-consulting.co.jp/accelerated-mobile-pages-foundations-master/article.html

▼AMP化
http://test9.cfp-consulting.co.jp/accelerated-mobile-pages-foundations-master/article.amp.html

LPレベルであれば、ほぼほぼこれで実装は可能と思われる

WordPressプラグインを用いた、動的実装の例

▼通常のサイト
http://test9.cfp-consulting.co.jp/kobamemo/amp%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

▼AMP化
http://test9.cfp-consulting.co.jp/kobamemo/amp%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/amp/
※複数ページがあるWebサイトでAMP化実装するのであれば、
①Wordpressインストール
②AMPプラグインインストール
③AMPプラグイン上でデザイン作成
を行い、AMP版を正規サイト（通常のサイトを使わない）運用にするのがオススメ

• 
• 
• 
• 
• 
• 

関連記事

• 
  キャラクターを活用したマーケティングで、会社はどう変わる？？　気になるコストや長所・短所をまとめてみました
• 
  【※注意喚起※】親愛なChrome ユーザー様　というページが表示されたら
• 
  急にショートメールで08053177709から確認コードが送られてきた
• 
  モダンなWebデザインはXDで決まり！（内容によるが）