Contact us
   Blog

Blog

AMP導入 その前に、AMPって何ですか?

先日、うちのWEBサイトにも、AMPを導入してみました。
さて、ここで、AMPってなんだ?と思われた方は、是非、この続きを読んでみてください。

すでに自社のサイトがAMP対応になっていたり、技術者の方はAMPについての初歩的なことしか書いていませんので、読み飛ばしていただいてかまいません。

AMPってなんだろう

AMPって何だろう??って思われた方は、以下のスマホの画面の写真を見てください。
この画像は、iPhoneのsafariで「イギリス」と検索した際に表示された、検索結果の写真です。

file01

オレンジ色に囲まれた部分には、カミナリのマークとAMPという文字が付いています。
最近、よく見かけるようになったと思いませんか?

ちなみに、AMPはアンプと呼びます。

これは、GoogleやTwitterが推奨する、【Accelerated Mobile Pages(AMP)=モバイル端末での読み込みが高速化された軽量なページ】に対応していますよ、というマークです。AMPに対応させれば、このモバイル検索結果に出てくるトップニュース枠に優先して表示される可能性が高くなります。

AMPとはモバイルの表示を速くしようよ、というプロジェクトのこと

簡単にいうと、AMPというのは、スマホやモバイルでWEBを観たときに、遅くてイライラする状態を解消して、「モバイルでのWEB表示をビュンビュン速くしよう!」「モバイル表示を軽くしよう!」という取り組み、プロジェクトのことなのです。

どこから始まって、どんな風に進んでいるのでしょうか。
モバイル軽量化計画をどんどん推奨して、広めようとしているのは・・・

GoogleやTwitter、WordPressなどのIT企業が中心になってできたプロジェクトです。
AMPプロジェクトと呼ばれています。参考までに、GoogleとTwitterの記事を読んでみてださい。

[su_row]
[su_column size=”1/2″]

TwitterのAMPについての記事

file02
https://blog.twitter.com/ja/20151013/accelerated-mobile-pages[/su_column]
[su_column size=”1/2″]

GoogleのAMPについての記事

file03
http://googledevjp.blogspot.jp/2016/01/accelerated-mobile-pages.html[/su_column][/su_row]

AMPプロジェクト公式サイト
https://www.ampproject.org

最初は、10ほどしかなかった賛同企業が、今では30社以上に上り、現在、世界中でこの取り組みが広まっています。

AMPはプロジェクトだけど、技術を指すこともある

AMPとは、プロジェクトのことです・・・が、しかし。
対応するためのHTMLをGoogleがオープンソースで提供しているということもあり、AMPに対応したページを作ること、または、そのモバイルを軽量化させる技術を示すような使い方をすることもあります。

「サイトにAMPを導入した」とか「ページをAMP対応させた」とか、「AMP化する作業は大変だ」とかいう使い方をしたりします。
こういう場合は、AMPのプロジェクトの指針に沿って、モバイルサイトを改良する作業のことを示していると思ってください。

導入すると、Googleの検索に有利なのか?

Googleは、ランキングを左右するとは明示していません。しかし、モバイルユーザーにとって、ページの読み込みが早くなり、記事も読みやすくなるのは、喜ばしいことです。
読む記事の量も増えるかもしれません、ページビューが上がり、全体のトラフィックが上がり、評価が上がることは考えられることです。

参考記事:AMP最新情報 ―― Google検索のランキングにAMPが与える影響、WordPressがAMPプラグインを開発中

どんなページでも対応できるのか?

現在のところ、AMPは、ブログの記事や、ニュース記事にのみ対応しています。

毎日更新してゆく、速報的なページや、最新情報のページ、ブログの投稿記事のみ対応していると思っていいと思います。
一般的には、トップページやスタティックなページには対応していません。

スタティックなページとは、時系列情報を持っていないページだと思ってください。ブログのように日々更新するページじゃなくて、会社概要や価格表などのページのことです。
WordPressでいうと、投稿には対応しているが、固定ページには対応していない状態です。(WordPressのプラグインでは対応しているものもあります)

