AMPの設定

AMP導入・設定とデザイン・AMPテストとAMPエラー


スポンサーリンク

AMP 導入

Google AdSenseで、「サイトを分析した結果、次の点で改善の余地があることがわかりました。」で、AMPを導入し最適化を薦めています。しかし、AMP導入が思うように行かなかった方も多いようです。

AMPとは

AMPは、Accelerated Mobile Pagesの略で、googleやTitterが開発・推進しているモバイルウェブを高速化する手段です。新聞各社、ニュースサイト、yahoo!もAMP対応となりました。

スマートフォンやタブレットなどのモバイル端末でgoogle検索を行うと、雷マークが付いているアドレスがあります。そのマークの付いているwebページがAMP対応したページで、今までのwebページよりも速く、見やすくなっています。SEO的にはAMPは重要ではないとされてますが、速さや見やすさは閲覧者には重要でしょう。

スポンサーリンク

AMPでレイアウトはどう変わるのか

AMPを導入したモバイルページは今までのレイアウトと変わります。もっとシンプルに見やすくなります。しかし通常のページ(それまでのレイアウト)が消えたわけでもなく、両方から選び、閲覧できます。

スポンサーリンク

AMPは何故早いのか?

外部ファイルの一部制限

AMPページは AMP HTMLで作成します。

通常のwebページは、HTMLファイルから外部ファイルstyle.cssを読み込みます。しかし、AMPページは外部cssやjavascriptなど外部ファイルを制限します。それにより時間が短縮できます。

AMPページのデザインの変更は、AMPバージョンのスタイルシートでCSSの設定ができます。

AMPキャッシュと事前処理

AMPページは、検索エンジンGoogleにインデックスされるとGoogleのAMPキャッシュに保存されます。それにより、通常のページより速く表示されます。

閲覧者がwebページを表示するには様々な過程を踏みますが、その過程を事前処理、事前レイアウトすることにより通常のページより速く表示できます。

AMPのデザイン

AMP for WPを使った場合のデザイン(テーマ)

AMP for WPには3種類のテーマがあり、カスタムも可能です。

※ヘッダーの下に広告を入れてます。広告のサイズは7種類から選べます。ヘッダーはピンクに設定しています。好きな色を設定できます。

Desien 2(デフォルテ)

AMPの設定

Desien 3

AMPの設定

トップは画像のスライダーになっています。

Desien 1

AMPの設定

AMPのプラグインの設定

Accelerated Mobile Pages for WordPress(AMP for WP)の設定

wizardがあるので、簡単に設定できます。また左側の項目AMPの「setting」と「Design」で設定できます。

AMPの設定

設定しない場合は「Skip」設定しない場合は「Save」をクリックします。

  1. Run Installaion Wizardをクリック
  2. start
  3. ロゴのイメージを設定、おすすめのサイズは190×36
  4. APMを有効にするページを選択
  5. Analyticsを設定する
  6. Designを選ぶ
  7. Let’s Go

AMPの設定

AMPを設定するページを選びます。

AMPの設定

Analyticsを設定(下に詳しく記載)

 

それぞれの設定は「setting」と「Design」で設定できます。

AMPを有効にするページ

AMPを有効にするページの選択は以下を選べます。

  • Posts(投稿)
  • Pages(固定ページ)
  • Homepage(トップページ)
  • Category&Tags(カテゴリーとタグ)

AMPページのデザイン

テーマを3種類から選べます。

  • Desien 1(上を参照)
  • Desien 2
  • Desien 3

AMPページの設定

Settings(設定)

General Logo ロゴのイメージを設定
  Custom Logo Size  
  AMP Support AMPを有効にするか否か
  Page Builder AMページビルダーを利用

AMPページの広告の設定

広告を貼るプラグインで設定した広告は投稿の下に設定した広告は反映されますが、記事の中に設定した広告は反映されません。プラグインAMP for WPは、AMPページの広告を簡単に設定できます。

AMPの設定

ヘッダーの下の広告

Advertisement

AD#1 Headerの下
AD#2 Footerの下
AD#3 記事の上
AD#4 記事の下
AD#5 タイトルの下
AD#6 関連記事の上
  1. 広告を設置する場所をONにする
  2. 7通りのサイズから広告の大きさを選ぶ
  3. Data AD Clientを入力
  4. Data AD Slotを入力

AMPの設定

AMPの広告の設定「Data AD Client」と「Data AD Slot」について

  1. Google AdSenceにログイン
  2. 広告の設定-広告ユニットを開く
  3. 新しい広告ユニットをクリックして広告ユニットを作る

広告コードを表示します。必要なコードは赤文字の部分です。

<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-123456789
data-ad-slot=”12345678
data-ad-format=”auto”></ins>
<script>

seo・indexの設定

SEO Meta Description メタタグの設定
  Additional tags for Head section メタタグの追加
  Yoast SEO Options Yoastを設定している場合はON
Index&No Index Archive subpages アーカイブをindexする
  Author Archive pages 投稿者アーカイブをindexする
  Date Archive pages 日付アーカイブをindexする
  Categories カテゴリ―をindexする
  Tags タグをindexする

