AMP対応ページの作り方

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
  • >
  • >
  • AMP対応ページの作り方
 
  AMP対応ページの作り方

AMP対応ページの作り方

AMPとは

AMPはグーグルが始めたモバイルでの表示を早くするための対策。

3秒以上サイトの表示に時間がかかると、40%の人が離脱してしまうという結果が出ているようですが、現状かなりのサイトが3秒以上読み込み速度がかかります。

そこで高速の読み込みを可能にするAMP JS ライブラリをgoogleが開発。

AMP専用の HTMLでサイトを作ることで超高速表示が可能になり、さらにgoogle検索結果でも見やすく表示される可能性があります。

SEOに直接の関係はないと今のところgoogleはいっていますが、ページ速度やユーザビリティといった点では関係ありますし、今後はどうなるかわかりませんので対応しておくに越したことはないと思います。

ただ対応していないタグや動作などもたくさんあり、すべてのサイトに対応できるわけではありませんし、適さないサイトもあります。

デザインなどはかなり制限されますが、シンプルで見やすいサイトが一番なんではないかな?と私は思います。

対応できるページは対応しておくといいですね。

AMP HTMLでページを作ってみよう!

実際に作ってみましょう。

以下は標準のAMP HTML

 

参考サイト: https://www.ampproject.org/ja/docs/get_started/create/basic_markup

<script type=”application/ld+json”>

の部分の書き方

“@context”: “http://schema.org”, //こちらは必須ではないが、AMPに対応しているサイトが表示されるgoogleの検索結果のAMPニュースカル―セルに表示させたいときは必須。

“@type”: “NewsArticle”, //こちらはどんなページなのか記載

NewsArticle  Recipe  Review  VideoObject

CSSやjavaの外部ファイル読み込みは不可.

HTML内に<style amp-custom> </style> 内に書き込む。

 

禁止事項

style属性
img
video
audio
iframe
base
frame
frameset
object
param
applet
embed
form
input
textarea
select
option
は使用不可 以下の書き方に変更

<img> ↓

height とwidth は必須

その他<amp-img>で使える要素

画面サイズに合わせて画像サイズを変換

 

画像のサイズを固定

 

高さを固定

 

親要素のサイズに合わせる (height とwidthは指定しない)

 

画面サイズに合わせて画像を変更

以下 画面サイズ480px以下ならs.jpg  800px以下ならm.jpg  980px以下ならl.jpg を指定

 

attribution=”著作権情報の記載”

 

その他も以下で紹介の拡張機能などで代用可能。

 

AMP HTML 拡張機能

まだまだできないことが多いですが、少しづつ便利な機能が追加されています。

<script>は<heade内に記載

参考: https://github.com/ampproject/amphtml/tree/master/extensions

 

ifream

https://ampbyexample.com/components/amp-iframe/

 

googlemap

※ src のURL内のplace_id は https://developers.google.com/places/place-id?hl=ja より取得

APL key は https://developers.google.com/maps/documentation/javascript/?hl=ja ここから取得。

 

youtube

※動画のIDは動画のURLの一番後ろの部分 https://www.youtube.com/watch?v=nMXmLwXxhSE の場合 nMXmLwXxhSE

必須項目: data-videoid、width、height、layout

layoutは画像の時と一緒

画面サイズに合わせて動画サイズを変換

autoplay で自動再生

動画のサイズを固定

動画の高さを固定

親要素のサイズに合わせる (height とwidthは指定しない)

ナビゲーション等に使えるサイドバー

 

ライトボックス

https://ampbyexample.com/components/amp-lightbox/

 

アコーディオン

https://ampbyexample.com/components/amp-accordion/

 

アコーディオンの中にさらにアコーディオン

動画

https://ampbyexample.com/components/amp-video/

 

アニメーションGIF

https://ampbyexample.com/components/amp-anim/

 

ログインユーザーのみ記事の表示

https://ampbyexample.com/components/amp-access/

 

フォーム

https://ampbyexample.com/components/amp-form/

検索フォーム

 

お問合せフォーム

 

 

 

オーディオ

https://ampbyexample.com/components/amp-audio/

 

カル―セル

https://ampbyexample.com/components/amp-carousel/

カル―セルと画像ギャラリー

上よりこちらのほうが便利かも?

https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

 

Facebookの投稿やビデオを表示

インストグラムを表示

https://ampbyexample.com/components/amp-instagram/

 

Twitter を表示

 

Vine表示

 

SNSシェアボタン表示

googleアナリティクスの設定

<head>内に以下記載

<body>内に以下記載

※ UA-XXXXX-Y は自分のgoogleアカウントに置き換える

 

イベント トラッキングの測定を含めた例

<body>内の記載を以下に変更

この場合、クリックを計測したい場所に id=”event-test”  を指定

参照: https://developers.google.com/analytics/devguides/collection/amp-analytics/

 

AMP HTMLの間違いがないかチェックする

AMP HTMLのページのURLの最後に #development=1 をつけてサイトを開く

又は https://validator.ampproject.org/ こちらの検証ツールを利用する

 

AMPエラーの対象方法

エラー①

タグ「amp-sidebar」の親タグは「div」ですが、「body」のみ使用できます。

対処法
body 直下に amp-sidebar を設置する

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

東京・千葉の中国語教室

中国語教室