NIFの楽園

主にAndroidスマートフォンやアプリに関する紹介

【WordPress】【Plug-in】『AMP for WP– Accelerated Mobile Pages』の機能と使い方ーカスタマイズ編

2017/09/17

 前回は、AMPページを作成するスタート編として、プラグイン「AMP」と「AMP for WP – Accelerated Mobile Pages」の利用方法について紹介しました。
 その際、「AMP for WP – Accelerated Mobile Pages」については、AMPページを立ち上げることを最優先にして、必要最低限の設定のみを紹介しましたが、「AMP for WP」には、まだまだ沢山の有用な機能や使い方があるので、今回は、それらを利用して、現在のmobileページと遜色のないよう本格的なAMPページ作りをしたいと思います。

・スポンサーリンク


※機能や使い方のわからなかったところは割愛させていただきました。
  
Ⅰ.AMPforWP Options(Ver.0.9.61)

1.設定(【メニュー】の「AMP」⇒「Settings」

 プラグイン「AMP」によって、投稿ページを「AMP HTML」に準拠しましたが、Googleに「AMPページ」として認識してもらうためにはロゴの設定〔1)Global⇒Logo〕が必要です。また、Googleから警告を受けないために構造化データの設定〔9)Structured Data〕も必要になります。
 投稿ページ以外のページもAMPページ対応にすることもできます。〔2)AMP Support〕
 また、PCページ(mobileページ)と同じようなSEO対策〔5)SEO〕やコメント欄〔12)Comments〕・問い合わせフォーム〔11)Contact Form〕作成も可能ですし、AdSense〔4)Advertisement〕やGoogle Analytics〔8)Analytics〕にも対応できます。
 さらに、個々の投稿ページごとにAMPページ表示/非表示の設定も可能です。〔14)Hide AMP Bulk Tools〕

・設定オプション一覧

オプション デフォルト 内容
1)Global Logo 未設定 AMPページにロゴを追加します。
【詳細】参照
Custom Logo Size OFF 「ON」にすると、ロゴのサイズをデフォルト(190×36)から変更できます。
2)AMP Support AMP on Pages ON サイトをAMPページ対応にするならここで「ON」にします。
Homepage Support ON トップページをAMPページしたい場合、「ON」にします。
※デフォルトのトップページは、投稿記事一覧です。
Front Page
※「Homepage Support」が「ON」の場合に表示されます。
OFF トップページに、固定(AMP)ページを表示したい場合は、「ON」にします。
・表示される「Select Page as Front Page」で、固定(AMP)ページを選択します。タイトルを表示したい場合は「Title on Static Front Page」(デフォルト「OFF」)で、「ON」にします。
※固定(AMP)ページは、「Custom AMP Editor」で作成します。【詳細】参照
Archive page Support OFF 「ON」にすると、アーカイブページ(カテゴリー、タグ等)をAMPページにできます。
※投稿ページに表示される「カテゴリ」「タグ」からリンクできるようになります。
3)Page Builder Enable Page Builder for AMP ON ???
4)Advertisement AD #1
AD #2
AD #3
AD #4
AD #5
AD #6
OFF アドセンスを次の6カ所に配置することができます。
・AD #1:ヘッダーの下
・AD #2:フッターの下
・AD #3:記事の上
・AD #4:記事の下
・AD #5:タイトルの下
・AD #6:関連記事の上