Analyticsの設定

  1. Analytics Typeを選ぶ
  2. トラッキングIDを記載

Google AnalyticsのトラッキングID

  1. Google Analyticsにログイン
  2. 左の項目より管理のアイコンをクリック
  3. 管理画面でプロパティの名前をドロップダウンから選ぶ
  4. プロパティの設定を開く
  5. トラッキング IDをコピーする
  6. 上記の設定にドラッキングIDを貼る

Structured Data(構造化データ)で重要なこと

Structured Data Type 情報のタイプを選ぶ
Default Structured Data Logo ロゴ設定(必須)
Default Post Image 投稿画像設定(必須)

「Default Structured Data Logo」と「Default Post Image」を設定しなければ、Search Consoleで警告が出るようです。サイズの変更がある場合は「Custom Logo Size」をONにして変更します。

その他カスタム

Notice Bar クッキーを通知するBarを設置
Push Notifications Push通知機能を設置
Contact Form 問い合わせフォーム設置
Comments コメントフォームの設置
Instant Articles FBでインスタント記事を公開する
Hide AMP Bulk Tools Show:AMPページに対応・Hide:除外(カテゴリー別に除外できる)

Advance Settings

Advance Settings モバイルユーザーにAMPページをリダイレクトする
Enter HTML マークアップを記述
Auto Add AMP in Menu URL メニューのURLをAMPを自動追加
Category base remove in AMP カテゴリパーマリンクからcategoryのスラッグを削除
Tag base remove in AMP タグアーカイブパーマリンクからtagのスラッグを削除
Featured Image アイキャッチ画像の設定の変更

Translation Panelで日本語に変更

AMPの設定

わかりやすい日本語に変更します。

Designの変更

Design―Global

themes テーマを選ぶ
Anchor Link Color リンクの色の設定
Date Format 日付形式の設定
Custom CSS CSSを記述

Design―header

AMPの設定

メニュー

Navigation Menu メニューの設定
Search 検索アイコンの設置
Call Now Button 電話アイコンの設置
Non-AMP HomePage link in Header and Logo AMPではないページをリンクする

Design―HomePage

Excerpt on Small Screens 抜粋の表示とその文字数
Override Homepage Thumbnail Size サムネイルのサイズを上書きする

Design―Single(投稿ページの設定)

AMPの設定

Sticky Social Iconsと著者BIOとフッターのリンク(TOP/Non-AMP)です。

Breadcrumb パンクズリストを表示する
Categories・Tags カテゴリ―・タグを有効にする
Sticky Social Icons ステック型ソーシャルアイコンを表示する
Excerpt 抜粋を表示する
Next-Previous Links Nextを表示しリンクする
Show Post Modified Date 更新日を表示する
Author Bio 著者BIOを表示
Link to Author Pages 著者のページへリンクする
Post Pagination  
Related Post by 関連ページをカテゴリーかタグか選ぶ
Sort Related Posts Randomly 関連ページをランダムにソートし表示
Number of Related Post 関連ページの表示件数
In-Content Related コンテンツの中に関連ページを表示する

Design―Footer

Link to Non-AMP AMPではないページをリンクする
Back to Top link Topにリンクする

Design―Page(固定ページ)

Meta Information メタ情報を有効にする

Design―Social

ソーシャルボタンを設置する

Design―Misc

Launch Post Builderをクリックし、Post Builderを開く

AMPの設定

右を見ながら、それぞれの位置を決めます。

AMPの設定

関連記事はプラグイン「AMP for WP」でも設定できますが、他のプラグインを利用しています。social iconは「Sticky Social Icons」で設定しているので、チェックは付けてません。

AMPページの確認・チェック

AMPページのアドレスは、通常のアドレスに「/amp」を付けるだけです。

  • https://example.com/amp

プラグイン「AMP for WP」を使っている場合は

  • ダッシュボードの左上のホームアイコン、「サイトを表示」の下に「Visit AMP」があり、クリックするとAMPページが表示されています。

AMPテスト

あなたのAMPページは有効ですか?

  1. テストするURLを入れる
  2. テストの実行をクリックする

AMPの設定

テストの結果です。

AMPページを構造化テストツールで確認

  1. 省略可能な値を探すをクリックする
  2. 構造化テストツールで確認する

AMPの設定

上に記載しているように「Default Structured Data Logo」の画像のURLと「Default Post Image」の画像のURLを設定しなければ、赤い四角の部分に警告が出ます。

AMPエラー

以前、無料サーバーを使っており、<script type=”text/javascript” src=”https://ad.example.ne.jp/js/server-wp.js”></script> というサーバーが埋め込んだ広告があるためにAMPエラーが出ました。

「AMP ページが Google のガイドラインに準拠していない」「ユーザー作成の JavaScript がある」

無料サーバーの広告なので、ガイドラインに準拠していなくても変更ができません。AMPに対応することを止めました。

  • AMPを無効とする
  • AMPページをなくしたことによる404エラーは、消えるまで様子をみる

以前にエラーが出たこともあって、お試しで設定してみてAMPテストを行い、慎重にAMP化しましたが、利用しているプラグインやテーマで問題はありませんでした。