些細な日常
先月の9月14日から28日にかけて行なわれたGoogleのヘルプフルコンテンツアップデートで、ブログのアクセスが、三割以上、落ちてしまった。 ブログのGoogle検索によるアクセスダウンの状況 悲しいブロガー by 結城永人 Search Consoleで調べるとGoogleの検索結果でのブログの表示回数が、三割、落ちいてそのためにクリック数が、二割、落ちていた。その影響で、Yahoo!からも同じくらい落ちて（日本のYahoo検索はGoogle検索を使用しているため）全体として三割のアクセスダウンを食らってしまった。 本当に悲惨としかいいようがない。やる気がなくなってどうしようもない。ブログのアクセスが上がらないだけで、絶望的な気持ちになる。大きく下がるというのは正しくうんざりだ。 Googleのヘルプフルコンテンツアップデートは 人間のために作成した独自性のある有用なコンテンツが検索結果に表示され…
Bloggerに非常に素晴らしい機能が追加された。投稿のWebP画像の提供が管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿のWebP画像の提供を自動化 していた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると欠点があることが分かって取り替えることは止めた。記事の表示速度を遅くするという逆効果を与えるものなので、できるかぎり、避けて使うようにした方が良いと思う。 関連ページ Bloggerの投稿画像の遅延読み込みの設定の利点と欠点 BloggerのWebP画像の提供の設定 Bloggerの管理画面の設定の投稿に「WebP画像の提供」のスイッチが付いている。 WebP を使用して投稿の画像を提供します 設定｜Blogger 記事／追加ページの画像ファイルが軽量…
Bloggerに非常に素晴らしい機能が追加された。投稿画像の遅延読み込みが管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 設定｜ Blogger 僕は自分のプログラムで、以前から 投稿画像の遅延読み込みの自動化 を行っていた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると少し欠点があることが分かって取り替えることは止めた。酷くて必ず避けなくてはならないようなものではないけれども使う場合は気に留めた方が良いと思う。 関連ページ Bloggerの投稿のWebP画像の提供の設定の利点と欠点 Bloggerの画像の遅延読み込みの設定 Bloggerの管理画面の設定の投稿に「画像の遅延読み込み」のスイッチが付いている。 ユーザーがページを下にスクロールするタイミングに合わせて、画像を個々に読み込みます 設定｜Blogger 記事…
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付けてさらにサイトのナビゲーションを示すn…
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならない。 普通の回避策としては新しいコンテンツ…
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…
Bloggerの管理画面の設定の「クローラとインデックス」にカスタムロボットヘッダータグのスイッチが付いている。 クローラとインデックス｜ Blogger カスタムロボットヘッダータグとはGoogleやYahoo!などの検索エンジンのブログの扱いを検索避けを中心とした様々な仕方で、制御する方法の一つで、一般的にX-Robots-Tagと呼ばれるものと同じだ。 X-Robots-Tag は、指定した URL に対する HTTP ヘッダー応答の要素として使用できます。robots メタタグで使用できるディレクティブは、すべて X-Robots-Tag として指定することもできます。ページをインデックスに登録しないようクローラに指示する X-Robots-Tag を含む HTTP 応答の例を次に示します。 X-Robots-Tag HTTP ヘッダーの使用｜ Google 検索 セントラル ｜Google …
Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google Developers PageSpeed …
Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿のWebP画像の提供がBloggerの設定から可能になった ので、本稿のプログラムは その他のキャッシュ期限のe#などを追加する とか デバイス毎のレスポンシブ配信を追加する なんて機能が必要なときに使うことを勧める。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメ…
以前、取り上げた 画像の遅延読み込みのloading-lazy をBloggerの記事／追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿画像のloading-lazyによる遅延読み込みがBloggerの設定から可能になった ので、本稿のプログラムは YouTube動画にもloading-lazyを付ける とか 初回画面の画像のloading-lazyを除外してdecoding-asyncを付ける なんて機能が必要なときに使うことを勧める。 画像のある記事／追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のた…