※「ON」にすると
・AD Size:サイズを選択します。
・Data AD Client:「AdSense Publisher ID」を入力します。
・Data AD Slot:「AdSense Ad Code」を入力します。
【詳細】参照
5)SEO Meta Description OFF ???
Additional tags for Head section AMP page 未設定 ウェブサイトのヘッドセクションにメタタグを追加する場合は、メタタグを含んだHTMLコードをここに貼り付けます。
6)Yoast SEO Options Meta Tags from Yoast ON 「Yoast SEO」を利用している場合に、「Yoast」からソーシャル追加する、グラフメタタグを開くには「ON」にします。
Yoast Description in ld+json OFF 「Yoast SEO」を利用している場合に、ld+jsonにカスタムディスクリプションを追加するには「ON」にします。
7)Advanced Index & No Index Options Archive subpages (sitewide) NOINDEX 「アーカイブのサブページ」(子ページ?)をクローラーの収集対象にするか(INDEX)しないか(NOINDEX)の設定です。
Author Archive pages INDEX 「投稿者アーカイブ」をクローラーの収集対象にするか(INDEX)しないか(NOINDEX)の設定です。
Date Archive pages INDEX 「日付アーカイブ」をクローラーの収集対象にするか(INDEX)しないか(NOINDEX)の設定です。
Categories INDEX 「カテゴリー」をクローラーの収集対象にするか(INDEX)しないか(NOINDEX)の設定です。
Tags INDEX 「タグ」をクローラーの収集対象にするか(INDEX)しないか(NOINDEX)の設定です。
8)Analytics Analytics Type Google Analytics 任意のアナリティックスを選択します。※通常はデフォルトのGoogleと思います。
Google Analytics
※「Analytics Typ」で「Google」を選択している場合に表示されます。
未設定 Google Analytics のトラッキングIDを入力します。
Use Google Tag Manager OFF 「Google Tag Manager」を利用するときは、ここを「ON」にして、「Tag Manager ID」「Analytics Type」「Analytics ID」を入力します。(必須)
9)Structured Data Default Structured Data Logo 未設定 設定しないと「Search Console」で、『無効な構造化データ要素(問題の重大性: 重要ではない問題)』と警告されます。
【詳細】参照
Custom Logo Size OFF デフォルトを変更するときに「ON」にします。※デフォルトは、幅600pix:高さ60pix
Default Post Image 未設定 ロゴと同様で、設定しないと「Search Console」で、『無効な構造化データ要素(問題の重大性: 重要ではない問題)』と警告されます。
Default Post Image Width 700 幅を設定
Default Post Image Height 550 高さを設定
10)Notifications Enable Notifications OFF 「ON」にすると、AMPページにメッセージを表示できます。
11)Contact Form Contact Form 7 Support OFF 問い合わせフォーム作成プラグイン「Contact Form 7」をAMPページで利用するには「ON」にします。(※未確認)
Gravity Forms Support OFF 問い合わせフォーム作成プラグイン「Gravity Forms」をAMPページで利用するには「ON」にします。(※未確認)
12)Comments No of Comments 10 コメントの数
Disqus comments Support OFF コメントプラグイン「Disqus Comment System」をAMPページで利用するには「ON」にします。(※未確認)
Facebook comments Support OFF ???
13)Facebook Instant Articles Facebook Instant Articles Support OFF ???
14)Hide AMP Bulk Tools Individual AMP Page (Bulk Edit) Show by Default 各ページの編集画面のメタボックスにある「Show AMP for Current page?」のデフォルト値(表示する/隠す)を一括して設定します。【詳細】参照
Select Categories to Hide AMP 未設定 選択したカテゴリをAMPページから除外します。
15)Advance Settings Mobile Redirection OFF 「ON」にすると、モバイルユーザーをWebサイトのAMPバージョンに直接リダイレクトすることができます。
※モバイル端末で閲覧しているときに、参照元のリンク指定がPCページのURLであっても、AMPページが存在すればそれを表示してくれます。
Enter HTML in Header 未設定 ヘッダー(<head>と</head>の間)に配置するカスタムマークアップがある場合は、ここに記述します。
Enter HTML in Footer 未設定 フッター(<body>と</body>の間)に配置するカスタムマークアップがある場合は、ここに記述します。
Auto Add AMP in Menu URL OFF 「ON」にすると、メニューの項目をクリックしてもAMPページに誘導できます。
16)Translation Panel 英語 英語表記を日本語に変換できます。
【詳細】参照

・スポンサーリンク



【詳細】-ロゴの設定
初級編を参照してください。

【詳細】-構造化データの設定

 ここでの設定は、Google向け用で、AMPページ上での表示には影響ありません。当面、設定しなくてもAMPページは有効ですが、「Search Console」で、『無効な構造化データ要素(問題の重大性: 重要ではない問題)』として警告されてしまいます。

 警告がいやな場合は、適当な画像を設定しておきましょう。

GoogleによるAMPページの構造化データのガイドラインはこちらを参照してください。
『https://developers.google.com/search/docs/data-types/articles#logo-guidelines』

【詳細】-AdSenseの配置
初級編を参照してください。

【詳細】-個々の記事ごとにAMPページとしての表示/非表示の設定方法

・「投稿の編集」画面のメタボックス
 記事ごとにAMPページとして表示する/しないの設定は、「投稿の編集」「固定ページの編集」画面のメタボックスにある「Show AMP for Current page?」で「表示する」/「隠す」を選択します。

※「隠す」にすると通常のmobileページが表示されます。

