AMP

フォームの要素にラベルが関連付けられていません（input#focus_retriever, iframeTracker）[PSI]

フォームの要素にラベルが関連付けられていません（input#focus_retriever, iframeTracker）[PSI]

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。js-iframe-trackerを無効したら解決しました。iframeTrackerは、リンククリックを計測するためのjQueryプラグインです。フォームの要素にラベルが関連付けられていませんPSIで「input#focus_retriever」にラベルがない、と表示される。フォームの要素にラベルが関連付けられ...

2023.07.09 2023.07.10

とりあえずのメモホームページ運用追記予定の話

[Cocoon] AMPとPWAをオフにした

[Cocoon] AMPとPWAをオフにした

WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。Cocoon設定のAMPとPWA機能を非推奨化しました。AMP機能を有効化する（非推奨）PWAを有効化する（非推奨）これらは昨今のウェブ情勢を鑑みたところAMP・PWAを設定するメリットよりデメリットの方が上回ると考えられるからです。現時点で機能自体は利用できますが、後々に完全に廃止しようと思います。Cocoon 2.6.1公開。段落ブロ...

2023.06.14 2023.06.15

とりあえずのメモホームページ運用

[AMP] 投稿タイトルにバックスラッシュが含まれていたら【無効なエスケープシーケンス】

[AMP] 投稿タイトルにバックスラッシュが含まれていたら【無効なエスケープシーケンス】

Google Search Console で「解析不能な構造化データの問題」というエラーが表示されました。これは記事タイトルの中に、エスケープ文字であるバックスラッシュ（0x5C「\」）が入っていたからです。別の文字コードのバックスラッシュ（U+FE68：﹨）に変更したらエラーは消えました。Google Search Console での２つのエラーGoogle Search Consoleの通知で、エラーが表示されました。「解析不能な構造化データの問題」と「AMPの問題...

2023.04.26 2023.04.27

プログラミングホームページ運用

[AdSense] AMP 自動広告の試験期間が終了し新機能に移行した

[AdSense] AMP 自動広告の試験期間が終了し新機能に移行した

AdSenseから「新しいラボがあります」という通知が来ました。確認してみると、新機能が増えたというよりも、Labsで提案されていた試験的な機能が、AMP広告に実用化された、という内容でした。「AMP自動広告」と、「ページ単位の広告の表示頻度向上」のLabs機能が廃止されました。2022年4月11日に、AMPサイトにアンカー広告が導入されることもあり、試験的な機能も整理されたようです。こちらもどうぞ

インターネット小話ホームページ運用

[AdSense] AMPサイトでアンカー広告の配信が始まる（2022年4月11日から）

[AdSense] AMPサイトでアンカー広告の配信が始まる（2022年4月11日から）

Google AdSenseから「AMPサイトでアンカー広告の配信が始まる」という通知が届きました。デフォルトの設定では、2022年4月11日から配信されるようになります。AMPサイトは、スマホ・タブレット向けに軽量化したページのことです。サイト設定でAMP用のページを生成するようになっていると、Google検索結果などで利用されます。これまで Google広告のアンカー広告は、モバイルサイト、PCサイトの順で拡大していました。「自動広告」の設定から「アンカー広告」や「全画...

2022.03.29 2022.03.31

インターネット小話ホームページ運用

パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】

パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】

先日（2021年11月2日）、サイトのパーマリンク設定を変更して、URLアドレスを変更しました。ページ全体のパーマリンクを変更して、検索順位に悪影響があるか心配だったのですが、今のところ無事に移行できています。今回は、パーマリンクを変更してから、Analyticsで集計されるURLアドレスがどのように変化するか調べてみました。切り替わる期間前回は、WordPressのパーマリンク設定を変更して、「」「」のような形式に変更しました。これは、「月ごとの記事のアクセス数」を集計する...

インターネット小話ニッチな話題ホームページ運用

