Glue for Yoast SEO & AMPによる AMPページのトラッキング

WordPress Twenty Seventeen
Glue for Yoast SEO & AMP による
AMPページのトラッキング
 
Search Console における検索パフォーマンスの、 表示回数やクリック数が激減した原因の一つとして、AMP ページへのアクセスがカウントされていないのではないかと思い、その対策として「Glue for Yoast SEO & AMP」を導入してみた。
 
「Analytics」で、Google Analyticsのトラッキングコードを埋め込む
「Analytics」で、Google Analyticsのトラッキングコードを埋め込む。
 
以下、Glue for Yoast SEO & AMP を導入と、AMP を Ver 0.7.2 から 1.2.0 にアップデートした記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. Glue for Yoast SEO & AMP とは
 
 
Glue for Yoast SEO & AMP は、
AMP(Accelerated Mobile Pages)プラグインを補完するもので、
Yoast SEOの一部の設定(メタタグやCSSなど)を、
AMPに反映させる役割を担う。
 
 
前提条件。
①.Yoast SEOが有効化されていること
②.AMPが有効化されていること
 
機能。
①.AMPページのデザイン調整
②.CSSやメタタグの設定
③.Google Analyticsのトラッキングコードの埋め込み
 
AMP ページへのアクセスがカウントされていないのではないかと思い、対策として導入。
 
Glue for Yoast SEO & AMP を導入し、且つ、AMP を Ver 0.7.2 から 1.2.0 にアップデートした。
 
 
 
2. Glue for Yoast SEO & AMP のインストールと有効化
 
WordPressのダッシュボードから、「プラグイン」→「新規追加」でインストールする。
「プラグイン」→「新規追加」でインストールする
 
インストールができたら、有効化する。
インストールができたら、有効化する
 
有効化すると、ダッシュボードの「SEO」に「AMP」が追加されるので、これをクリックする。
有効化すると、ダッシュボードの「SEO」に「AMP」が追加されるので、これをクリックする
 
 
 
3. 「Post Types」で、AMPに対応するタイプを設定
 
「Post Type」画面が表示されるので、「投稿」が「有効」になっていることを確認し、「変更を保存」する。
「Post Type」画面が表示されるので、「投稿」が「有効」になっているとを確認し、「変更を保存」する
 
 
 
4. 「Design」で、AMPページのデザインを調整
 
AMPページのデザインを調整。
AMPページのデザイン
 
「Images」と「Default image」で、AMPページの見出しの画像を設定。
「Images」と「Default image」で、AMPページの見出しの画像を設定
 
「Content colors」で、全体の色を設定。
「Content colors」で、全体の色を設定
 
「Links」で、Linkの色を設定。
「Links」で、Linkの色を設定
 
「Blockquotes」で、引用(blockquotes)タグの色を設定。
「Blockquotes」で、引用(blockquotes)タグの色を設定
 
「Extra CSS」で、CSSの追加が出来る。
「Extra CSS」で、CSSの追加が出来る
 
「Extra code in <head>」で、<head>にメタデータやlinkの追加が出来る。
「Extra code in <head>」で、<head>にメタデータやlinkの追加が出来る
 
ここで、引用(blockquotes)タグのために、『Font Awesome』が使えるようにした。
引用(blockquotes)タグのために、『Font Awesome』が使えるようにした
 
追加した「link」タグ。
<!– Font Awesomeを使う –>
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
 
 
 
5. 「Analytics」で、Analyticsのトラッキングコードを埋め込む
 
「Analytics」で、Google Analyticsのトラッキングコードを埋め込む。
「Analytics」で、Google Analyticsのトラッキングコードを埋め込む
 
埋め込むコードは、【amp-analytics】タグを使わなければならない。
以下のコードの、accountをトラッキングIDに変更して貼り付ける。
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-12345678-1
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>
 
 

 
Web上に、次のような記事があった。
Google Analyticsコードの埋め込み
実はGlueのGoogle Analyticsのコード埋め込みの機能は十分ではありません。ヘッダーにJavaScriptの読み込みを指定しなければならないのですが、この機能が無いのです。
 
そこで、ampのテンプレート「html-start.php」に、次のコードを貼り付けた。
<!– analytics header –>
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
<!– analytics header end –>
 
ampのテンプレート「html-start.php」に、次のコードを貼り付けた
 
すると、次の警告が出る。
ドキュメントに AMP コンポーネントの「script」タグが複数あります。
 
ドキュメントに AMP コンポーネントの「script」タグが複数あります。
 
ソースコードを調べてみると、「script」タグが 2つある。
ソースコードを調べてみると、「script」タグが 2つある
 
2つ目の「script」コードの内容。
<script type=’text/javascript’ src=’https://cdn.ampproject.org/v0/amp-analytics-0.1.js’ async custom-element=”amp-analytics”></script>
 
 
そこで、「html-start.php」に追加した、1つ目の「script」を削除する。
 
 
 
6. AMPのバージョンアップ
 
AMP の Ver 1.0 には問題があったので、Ver 0.7.2 を継続使用していたが、この機会に 1.2.0 にアップデートした。
AMP を Ver 0.7.2 から 1.2.0 にアップデートした
 
AMP Setting が開くので、「Experience」は「Website」を選択。
AMP Setting が開くので、「Experience」は「Website」を選択
 
「Website Mode」は「Reader」を「Supported Templates」は「投稿」を選択。
「Website Mode」は「Reader」を「Supported Templates」は「投稿」を選択
 
AMP Analytics Options には、何も設定せず。
(Analyticsのトラッキングコードは、設定しない。)
AMP Analytics Options には、何も設定せず
 
 
 
7. AMPのバージョンアップで顕在化した問題点
 
次の、エラーが出る。
タグ「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。
 
タグ「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。
 
問題の詳細。
タグ「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。
 
問題のあるページ。
タグ「style amp-custom」で指定された作成者のスタイルシートが長すぎます。上限は 50000 バイトです。
 
原因。
問題のページには、エクセルの表をいくつも貼ってあり、
このために、長い・大きい【css】が埋め込まれていた。
 
 
 
8. 「Pz-LinkCard」のデザイン調整
 
「Pz-LinkCard」は、AMP化の影響を受けてデザインが崩れる。
枠が表示されなく、且つ、背景色の色もなくなり、見にくい。
 
そこで、AMP用に【CSS】の調整が必要になる。
 
テーマの編集で、「Twenty Seventeen child: style.php (amp/style.php)」に、簡易なCSSを追記。
 
AMP用のCSS。
 
 
「Pz-LinkCard」デザインの調整結果。
 
「Pz-LinkCard」のデザイン調整
 
 
参考:
参考:
 
 
以上。
(2019.08.13)
 

 

スポンサー リンク

 

             

にほんブログ村 IT技術ブログ Raspberry Piへ にほんブログ村 IT技術ブログ Webサイト構築へ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログへ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください