IT IT関連 おすすめ

AMP対応は必要か、対応方法

更新日:

AMPの説明をしていきます。

[toc heading_levels="2,3"]

AMPとは

AMPとは「Accelerated Mobile Pages」の略でAMP(アンプ)と略されます。GoogleとTwitterで共同開発されています。

概要としては,モバイルでも高速にWebサイトを表示させるためのフレームワークです。

ではなぜ早くなるかと言うと遅くなる要素、独自Javaスクリプト、スタイルシートをを禁止してサイトを表示する最低限のHTMLのタグしか使用できません。
まあ、早くなって当たり前の技術?節約技です。

ではメリット、デメリットを考えていきましょう。

メリット・デメリット

メリット

・サイトの表示速度が向上する
・ユーザがストレスなく観覧出来る

デメリット

・サイトの構造が複雑だと対応するのに時間がかかる
・コンテンツを中心に打ち出すニュースサイトに効果を発揮するのでので、画像・スタイルなどのデザイン系サイトには向かない

デメリットでjavascript、HTMLが最低限しか使用できなくなるので、実装するならその辺も考慮しましょう。

ANPでの見え方

実際にAMPに対応したサイトを意識して見たことがない方も多いと思うので
当ページをAMP対応してみました。
以下のURLで見ることが出来ます。

作成方法

対応する方法は、AMPのコーディング規約を確認し手動で作成する方法と
Wordpess等であればプラグインで作成する方法があります。

手動作成

まずはAMPのサンプルコードを見ていきましょう

<!doctype html> 
<html AMP lang="ja">

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "AMP作ってみた",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script><script async src="https://cdn.ampproject.org/v0.js"></script>
<head>
  <body>
   <h1>AMPテストページ</h1> 
    作成テストです。 
</body>
</html>

サンプルは公式サイト等にもあるのでHTMLを知っている人はそんなに難しくない印象です。

参考:https://www.ampproject.org/docs/getting_started/create/basic_markup

Wordpess プラグインでの実装

Wordpessであればプラグインをインストールする事で実装出来ます。
現在、「AMP for WordPress」が最も安定・人気を集めています。

AMP対応確認

AMPが正常に認識されるかを確認するには、googleの以下のページで確認出来ます。
https://search.google.com/test/amp

  • この記事を書いた人
さすけ

さすけ

インフラ関連を中心に、仕事をしています。 最近はWeb開発の仕事も多いです。

-IT, IT関連, おすすめ
-, ,

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.