[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】

[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】

Googleサーチコンソールを見ていたら、エラーの通知がありました。どうも、画像のアップロードに失敗したまま、記事を公開してしまっていたようです。ポイント「blob:〜」で始まるURLアドレスのデータは、ブラウザ内に保持されている。画像アップロード中にタイムアウトすると、リンクアドレスとして残ってしまうことがある。画像をアップロードし直すと修正できた。タグ「amp-img」の属性「src」のURL プロトコル「blob」が無効ですサイト〜で「AMP」の問題が新たに検出されま...

インターネット小話ホームページ運用

「AMP > 推奨サイズより大きい画像を指定してください」【AMP画像の推奨サイズ】

「AMP > 推奨サイズより大きい画像を指定してください」【AMP画像の推奨サイズ】

Google Search Consoleを見ていたら、「推奨サイズより大きい画像を指定してください」という警告が表示されていました。AMPで設定する画像サイズを適切にすると、検索結果などで画像も表示されるようになるようです。ポイントAMPのアイキャッチ画像：画像の幅は 1,200 px以上、幅と高さをかけて 800,000 px以上AMPロゴ：600x60 ピクセルの長方形。上下に6pxの余白。AMPのファビコン：48 ピクセルの倍数、正方形。Google Search C...

2021.10.21 2021.10.24

インターネット小話ホームページ運用

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクスを使っていますが、単体では外部サイトへのクリック数を計測できません。通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの組み込み変数がなく、頓挫していました。前回はこちら。約１年前ですね。通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。WordPressのfunct...

2021.10.16 2023.07.10

インターネット小話プログラミングホームページ運用

[AMP] 「ドキュメントヘッドの外側で、直接の子としてのみ許可されているタグが検出」【コピペでのmetaタグ挿入】

[AMP] 「ドキュメントヘッドの外側で、直接の子としてのみ許可されているタグが検出」【コピペでのmetaタグ挿入】

WordPressエディタでコピー・ペーストしたら、文字列前にmetaタグが付くようになっていました。放置すると、AMPエラーになるので、ご注意ください。ポイントWordPressの段落内に不要なmetaタグが混ざってAMPエラーになっていた。WordPressエディタでコピー・ペーストすると、文字列前にmetaタグが付くようになっているので注意。環境WordPress 5.8、Cocoonバージョン: 2.3.2Mac OS Big Sur 11.5、Chrome バージョ...

2021.08.02 2022.04.27

ニッチな話題ホームページ運用

Google検索のリンク先がAMPページじゃなくなった？【2021年7月】

Google検索のリンク先がAMPページじゃなくなった？【2021年7月】

2021年7月11日、Google Analyticsを見ていたら、不思議なことに気づきました。アクセスページが、AMPページではなく、通常ページになっているのです。検索数の増減については、誤差の範囲でした。一瞬、AMPページ自動生成の設定がオフになってしまったのか、と思いましたが、確認すると、ちゃんと表示されます。chiilabo.com/?amp=1AMPページは、ページの装飾を減らして、表示を軽量化したページのことです。通常のページに比べて、いくつかの表示のスタイルが制...

2021.07.12 2021.07.14

ニッチな話題ホームページ運用

AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）

AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）

cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。そこで、メニューを追加したいと思います。ウィジェットにナビゲーションメニューを追加まずは、ウィジェットでナビゲーションメニューを追加します。ただ、このままだとメニュー...

ニッチな話題ホームページ運用

Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】

Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】

ウェブサイトのアクセス解析にGoogleアナリティクスを使っていますが、外部サイトのクリック数がありません。Googleタグマネージャーで通常ページのアクセスは計測できたものの、AMPページでうまくいきませんでした。GoogleタグマネージャーのAMPコンテナについて、レポートします。AMPページのクリックURLについてJavaScriptコードを追加して再挑戦しました。クリックURLを計測したいならタグマネージャ外部サイトのクリック数を計測したいと思いました。紹介したどのペ...

2020.11.30 2021.10.22

インターネット小話ニッチな話題ホームページ運用

「URLはGoogleに登録されていますが問題があります」？【AMP動画の必須属性】

「URLはGoogleに登録されていますが問題があります」？【AMP動画の必須属性】

Googleの検索にブログのURLを登録しようとしたら、こんなエラーに遭遇しました。動画を扱っているページだったので、動画のAMP対応をしました。「URLはGoogleに登録されていますが問題があります」とはブログ記事が出来上がって、Google Search Consoleで、URLをテストしました。インデックス登録の仕方と意味についてはこちら。すると、エラーメッセージが表示されました。URLはGoogleに登録されていますが問題がありますAMP AMPページが無効ですはい...

2020.10.08 2021.10.19

ニッチな話題ホームページ運用

WP ULikeプラグインがAMPページでうまく表示されない [WordPress]

WP ULikeプラグインがAMPページでうまく表示されない [WordPress]

WP ULikeプラグインは、WordPressに「いいね」ボタンを設置するプラグインです。通常ページではこのようにハートマークのいいねボタンが表示されます。ところが、AMPページだと……0の隣の小さな白い丸になってしまっています。このハートマークは、CSSの:after 擬似クラスで背景画像として表示されています。ところが、AMPページでは:after擬似クラスが使えないため、何も表示されていないのです。いったんWP ULikeプラグインは無効にしました。残念。こちらもどう...

2020.09.17 2021.10.24

ニッチな話題ホームページ運用

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。カスタムHTMLを使うとよくAMPエラーになりますね。足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。こちらが参考...

2020.09.16 2021.10.24

ニッチな話題ホームページ運用