STORK19(ver.2.1)のAMP設定方法 - OPENCAGE
新テーマ「STORK19」はこちら!

STORK19(ver.2.1)のAMP設定方法

STORK19ではver2.1以降、AMPプラグインをサポートしています。

プラグイン側の設定や、アナリティクス、その他AMP関連の注意点・設定方法について解説しようと思います。

テーマを、WordPress公式プラグインの、「AMP」プラグインの仕様に合わせる形でのAMP対応となるので、「AMP」プラグインのインストールと、一部AMP関連の設定が必要になります。

STORK19(ver2)のインストール

まずは最新版のSTORK19をテーマアップデートまたは上書きインストールします。

テーマアップデートは、ダッシュボードの【外観 > テーマ】または、【ダッシュボード > 更新】のページよりアップデートすることが可能です。

詳しくは以下の記事でも紹介しています。

ここでアップデートした時点では、それまでのテーマバージョン(ver.1系)と特に変化はありません。

この後に説明する「AMPプラグインの有効化&設定」によってサイト全体をAMP化することができるようになります。

AMPプラグインのインストール & 有効化

ダッシュボードの【プラグイン > 新規追加】にて、プラグインの検索ページにはいります。

検索窓に「 AMP 」と入力し、下記画像のプラグインを検索します。

AMP
「AMP」プラグインページはこちら
(作者: AMP Project Contributors)

有効化します。

有効化が完了すると、ダッシュボードの左側サイドバーに「AMP」というメニューが出現します。

「AMP > 設定」を押してみましょう。

すると、上の画像のような設定画面が表示されます。

基本的には、有効化した段階でAMP化の設定が完了します。

AMPプラグインの基本の使い方解説

「テンプレートモード」では、

  • 標準
  • トランジショナル
  • リーダー

の3種類から選択可能ですが、標準」か「トランジショナル」を選択します。(デフォルトで「標準」となっています)※1

実際のサイトとほぼそのままの見た目のAMPページが表示されます。(ほとんど違いがわからないため気づかないほど)

※1 
過去に「AMP」プラグインを利用していた場合は「リーダー」が選択されている可能性もあります。その場合は、上記の説明どおり、「標準」か「トランジショナル」を選択してください。

ここで実際にサイトを表示してみると、AMP版のサイトが表示されてます。

普段の見た目と「ほとんど」変わらないはずです。

上のメニューバーに、「AMP」と表示されます。

この表示が現在AMP版の表示である印です。

AMPチェックマークについて

緑のチェックマークが表示されている場合は、問題のないページです。

この他に、黄色のビックリマークとなっているページもあるはずです。

これは、AMP化のために、AMPに適さないコードを除去したという意味合いの注意表示です。

ただし、この状態でも、AMP化には成功しています。

「AMPテスト」を使ってAMPページを検証

ページがAMP化できているかどうかは、Googleが提供する「AMPテスト」サイトにて確認できます。

該当サイト:Google:AMPテスト

実際に上記警告がでているページを「AMPテスト」にかけてみたところ、「有効なAMPページ」としてテスト結果がでます。

ですので、「警告表示=AMP化されていない」ではない点に注意してください。

AMPプラグインの警告表示の意味

なぜこういった警告表示がでるのでしょう。

これは「AMP対応されてていないコードを取り除きました」といった注意となり、AMPに適応していないコード(例えばプラグインが提供するコード、アフィリエイトタグ、AdSenseのタグなど)

プラグイン側のコードが取り除かれているので、その機能が使えない可能性がある。という意味合いです。

(例を出すと、問い合わせフォーム系のプラグインはAMPページでは使えないものが多いとおもいます。※コードがすべて取り除かれてしまいます。)

取り除かれたコードの部分は、AM版では何も表示されなくなるのでそういった該当ページは事前に確認しておきましょう。

該当のページにて、管理バーの「AMP」リンクを押してみると、どういったコードを取り除いたのか。

をみることができます。

このページの場合、アフィリエイト用のバナー内のコードに問題があるようです。

ここでの補足点としては、警告がでていてもAMPページとしては認識されているので、AMPページとしての問題はありません。

ただ、広告コードが取り除かれていたり、改変されている可能性はあるので、その点は確認が必要です。

場合によっては、大本の記事内のコードを変更したり削除する必要があるかもしれません。

ページをAMP対応させない設定

上で述べた理由から、ページをAMP化させたくない場合は、ページごとに設定ができます。(AMPプラグインの機能です)

該当の投稿の編集画面にはいり、「ステータスと公開状態」にある、「AMPの有効化」のを無効にすることで、「このページはAMP化しない」ようになります。

この状態で保存すれば、以下の画像のようにAMPの警告表示はなくなります。↓

AMP版STORK19の微妙な表示の違い

AMPの仕様に合わせるために、一部標準の表示の違い、機能の違いがあるため簡単に解説します。

スライダーは表示されない(自動で動かない)

STORK19の機能である、トップページスライドショーは利用できません。

代わりにスライダー部分には、横スクロール可能な記事一覧が表示されます。

記事ページのSNSボタン

