AMP導入・設定とデザイン/AMP for WP

AMP-for-WPWP プラグイン
AMP-for-WP

AMPとは

AMPは、Accelerated Mobile Pagesの略で、googleやTitterが開発・推進しているモバイルウェブを高速化する手段です。

  • シンプルで見やすいページ
  • シンプルだから速い

SEO的にはAMPは重要ではないとされてますが、AMPページの方が閲覧数が多いです。通常のページとAMP対応させたページが存在し、両方から選び閲覧できます。

AMPは何故早いのか?

外部ファイルの一部制限

  • 外部cssやjavascriptなどを制限し時間短縮する
  • AMPページは AMP HTMLで作成

通常のwebページは、HTMLファイルから外部ファイルstyle.cssを読み込みます。AMPページのデザインの変更は、AMPバージョンのスタイルシートでCSSの設定ができます。

AMPキャッシュと事前処理

  • GoogleのAMPキャッシュに保存されることで速い

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

Advertisements

AMPのデザイン

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

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

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

AMP-for-WP
AMP-for-WP

AMP for WP の簡単設定

インストール・有効化後

Accelerated Mobile Pages
Accelerated Mobile Pages
  • Basic(基本)
  • Advance(デザインを選べる)

Basicを選んで、後にAdvanceに変更もできるので、どちらを選んでもいいです。

AMP for WP
AMP for WP
Advertisements

Basicを選んだ場合とAdvanceを選んだ場合、切替も可能です。

AMP for WP
AMP for WP

簡単に設定(Basic)

settingで簡単に設定できます。設定後に変更もできます。

  • Accelerated Mobile Pages
  • AMP for WP
  • AMP for WP

Where do you need AMP?

「Change」をクリックし、AMPに対応させるページ等を次の中から選びます。

  • Homepage(ホームページ)
  • Posts(投稿記事)
  • Pages(固定記事)
  • Archives(アーカイブ)

個々の投稿ページでAMP非表示にするためには、各投稿編集ページで設定します。

Design and Presentation

ロゴとGlobal Color Schemeを設定します。ロゴのサイズは120×90で作成します。

Analytics Tracking

アナリティクスを利用している場合に設定します。

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

Privacy Settings

  • Cookie バーの表示非表示
  • GDPRに準じてるか

Cookie barはユーザーにCookieを使用していることを伝えるバーで、Cookieの使用を許可または拒否できるbarです。表示する場合はONにします。欧州のプライバシー規制(GDPR)に準拠し、EC市民に推奨できるサイトであれば、ONにします。

AMPページの広告の設定

ヘッダーの下の広告(sponsor)

AMP-for-WP
AMP-for-WP

AMP for WP の広告の設定は下のリンクをご参照ください。

ここまでで、AMPページとその広告の設置が終了しました。次に確認します。

AMPページの確認

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

  • https://example.com/amp

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

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

上記まででAMPページとその広告は表示されます。ここからはデザインなどを変えたい時に設定します。「Advance Setup」を選択すると無料のテーマを4種類から選べます。

AMPページのデザイン

  1. Basicにしている場合はAdvance Setupを選ぶ
  2. Desien をクリック
  3. テーマを選択する

Advance Setup を選択した場合の便利な設定

ここで便利な設定は、3カ所です。

  • Structured Data(構造化データ)(画像必須)
  • AMPのスタイルシートへの記述が可能
  • Head、body、Footer にHTML記述ができる

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

  • Advance Setupを選択→settings→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にして変更します。

AMPのスタイルシートへの記述

  • Advance Setupを選択→Design→Global→Advanced→custom css

Head、body、Footer にHTML記述

  • Advance Setupを選択→settings→Advance Settings

AMPのHead、body、Footer にHTML記述が可能です。必要ならば、ここにコードを貼ります。

AMPfor-WP
AMP for WP

ここから下は、非AMPをリンクするか?SEOの設定、表示を日本語にするか?などです。

Advance Setup を選択した場合の細かいsetting

  • Advance Setupを選択し、settingsの内容

AMPページの設定

Settings(設定)

  • Advance Setupを選択→settings→General
Logoロゴのイメージを設定
Custom Logo Size 190×36
AMP SupportAMPを有効にするか否か
Page BuilderAMページビルダーを利用

seo・indexの設定

  • Advance Setupを選択→settings→SEOの設定
