amp blogger

Bloggerで最小限のコーディングでampテスト実施

こんにちは Tomoです。

bloggerでブログを初めてもうすぐ１か月経ちます。そんな状況ですが最近PSI(PageSpeed Insight)で自分のサイトを測定したところ速度が遅いことが分かりました。

原因はいろいろあると思いすが、今回テーマを見直そうと思います。ついでにampの技術も使って新しいテーマを作りたいと思います。

目次
  1. ampとは
  2. bloggerにおけるampの使用について
  3. 最小コーディングでampの評価をする
    1. amp htmlの基本構成
    2. head
      1. 文字エンコード
      2. viewport
      3. title
      4. canonical
      5. blogger skin
      6. ampのstyle
      7. ampのjs
    3. body
      1. ヘッダーwidget
  4. まとめ

ampとは

amp「Accelerated Mobile Pages 」はGoogleが中心となって立ち上げたプロジェクトです。

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。

「Accelerated Mobile Pages」『フリー百科事典　ウィキペディア日本語版』より。
"最終日付（2019年4月21日 (日) 05:16 ）"　UTC
URL: http://ja.wikipedia.org/

ampはモバイルでのウェブサイト閲覧を高速化することを目的としています。

AMP であるかどうかが直接 Google 検索のランキングに影響することはありませんが、スピードはランキングに影響します。

『AMP が検索結果にどのように表示されるかを理解する』より。
URL: https://developers.google.com/search/docs/guides/about-amp?hl=ja

ampを導入したからといってSEO(検索の上位)に直接の影響はないようです。ただし、閲覧速度の向上がSEOに影響を与えるためモバイルで遅い評価でSEOが下がっている場合はampの対応で向上する可能性はありそうです。

トップニュースのカルーセルなど、Google における AMP 固有の機能をご利用いただけるのは、現時点ではモバイルのみとなっております。AMP 自体は、パソコンを含め、すべての種類の端末で動作しますが、AMP 固有の機能をモバイル以外のプラットフォームに展開する予定は今のところありません。

『Google 検索での AMP に関するガイドライン』より。
URL: https://support.google.com/webmasters/answer/6340290?hl=ja&ref_topic=9460494

なお、このampに対してGoogleはモバイルサイトのみを対象としており、今後タブレットやPCへの展開は無さそうです。

bloggerにおけるampの使用について

bloggerのテーマ選択メニューから選択できるテンプレートにamp対応のテンプレートは無いようです。

しかし、bloggerは海外でも使用されているため海外で作成されたamp対応のテンプレートはネット検索で入手可能です。

ただし、テンプレートに問題あるかわかりませんが、ampテンプレートを使うとテーマのビューが見れなかったり、レイアウトの制限があるなどbloggerの機能が使えなくなります。

また、bloggerの制限として<b:skin>と<b:section>などのタグが必須、id属性が必須、保存時にコードが追加される。HTMLに展開されるときにname属性が付与されるといったことがありました。

修正や追加などは直接テンプレートファイルを触る必要があるためamp化についてはテキストエディタで保存しながら対応することになります。

最小コーディングでampの評価をする

amp用のテンプレートをいちから作成し、Google Search Consoloのampのテスト機能を使って評価を通したいと思います。

なお、今回はコンテンツの内容も表示されない状態で評価をします。今後の投稿で少しずつコンテンツに対応をしたいと思います。

amp htmlの基本構成

最初に基本となる構成のタグに対する記述です

  
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html amp='amp' lang='ja'>
  <head>
  </head>
  <body>
  </body>
</html>

bloggerのテンプレートはxmlは必須です。

htmlタグはampの記載が必要です。本来はampのみを書けばよいのですがbloggerの場合ampだけ書くとエラーになるので、「amp='amp'」と記載します。

あとの構成は、通常のHTMLの構成とかわらないです。

head

headはブログの閲覧者には見えない内容です。ページの設定情報等を記載しています。

検索エンジンはこのheadの情報も解析しています。SEOの向上にもこのheadタグに囲まれている内容は重要です。

  
  <head>
・・・略・・・
  </head>
  <!--<head/>-->

bloggerでは「<」をエスケープする必要があるようです。

文字エンコード

  
<meta charset='utf-8'/>

文字のコードを指定します。ここには「utf-8」を指定します。

viewport

  
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>

viwepointはブラウザの画面サイズに合わせて描画を行う指定です。

initial-scaleは初期表示時の倍率（ズーム）を表しており、スマホなどで表示する際の倍率を設定します。

minimum-scale=1は最小値です。なお、倍率を変更させないように指定することも可能です。

title

  
<title><data:blog.title/>;</title>

bloggerのskin設定します。bloggerはこの記述が無いと保存ができません。

ampのstyle

ampのstyleですがこのまま使います。

  
    <style amp-boilerplate='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='amp-boilerplate'>
        body{
          -webkit-animation:none;
          -moz-animation:none;
          -ms-animation:none;
          animation:none
        }
      </style>
    </noscript>

ampのjs

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

ampのjsです。これもそのままの内容を記載します。

body

bodyはブログの閲覧者に見える内容です。

  
  
・・・略・・・
  <!--</body>-->
  </body>

boggerでは「<」をエスケープする必要があるようです。

ヘッダーwidget

bloggerは保存するときにsectionが必須なので、タイトルのwidgetと一緒に設定します。

  
    <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
      <b:widget id='Header1' locked='false' title='{タイトル}(Header)' type='Header' version='1'>
        <b:widget-settings>
          <b:widget-setting name='displayUrl'/>
          <b:widget-setting name='displayHeight'/>0</b:widget-setting>
          <b:widget-setting name='sectionWidth'/>-1</b:widget-setting>
          <b:widget-setting name='useImage'/>false</b:widget-setting>
          <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
          <b:widget-setting name='imagePlacement'/>BEHIND</b:widget-setting>
          <b:widget-setting name='displayWidth'/>0</b:widget-setting>
        </b:widget-settings>
      </b:widget>
    </b:section>

上記を張り付けます。{タイトル}は自分のページのタイトルです。

まとめ

今回は最低限のコーディングでampを評価するためこの状態まで記載します。

この状態で保存してGoogle Searche Consoleのampテストで評価を行います。

次回は構成を決めて対応を行いたいと思います。

ブログ アーカイブ

このブログを検索