2021/12/18
前回は、AMPページを作成するスタート編として、プラグイン「AMP」と「AMP for WP – Accelerated Mobile Pages」の利用方法について紹介しました。
その際、「AMP for WP – Accelerated Mobile Pages」については、AMPページを立ち上げることを最優先にして、必要最低限の設定のみを紹介しましたが、「AMP for WP」には、まだまだ沢山の有用な機能や使い方があるので、今回は、それらを利用して、現在のmobileページと遜色のないよう本格的なAMPページ作りをしたいと思います。
※機能や使い方のわからなかったところは割愛させていただきました。
プラグイン「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 #1AD #2AD #3AD #4AD #5AD #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ページとしての表示/非表示の設定方法
※「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」で少なくとも１か所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⇒タイトル検索できます。
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コードを追記します。 ※<style-auto custom>と</style>の最後に追加されます。 |
|
| 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」にすると、右から左へと読む言語をサポートします。 | |
【詳細】－レイアウト
【詳細】－テーマ（デザイン）
３つのテンプレート「Design One」「Design Two」（デフォルト）「Design Three」が用意されています。
（デザイン例）
左から「Design One」「Design Two」（デフォルト）「Design Three」です。
フォントやヘッダー・フッター部分などのデザインが違っています。好みに合わせて、変えてみてください。
AMPページに対応したものの想定と違っていたとか、時期尚早だとか思ったときに、もとのmobileページにもどすことは簡単にできます。しかし、もとに戻したことをGoogleが探知する（クローラーによる収集）までに時間がかかるため、検索結果にはAMPページとして表示されますが、閲覧しようとしたときに実際のページが存在しないためにエラーが発生します。
これに対処する方法について紹介しておきます。
・何らかの理由で、AMPページ対応を止めたい場合は、プラグイン「AMP」「AMP for WP – Accelerated Mobile Pages」を「停止」（「削除」までは不要かと思いますが、2度と利用しない場合は「削除」）します。
・AMPページは、存在しなくなりますが、「Google AMP Cache」にURL情報が当面残っているので、モバイル検索では、まだAMPページとして認識され、閲覧しようとするとエラーになります。
※「AMPforWP Options」の「AMP on Pages」の設定を「OFF」にすれば、AMPページを残したつつ（？）、mobileページを表示できそうな気もしますが、未確認なので何とも言えません。
いくつかの選択肢があります。
・時間が経つと自然と「Google AMP Cache」から削除されるので、それまで待ちます。
・自然に削除されるのが待ちきれないときは、「update-ping」を使って1件ずつ「Google AMP Cache」から（即時）削除します。（件数が多いときは結構手間です。）
・自然に削除されるのが待ちきれず、かつ件数が多いときは、リダイレクトで、AMPページを非AMPページに誘導します。
１）「update-ping」を使って即削除する方法
※実際に試していないので、一旦割愛させていただきます。
方法については、こちらを参照してください。『https://www.suzukikenichi.com/blog/anatomy-of-amp-cache/』
２）リダイレクトする方法
・プラグイン「Redirection」をインストールして有効化します。
・プラグイン「Redirection」の「設定」をクリック⇒①メニューの「Redirects」をクリックします。
・②「Source URL」に「/(.*)\/amp 」と入力します。
・③「Regex」をチェックします。
・④「Target URL」に「https://www.solodc.xsrv.jp/$1 」と入力します。
・⑤「Group」は「編集済みの投稿」のままです。
・⑥「Add Redirect」をクリックします。
これで、設定は完了です。
