<
スポンサーリンク

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

AMP導入・設定・デザイン WordPress
AMP導入・設定・デザイン
この記事は約11分で読めます。

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導入・設定・デザイン
AMP導入・設定・デザイン

Desien 3

AMP導入・設定・デザイン
AMP導入・設定・デザイン

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

Desien 1

AMP導入・設定・デザイン
AMP導入・設定・デザイン

AMPのプラグインの設定

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

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

AMP導入・設定・デザイン
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を設定するページを選びます。

AMP導入・設定・デザイン
AMP導入・設定・デザイン

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

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

AMPを有効にするページ

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

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

AMPページのデザイン

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

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

AMPページの設定

Settings(設定)

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

AMPページの広告の設定

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

AMP導入・設定・デザイン
AMP導入・設定・デザイン

ヘッダーの下の広告

Advertisement

AD#1Headerの下
AD#2Footerの下
AD#3記事の上
AD#4記事の下
AD#5タイトルの下
AD#6関連記事の上
  1. 広告を設置する場所をONにする
  2. 7通りのサイズから広告の大きさを選ぶ
  3. Data AD Clientを入力
  4. Data AD Slotを入力
AMP導入・設定・デザイン
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の設定

SEOMeta Descriptionメタタグの設定
 Additional tags for Head sectionメタタグの追加
 Yoast SEO OptionsYoastを設定している場合はON
Index&No IndexArchive 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 NotificationsPush通知機能を設置
Contact Form問い合わせフォーム設置
Commentsコメントフォームの設置
Instant ArticlesFBでインスタント記事を公開する
Hide AMP Bulk ToolsShow: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導入・設定・デザイン
AMP導入・設定・デザイン

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

Designの変更

Design―Global

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

Design―header

AMP導入・設定・デザイン
AMP導入・設定・デザイン

メニュー

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

Design―HomePage

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

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

AMP導入・設定・デザイン
AMP導入・設定・デザイン

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

Breadcrumbパンクズリストを表示する
Categories・Tagsカテゴリ―・タグを有効にする
Sticky Social Iconsステック型ソーシャルアイコンを表示する
Excerpt抜粋を表示する
Next-Previous LinksNextを表示しリンクする
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-AMPAMPではないページをリンクする
Back to Top linkTopにリンクする

Design―Page(固定ページ)

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

Design―Social

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

Design―Misc

Launch Post Builderをクリックし、Post Builderを開く
AMP導入・設定・デザイン
AMP導入・設定・デザイン

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

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テスト
AMP導入・ AMPテスト

テストの結果です。

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

  1. 省略可能な値を探すをクリックする
  2. 構造化テストツールで確認する
AMP導入・構造化テストツール
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化しましたが、利用しているプラグインやテーマで問題はありませんでした。

タイトルとURLをコピーしました