話題

話題

Google AMPの初心者向けチュートリアルを紹介【最初の一歩にぴったり!】

332 views

GoogleのAMPプロジェクトは、サイトのモバイル最適化と読み込みの高速化を目標に設計されています。サイトを構築する際には何らかの最適化を施すでしょうから、AMPを導入する場合でもしない場合でも、内容を知っておくメリットがあります。今回はGoogle AMPをこれから始めたい方向けのチュートリアルを紹介します。

 

 

まずはAMPを知ろう

何の知識もなくAMPの実装を始めると、おそらくトラブルに遭遇するでしょう。まずはAMPとは何か、どんなことを実現してくれるのかを知り、それから導入するかどうか決定してください。

 

AMP in 60 Seconds

AMPの基本が60秒でわかる動画です。AMPを始める前にぜひ見ておきましょう。

 

 

 

コーディングしてみよう

AMPのコンセプトを知ったところで、コーディングに挑戦してみましょう。

How to Make a Basic AMP Page From Scratch

AMPページを、主要機能をすべて利用できるように作るためのチュートリアルです。コードのテンプレートを利用すれば、それを土台に、簡単にAMPページを作り始められますよ。

 

 

 

Course: Up and Running With AMP

動画で学びたい方にはこちらが適しています。AMPの基本はもちろんローカルプレビューの作成法、検証ツールのアクティベーションなどを学べます。さらにAMPでのCSSの振る舞いやAMPフレンドリーな画像の作り方など、さまざまなテクニックを網羅しています。

amp①

 

 

How to Use amp-img and amp-video to Speed Up Your Website

もし写真や動画を扱うサイトを作るのであれば、AMPの高速化機能を中心に学ぶといいでしょう。そうした方には、こちらのチュートリアルがおすすめです。

amp②

 

 

AMPとCMS

CMSではコードの全てを操作できませんから、AMPを使うにはもう一仕事必要です。しかしCMS側からの手助けがあれば、WordPressでもそれほど苦労せずにAMPを導入できます。

 

 

How to Set Up AMP Support for WordPress

WordPressには、公式でAMPをサポートするプラグインが用意されています。これでも十分ですが、YoastのSEOプラグインもあわせて導入すればより詳細なコントロールが可能です。WordPressにおいては、導入する全てのプラグインがAMPを妨害しないことを確認してください。

amp③

 

 

 

まとめ

今回紹介したチュートリアルで、AMP導入の知識は十分カバーできます。あとはプロジェクトを進めるだけです。さあ、始めましょう。

 

 

 

 

※本記事は、How to Get Started with Google AMPを翻訳・再構成したものです。

関連記事

おすすめ記事