記事ページのSNSボタンは少しデザインが変わって、AMPの仕様にそったものが表示されるようになります。

Facebookシェアボタンの表示にはAPP_IDの設定が必要

AMPのFacebookシェアボタンは、デフォルトでは表示されません

これは、AMP版シェアボタンには、Facebookにて発行することができる、app_idの設定が必要になります。
サイトごとにIDの取得が必要となるためAMP版でFacebookシェアボタンを利用できるようにするには発行が必ず必要です。

APP IDの発行は「Facebook for Developers」にて発行することができます。

発行できたら、Facebook app_idのサイトへの設置は、テーマカスタマイザー内でできます。
【外観 > カスタマイズ > SNSボタン設定】の「Facebook APP ID」に正しいIDを入れることでボタンが表示されるようになります。

Facebook APP IDの設置

詳しくは下記記事でも紹介しています。

GoogleAnalyticsの設定

通常のGoogleAnalyticsのコードは、AMPでは利用できないため、別途AMP用に設定が必要になります。

AMPプラグインでも設定は可能ですが、少し分かりづらいため、ため、テーマ側でもAMP用Analyticsの設定が可能になっています。

【外観 > カスタマイズ > アクセス解析コード・headタグ】の「[AMP用]GoogleAnalytics解析コード」に、認証IDを設定する形となります。

2021年02月現在、GoogleAnalytics4(GA4)はAMPに対応していない

2021年02月現在、GoogleAnalytics4(GA4)はAMPに対応していないようです。
AMP版にてGoogleAnalyticsによる計測をするには、UA版のAnalyticsを利用する必要があります。

参考記事:Google アナリティクス 4 (GA4) はAMPをまだサポートしていない |海外SEOブログ

AMP化のトラブルシューティング

メニューや検索ボタンが動かない

子テーマのカスタマイズの影響が考えられます。子テーマにheader.phpやfooter.phpが含まれている場合は、最新版の親テーマの該当ファイルをコピーして再編集をしてください。

GoogleAnalyticsでの計測ができなくなった

通常のGoogleAnalyticsタグはAMPページでは許可されていないため使用することができません。
STORK19ではAMP用にGoogleAnalyticsの設定項目がありますので、そちらにトラッキングコードを入力することで、AMP対応のGoogleAnalyticsタグを出力することが可能です。

また、2021年2月現在、GoogleAnalytics4(通称GA4)は利用できないようです。(→参考記事)AMP版の計測コードはユニバーサル版のトラッキングコードをご利用ください。(UA-xxxxxxx-xxxとなっているものがユニバーサル版)

Facebookのシェアボタンが表示されない(または機能しない)

AMP版のシェアボタンはAMPが提供している仕様に合わせなければいけません。

その際に、Facebookに関しては、「APP ID」が必要となります。

【外観 > カスタマイズ > SNSボタン設定】の「Facebook APP ID」に正しいIDを入れることでボタンがうまく動くようになります。

デザインがテーマと違う(簡素化されている)

AMPの設定ページにて、テンプレートを「標準」か「トランジショナル」にしてください。

簡素化されたデザインとなっている場合、「リーダー」が選択されている可能性があります。

問い合わせフォームが表示されない

AMPページでは、プラグインなどの問い合わせフォームが無効化されて表示されなくなる可能性があります。
これはAMPの仕様にて、通常のJavascriptが許可されていないため、AMPプラグインによって許可されていないコードが取り除かれていることが原因となりますが、そういった問い合わせ系のプラグインがAMPプラグインをサポートしない限りは使えません。

その場合は、該当の問い合わせフォームのページをAMP化しないようにする対応方法があります。
また、問い合わせフォーム系のプラグインの他にも、決済フォーム系のプラグインも使えない可能性があると思いますので、その場合も同様に該当ページをAMP化しないように設定する必要があります。

うまくAMP化されない

AMP版では、画像周りのコードに変更があるため指定しているCSSによっては画像の比率がうまく表示されないことが確認されています。(画像が小さく表示されるなど。)

テーマの独自機能に関連している部分は対策を行っていますが、記事内のコンテンツ(主にHTMLで直接編集しているようなものなど)は、画像の比率が変わってしまう可能性があります。

その点については、HTML等の記述を見直していただくか、追加しているカスタマイズCSSを変更していただく必要があります。(テーマ側ですべてのスタイルを調整することは難しいです。)

埋め込み記事リンクが表示されない

WordPressに備わっている埋め込み記事のリンクはiframeを使っているために、AMP版ではリンクが取り除かれてしまいます。

AMP版でリンクを表示するには、テキストリンクやボタンリンクにするか、テーマの関連記事機能を使ってリンクを設置する必要があります。

その他エラーが発生する

プラグインとの影響、または子テーマでのカスタマイズの影響が考えられます。プラグインを無効化、子テーマでのファイルカスタマイズの見直しなどが必要となります。

特定ページのみで問題が発生する場合には、そのページをAMP化しないなどの対策が必要となります。(問い合わせページなど)


AMP関連の解説ついては、以上です。

情報が抜けていたり、修正がある場合には随時更新していきます。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。