※「Individual AMP Page (Bulk Edit)」オプションとの関連

 「Individual AMP Page (Bulk Edit)」オプションは、メタボックスにある「Show AMP for Current page?」の選択を一括して設定できるようになっています。
 ・すべてのページを「AMPページ」で表示しない場合は、「Hide by Default」を選択します。
 ・すべてのページを「AMPページ」で表示する場合は、「Show by Default」を選択します。

【詳細】-AMPページ用トップページの作成

 「投稿の編集」「固定ページの編集」画面の最下部に「Custom AMP Editor」という欄が表示されています。
 ①ここにAMPページ用の記事等を記述して、②をチェックして有効にすると、AMPページの表示は、PCページのHTMLから変換したものより、こちらの記述が優先されます。
 固定ページは、プラグイン「AMP」では、AMPページ対応にはならないので、ここで、トップページに表示したい内容を記述すればいいことになります。

 AMPページの内容は、通常、PCページの内容と同じと思いますが、ここに、「AdSense」のAMPページ用広告コードを追記することで、好きな場所に広告を配置することができるようにもなります。

※「AdSense」のAMPページ用広告コードの記述方法については、こちらを参照してください。『https://support.google.com/adsense/answer/7183212?hl=ja』
 
※「AMPforWP Options」の「Advertisement」で少なくとも1か所AdSense広告を設定しておく必要があります。
(設定しないと「Search Console」の「Accelerated Mobile Pages」で「サポート終了のタグまたは属性の使用(重大ではない問題)」詳細「「amp-ad」で必要なタグ「amp-ad extension .js script」がないか、正しくありません。これはまもなくエラーとなります。」と警告されます。)

【詳細】-英語表記の日本語化

 AMPページでの英語表記を日本語に変換することができます。

・「Translation Panel」

(英語表記一覧と変換例)
・Show more Posts
・Show previous Posts
・Top
・View Non-AMP Version
・Related Post⇒関連記事
・Navigate⇒メニュー
・On
・Next
・Previous
・Footer(フッターの編集)⇒©2011 androidappsea
・Categories⇒カテゴリ
・Tags⇒タグ
・By
・Published by
・in
・View Comments
・Leave a Comment
・at
・says
・Edit
・ago⇒前
・This post was last modified on
・Category (archive title)⇒カテゴリ
・Tag (archive title)⇒タグ
・View More Posts (Widget Button)
・Next Read
・via
・You searched for:
・It seems we can't find what you're looking for.
・Type Here⇒タイトル検索できます。

 
2.外観(【メニュー】の「AMP」⇒「Appearance」)

 AMPページのレイアウト〔9)Misc⇒Drag & Drop Post builder〕やフォントやヘッダー・フッターのデザイン〔1)Themes⇒Themes Selector〕を選択できるようになっています。さらにスタイルをカスタマイズしたい場合にはcssを記述することでできます。〔2)Global⇒Custom CSS〕
 また、ソーシャルボタン〔8)Social〕にも対応しています。

・外観オプション一覧

オプション デフォルト 内容説明
1)Themes Themes Selector Design Two 「Design One」「Design Two」「Design Three」のテンプレートが用意されています。フォントやヘッダー・フッター部分などのデザインが違ってきます。
【詳細】参照
2)Global Call Now Button OFF 「ON」にすると、電話番号が追加できます。
Search OFF 「ON」にすると虫眼鏡アイコン(検索)が追加できます。
※SSLサイトであることが必須条件
※検索対象は、当該ブログのタイトルのようです。
Custom CSS 未設定 AMPページのスタイルをカスタマイズしたい場合は、ここにcssコードを追記します。
3)Header Non-AMP homepage link in the header and logo OFF 「ON」にするとヘッダー(ロゴ)部分をタップすると非AMPのトップページを表示します。
Navigation Menu in AMP ON 「ON」にすると、ヘッダーにメニューを表示できます。
4)Homepage Override Homepage Thumbnail Size OFF サムネイル画像のサイズを書き換えたい場合は「ON」にします。
「ON」にすると、幅と高さを指定できます。
5)Single Sticky Social Icons ON 「ON」にすると、ソーシャルボタンが画面最下部に常駐します。
Excerpt in single OFF 「ON」にすると、投稿ページの上に、記事の抜粋が表示できる。(?未確認)
Next-Previous Links ON 「ON」にすると、投稿ページの下に、前後の記事リンクを表示します。
Show Modified post date OFF 「ON」にすると、記事の更新日を表示します。
Author Bio in Single ON 「ON」にすると、投稿ページの下に、作成者のプロフィールを表示します。
Pagination in Single OFF 「ON」にすると、ページの分割ができるようになる。(?未確認)
Related Posts From Categories 関連記事の種類(カテゴリーまたはタグ)を選択します。
Number of Related Post 3 表示する関連記事の数を設定します。
6)Footer Link to Non-AMP page in Footer ON 「ON」にするとフッターに非AMPページのリンク(View Non-AMP Version)を表示します。
7)Page Meta For Pages OFF 「ON」にすると、固定ページのメタを有効にします。
8)Social Social Sharing (Article Single) OFF/ON ソーシャルボタンの表示有無を設定します。
(設定できるソーシャル)
・Facebook・Twitter・Google+・Email・Pinterest・LinkedIn・WhatsApp・LINE
9)Misc Drag & Drop Post builder 「Launch Post Builder」をクリックするとAMPページのプレビュー画面に遷移します。そこで、AMPの投稿ページのデザイン要素の表示有無と表示場所(順番)の設定ができます。
【詳細】参照
RTL Support OFF 「ON」にすると、右から左へと読む言語をサポートします。

