STAFF BLOG スタッフブログ

AMP対応してみた(・囚・)v

久々、ブログになります。(・囚・)

某リニューアルサイトの案件においてAMP対応をおこないました。
やってみて、いろいろとAMPについて以下、まとめてみました。

AMPとは

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。(省略)

AMP公式サイト

↓↓↓スマホの検索エンジンに表示される、以下の内容のことです。

※稲妻マークがAMP対応済のアイコン

PC・スマホページとスマホAMPページで別URLを作成

レスポンシブ対応で、URLがPC・スマホ一緒のところもあるかと思いますが
同じ記事でも別URLにする必要があります。

◆参考程度にこんな形のURLを準備
PC・スマホ:/news/記事ID/
AMPページ:/amp/news/記事ID/

PC・スマホのページにmetaタグ設置

<link rel="amphtml" href="AMPページのURL">

AMPページ準備

htmlタグ

<html amp lang="ja">

↑↑↑こんな感じでampとタグ内につけます。

文字コードセット

※UTF-8以外は許されていない。

PCページURLのセット

<link rel="canonical" href="PCページのURL">
↑↑↑head内にPCページURLをセット

無条件にhead内に以下の内容をいれる

<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;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></noscript>

AMPでできないこと

  • JavaScriptが書けない。
  • 使用可能なタグが決まっている。(参考サイト:https://syncer.jp/Web/AMP/
  • cssはlink rel=で読みこむことができません。
    <style amp-custom>でhead内に直接cssを書かなければならない。
    マークアップされる方の配慮もあり、私は<?php echo file_get_contents("cssのファイルパス");?>でcssを書くことにしました。
  • cssでフォントのimportはできないので<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=フォント名">とheadに書く。

AMPのjson-ldを用意

head内に以下のようなコードをセットします。

<script type="application/ld+json">
	{
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "記事タイトル",
    "image": {
        "@type": "ImageObject",
        "url": "記事のサムネイル画像URL",
        "width": サムネイル画像幅サイズ,
        "height": サムネイル画像縦サイズ
    },
    "datePublished": "0000-00-00T00:00:00+0900", ←記事掲載日時
    "publisher": {
        "@type": "Organization",
        "name": "webサイト名 or 企業名",
        "logo": {
            "@type": "ImageObject",
            "url": "サイトロゴ画像URL",
            "width": サイトロゴ画像幅サイズ,
            "height": サイトロゴ画像縦サイズ
        }
    }
}
	</script>

AMPページのimgタグ

PC・スマホページの画像html

<img src="画像参照場所" alt=""></img>

AMPページの画像html

<amp-img src="画像参照場所" width="画像幅サイズ" height="画像縦サイズ" layout="responsive" alt=""></amp-img>

※上記のように、AMPページを作成の際はimg出力でamp用のタグを使用します。

AMPページにYouTube動画をセットしたい場合

head内にjs読込を入れる。

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

コンテンツ内のYouTube動画html

<amp-youtube data-videoid="YouTube動画ID" width="800" height="450" layout="responsive"></amp-youtube>

その他のソーシャル

ハンバーガーメニューを入れたい場合

基本、JavaScriptを使用できませんが、head内に

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

↑↑↑をセットし、デザインもこちらのjsにあわせたデザインをする必要があります。

参考サイト
https://awe-some.net/2017/03/amp-slider-plugin/
https://ampbyexample.com/

Googleアナリティクスのタグセット

head内にセット

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

body内にセット

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-*****-*"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

AMP検証

正しいhtmlを書いているかチェック

https://validator.ampproject.org/

本番稼働後、AMPページ有効かチェック

https://search.google.com/test/amp

最後に

対応して、エラーチェックを行ってみても
スマホに反映されておらず
AMP反映するまでには、Google先生次第なところもあるのですが
日数がかかるようです。。

ご参考までに。。。(・囚・)ノ


↓↓↓AMP対応してみたいってご要望、お問い合わせよろしくお願いいたします。

相談・お問い合わせしてみる

※ひろやんから拝借www

INDEXブログ一覧へ
CONTACTお問い合わせはこちら