デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2016年02月02日 AMP

SEOに影響!?AMPについてわかりやすく解説!

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

AMPとは?

最近よく聞くAMP HTML。簡単に言うと、ホームページのページ読み込みの速度が爆速になるHTML記述法です。

これまでのホームページはコンテンツ量が多くなればなるほど読み込みに時間がかかっていましたが、AMP HTMLでは動画やアニメーション等も含めて同時にロードし、かなり読み込み速度が上がるようです。(というか瞬間的に読み込めるみたいですね!)

Googleが提供している各サービスはAMP HTMLに統合することとしており、Twitter、Pinterest、WordPress.com、 Adobe Analytics、LinkedIn、LINEといったテクノロジー企業や、The Wall Street Journal、BBC、朝日新聞デジタル、産経デジタルといったパブリッシャーがAMPのパートナーになっているようです。

さすがGoogle、そうそうたる顔ぶれですね(笑)

すでにwordpressプラグインも開発しており、実際に導入されているサイトも出てきています。(こちらについては私は導入していないため手順はご自身でお調べください。)

順調に行けば2月中には公開のようです。

一般的に3秒表示されなければ半数近くのユーザーは離脱すると言われているため、AMPの今後の動向が気になるところです。

今後ランキング要因になる可能性も!?

Googleのジョン・ミューラー氏は「今のところ考えていない」という回答だったようですが、表示速度はモバイルでの検索アルゴリズムに加味しているため、間接的にAMP採用ページのランキングがあがる可能性があると思います。

AMP導入方法

<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”hello-world.html”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style>body {opacity: 0}</style>
<noscript><style>body {opacity: 1}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script> </head>
<body>Hello World!</body>
</html>

こちらが公式サイトのサンプルです。以下のGithubに公開されています。

https://github.com/ampproject/amphtml/tree/master/spec

ほぼHTMLですよね。イメージ的にはHTMLにAMPのプロパティを追加していく感じですね!

AMPの特徴

AMPを導入すると、通常のページとAMP用のページを切り分けて制作するパターンとAMPのみ制作するパターンがあります。
スマホ版のみAMP等切り分けて制作する場合は通常の記事には<link rel=”amphtml” href=”[AMPの記事].html” />と設定し、AMP HTMLの方には<link rel=”canonical” href=”[通常記事].html” />と設定をします。

また、以下のAMP独自のコンポーネント(タグ)も存在します。

  • amp-img : 画像を表示
  • amp-video : 動画を表示する
  • amp-youtube : Youtubeの埋め込み動画を表示する
  • amp-ad : 広告を配信する
  • amp-twitter: Twitter のツイートを埋め込む
  • amp-carousel : スライドショーを作成する

その他にも様々なコンポーネントが用意されており独自の表記が結構必要になってきます。

さらに、AMPはcssも外部インポートが禁止のため、インライン表記にする必要があり、JavaScriptも基本的に使えないため当然SNSボタンについても独自の記述が必要です。

まだまだ情報が少ないAMPですので、しっかりと情報収集を行った上で導入を検討しましょう。

今後はモバイルフレンドリー化が重要!?

この記事を見てわかる通り、googleは昨年から本格的にモバイルに力を入れています。

正直今回のAMPがどのくらい普及するかはわかりませんが、ひとつ言えるのは今回を期によりモバイルフレンドリー化、そしてモバイル高速化が重要になってくるだろうと感じている今日このごろです。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

表示する記事がありません。
  • Facebookページ
  • 公式twitterアカウント