SEOMeta Descriptionメタタグの設定 ON
Open GraphメタタグFacebookやTwitterでの共有に役立つ
プラグインとの統合利用しているSEOの選択
Meta TagsYoastのメタタグをAMPに表示
DescriptionYoastのメタディスクリプションを表示する
CanonicalYoastのカノニカルを利用する

Yoast SEOはcanonical(正規URL)を自動的に追加します。

CanonicalAll in OneSEOのカノニカルを利用する

Advanced Indexing(インデックスするかしないか)

  • Advance Setupを選択→settings→SEOの設定
Archive subpagesアーカイブをindexする
Author Archive pages投稿者アーカイブをindexする
Date Archive pages日付アーカイブをindexする
Categoriesカテゴリ―をindexする
Tagsタグをindexする

URL Inspection Tool Compartbility(URL検査ツールの互換性)は有効にしておきます。

その他カスタム

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

Advance Settings(高度な設定)

  • Advance Setupを選択→settings→Advance Settings
Mobile RedirectionモバイルユーザーにAMP表示を有効にする
Search Result Page in AMP非AMP検索結果に表示する(デフォルトで有効)
Change Internal Links to AMP内部リンクを /amp にする
Hide AMP VersionソースページにAMPを非表示にする
Category DescriptionデフォルトではON
Smooth Scrolling For Linksジャンプリンクが可能(簡単にスクロールできる)
Change End Point to ?amp「/ amp」を「?amp」に変更
Convert AMP to WP theme (Beta)AMPをWPテーマに変換する
Disable Right Click右クリック無効
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で日本語に変更

  • Advance Setupを選択→settings→Translation Panel
AMP-for-WP
AMP-for-WP

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

Designの変更

  • Advance Setupを選択→Designの設定

Global(一般設定)

  • Advance Setupを選択→Design→Global

Googleフォントを有効にした場合、GoogleフォントのAPIキーを取得します。

下のリンクで取得できます。

Google APIとOAuth クライアントIDを取得する方法 - webNote / WPとゲーム
Advertisements- 目次 G...

Design―Global

  • Advance Setupを選択→Design→Global
themesテーマを選ぶ
Anchor Link Colorリンクの色の設定
Date Format日付形式の設定
Custom CSSCSSを記述

Design―header

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

Navigation Menu Design(メニューのデザイン)

  • Advance Setupを選択→Design→Header→Navigation Menu Design
Navigation Menuメニューの設定
Search検索アイコンの設置

Header Settings

  • Advance Setupを選択→Design→Header Settings
Call Now Button電話アイコンの設置(電話アプリが立ちあがる)
Non-AMP HomePage link in Header and LogoAMPではないページをリンクする

Advanced Header Options(ヘッダーのオプション)

  • Advance Setupを選択→Design→Header→Advanced Header Options

Advanced Header Designを有効にすると、ヘッダーのサイズやメニューの位置、ヘッダーの境界線に影をつけたりできます。

Design―Homepag

  • Advance Setupを選択→Design→Homepag
Excerpt on Small Screens抜粋の表示とその文字数
Override Homepage Thumbnail Sizeサムネイルのサイズを上書きする

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

  • Advance Setupを選択→Design→Single
AMP導入・設定・デザイン
AMP導入・設定・デザイン

投稿ページの上部に表示される画像や公開日、パンクズリストの設定です。

Featured Image画像を表示する(サイズの設定)
Author Name著者名
Published Date公開日
Breadcrumbパンクズリストを表示する
Categories・Tagsカテゴリ―・タグを有効にする
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

  • Advance Setupを選択→Design→Footer
Link to Non-AMPAMPではないページをリンクする
Back to Top linkTopにリンクする

Design―Page(固定ページ)

  • Advance Setupを選択→Design→Page
Meta Informationメタ情報を有効にする

Design―Social

  • Advance Setupを選択→Design→Social

Sticky Social Icons、ソーシャルボタンを設置の設定です。

Sticky Social Iconsステック型ソーシャルアイコンを表示する

個々の投稿記事また固定ページをAMP非表示にする

投稿編集またはページ編集の設定(文章)で設定します。

Show AMP for Current Page?

  • Show(表示)
  • Hide(非表示)
Accelerated Mobile Pages
Accelerated Mobile Pages

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

AMPページの構造化テストツールでの確認方法は下のリンクに記載しています。

AMP・広告の設定/AMP for WP - webNote / WPとゲーム
Advertisements- 目次 A...
AMPページのCSSを編集する - webNote / WPとゲーム
Advertisements- 目次 A...

Design―Misc(その他の設定)

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

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

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

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

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

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