Googleが推進するAMP｜サイト制作ならスマイルホームページ

Googleが推進するAMP

2017/11/27

AMP(Accelerated Mobile Pages)とはモバイルページを高速に表示させるための作り方を施したコンテンツの事です。

AMPの実施方法は、AMPに対応したHTMLでサイトを制作します。

======　必要な記述　======

HTMLの宣言

<!doctype html>

meta要素の指定（文字コード（UTF-8にのみ対応）とビューポート）

canonicalタグの設置（オリジナルページのURL）

<link rel="canonical" href="PCサイトのページURL">

JSON-LDの指定（ページの構造を正しくクローラーに伝える）

{

"@context": "http://schema.org",

"@type": "NewsArticle",

"headline": "ページのタイトル",

"datePublished": "2017-011-27 12:00:00 +0900",

"image": [

"logo.jpg"

]

}

</script>

Boilerplateの記述（AMPが高速化を実現するために必要）

<style amp-boilerplate>body{-webkit-animation:-amp-start8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normalboth;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>

ライブラリの読み込み

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMPの存在を知らせるタグ

<link rel="amphtml" href="./amp.html">

ページの読み込み時間が長ければ長いほど、ユーザーは離脱してしまう傾向にあります。

更に、ページの表示速度がSEOに関係している事はGoogleが公式に発表しています。

そこで、このAMPの使用に基づいてページを作成する事で、ページの読み込み時間を短縮させるのです。

それにより、ユーザーの離脱を防ぎ、SEOでの検索結果順位で不利にならない様にするのです。

ここで間違わない様にしておきたいのが、「AMPを実施していないからと言って検索結果順位で不利になる訳ではない」という事です。

あくまでも「ページの読み込みが遅い事が検索結果順位で不利になる」という事です。

つまり、ページの読み込み時間が気にならなければ、無理にAMPを実施する必要はありません。

上手くAMPが実施できずに中途半端になったり、エラーになる事のリスクがあります。

AMPの実装は慎重に！！

ホームページ作成・集客方法｜サイト制作なら【スマイルホームページ】

Googleが推進するAMP

無料!!お問い合わせ・お見積りはこちら