どうすれば対応できるのか

【自社で運用している場合】
自社で運用している場合は、基本的には、自分で、あるいは依頼して、新規に導入しなければなりません。

【無料ブログを利用している場合】
無料のブログを利用されている方は、そのサービス提供会社の方針に沿うことになります。

【WordPressなどのCMSを使っている場合】
ベンダーがプラグインや拡張機能を配布していなかどうか?確認してみましょう。
あれば、それを導入するだけで済んでしまうかもしれません。

AMP対応とは、つまりは、どういうことなのか?

AMP対応させるということはどういうことかと云いますと、一般的には、

いま【Aというページ】があった場合、これを作り替えるのではなくて、
新しく、【AというページのAMP版】を追加で作成するのが主流です。

(もちろん、AMP版のみを作ってもかまいませんが、現状のケースとしては少ないです)

いわゆる通常のブログ記事を書けば、そのページのAMP版を自動で生成してくれるような仕組みを、サイトに組み込んでしまえばよいのです。

一般的には、この「いつも通りに記事を書けば、通常版以外に、AMP版も自動で作成してくれる仕組み」を導入することをAMP導入だと思えばよいでしょう。

AMPは、使ってはいけないHTMLソースがあったり、Javascriptが使えなかったりしますので、新しく作るAMP版は、アクセス解析やGoogleの広告を取り払う必要があります。すこし、ややこしいですね。

WordPressでホームページを運用している場合は、AMPの公式プラグインがありますので、それを導入してみましょう。

AMP導入したら、どうなるの?

ここでは、このサイトの場合を例に取って、説明します。
まず、URLですが、AMPを導入したページのアドレスを、「通常のアドレス/amp/」で表示されるようにしたとします。

実際のページを見比べてください。

《例として》
・通常のサイトがこちら  https://www.taniweb.jp/blog/4486/
・AMP版 https://www.taniweb.jp/blog/4486/amp/

このサイトはレスポンシブなので、モバイル版とPC版は自動で調整されます。
モバイルで観た場合と、AMPの場合を比べました。

AMPは、できる限り簡素にページを作る必要があります。余計な装飾は取り払いましょう。

使ってはいけないHTMLがありますし、Googleのアクセス解析も、普通のままでは使えません。バナーや広告があれば取り払い、SNSボタンもそのままでは使えないので、取り払います。
記事だけにする必要がありますので、カテゴリーのリストや、アーカイブなどがあれば、それも取り払います。

結果、かなりシンプルなAMPのページができあがりました。
(このサイトの場合、実際にはWordPressのプラグインを用いて生成しています、説明のために導入前と後を画像で比較しています)

file04

通常のHTMLとは違い、AMP HTMLで動いていますので、 HTMLのはじまりも、すこし違います。

AMP HTML はこのように始まる

<!doctype html>
<html amp>


または、

<!doctype html>
<html ⚡>

AMP対応のアドレスの末尾に「#development=1」と入力して、Googleのchromeで開き、右クリックのメニューで「検証」を選択すると、きちんとAMP HTMLが認識されているかどうか?を確認することができます。

成功している場合は、以下のような表示になります。

file05

※Googleのアクセス解析や、バナー広告は、AMPの仕様に合わせれば導入できます。Facebookも仕様に合わせれば表示できます。ここでは、今までの状態では使えないことを知ってほしいために、取り払うようという表現にしています※

すぐに導入しなければならないのか?

このAMP対応ですが、2016年の2月に始まったばかりです。
急いで、今すぐしなければならないものなのでしょうか?

結論からいうと、すぐには、必要ないと思います。

まだまだ、検索の上位表示にそれほど影響を与えるとはいえず、コンテンツの量やトラフィックの量が十分でない場合、アクセスアップも期待するほどではなさそうです。

しかし、将来的には、導入を検討しなければならない時期が来ることでしょう。その時のために、情報を集めたり、他のサイトの動きをチェックしておく必要はあると思います。

WordPressでサイトを運用していて、AMP対応に興味ある方は、お気軽にお問い合わせください。

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you