▲

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版を正規サイト（通常のサイトを使わない）運用にするのがオススメ

    Yoshiki Kobayashi

    一応Mediassort代表取締役。
    ITのエンジニア・コンサルタント・動画クリエイターやデザイナーを兼業していた。
    色々あってMediassort代表やってみてます。
    東京から離れるために奮闘中。
    Twitter

    関連記事

    Enter

    人気の記事

    巨像恐怖症の私が選ぶ14の巨像画像

    退屈だからアカウント分析ツール「whotwi」で自分のTwitterを分析してみた

    メイドのキャッチに捕まってみた -秋葉原散策その②-【秋葉原/リリーコテージ】

    東京23区のエリア分けってどんなのがあるの【雑学】

    保険屋さんの営業に引っかかってみた【枕ってマジでいるの？】

    最新記事

    カテゴリ一覧

    キーワード一覧