・スポンサーリンク



【詳細】-レイアウト

・デザインマネージャー
表示有無と表示場所を変えられるのは、次のデザイン要素です。
・Meta info(メタ情報)※作成者
・Title(タイトル)
・Featured Image(アイキャッチ画像)
・The Content(記事本文)
・Categories and Tags(カテゴリーとタグ)
・Social Icons(ソーシャルボタン)
・Comments(コメント欄)
・Related Posts(関連記事)
・Breadcrumb(パンくずリスト)

①:表示有無を設定します。
②:ドラッ&ドロップで、デザイン要素の位置を上下に移動します。

【詳細】-テーマ(デザイン)

 3つのテンプレート「Design One」「Design Two」(デフォルト)「Design Three」が用意されています。

 

(デザイン例)
 左から「Design One」「Design Two」(デフォルト)「Design Three」です。
フォントやヘッダー・フッター部分などのデザインが違っています。好みに合わせて、変えてみてください。

 

 

Ⅱ.AMPページを止める場合の対処方法

 AMPページに対応したものの想定と違っていたとか、時期尚早だとか思ったときに、もとのmobileページにもどすことは簡単にできます。しかし、もとに戻したことをGoogleが探知する(クローラーによる収集)までに時間がかかるため、検索結果にはAMPページとして表示されますが、閲覧しようとしたときに実際のページが存在しないためにエラーが発生します。
 これに対処する方法について紹介しておきます。

1.プラグインの「停止」

 ・何らかの理由で、AMPページ対応を止めたい場合は、プラグイン「AMP」「AMP for WP – Accelerated Mobile Pages」を「停止」(「削除」までは不要かと思いますが、2度と利用しない場合は「削除」)します。
 ・AMPページは、存在しなくなりますが、「Google AMP Cache」にURL情報が当面残っているので、モバイル検索では、まだAMPページとして認識され、閲覧しようとするとエラーになります。

 ※「AMPforWP Options」の「AMP on Pages」の設定を「OFF」にすれば、AMPページを残したつつ(?)、mobileページを表示できそうな気もしますが、未確認なので何とも言えません。

2.エラーを解消する方法について

 いくつかの選択肢があります。
 ・時間が経つと自然と「Google AMP Cache」から削除されるので、それまで待ちます。
 ・自然に削除されるのが待ちきれないときは、「update-ping」を使って1件ずつ「Google AMP Cache」から(即時)削除します。(件数が多いときは結構手間です。)
 ・自然に削除されるのが待ちきれず、かつ件数が多いときは、リダイレクトで、AMPページを非AMPページに誘導します。

1)「update-ping」を使って即削除する方法
  ※実際に試していないので、一旦割愛させていただきます。
  方法については、こちらを参照してください。『https://www.suzukikenichi.com/blog/anatomy-of-amp-cache/』

2)リダイレクトする方法

 ・プラグイン「Redirection」をインストールして有効化します。
 
 ・プラグイン「Redirection」の「設定」をクリック⇒①メニューの「Redirects」をクリックします。
 ・②「Source URL」に「/(.*)\/amp 」と入力します。
 ・③「Regex」をチェックします。
 ・④「Target URL」に「https://www.solodc.xsrv.jp/$1 」と入力します。
 ・⑤「Group」は「編集済みの投稿」のままです。
 ・⑥「Add Redirect」をクリックします。
 
 これで、設定は完了です。

・スポンサーリンク






Amazon.co.jpアソシエイト

Amazon.co.jpアソシエイト(商品検索)

-wordpress
-, , , , ,