些細な日常
Bloggerブログの投稿に画像かYouTube動画があると先頭のものを対象としてサムネイル画像を自動的に生成することができる。これはブログトップページなどのインデックスページや人気の投稿のなどのガジェットのスニペット、またはFacebookやXといったソーシャルメディアへの投稿の共有で使われることになる。画像かYouTube動画がない投稿はサイムネイル画像もないものとして扱われることになる。 投稿のサムネイル画像は取得先の画像かYouTube動画が複数ならば変更できる トップページ｜ 気になる情報局 投稿の画像かYouTube動画が一つしかなければサムネイルもそれしかないんだけれども複数ならば二つ以降のどれかを先頭に置いてブログで表示する際にプログラムで入れ替えて正しい位置へ移動させることでサムネイルに使うことができる。 サイトのコンテンツの位置を変更するJavaScriptプログラム Blogg…
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…
Firebase Storage、またはCloud Storage for Firebaseの CORSの構成 で、「ArgumentException: JSON CORS data could not be loaded from...」（引数の例外：JSONのCORSのデータが……からロードされなかった）というエラーが出て先へ進めなくなったけど、しかし解決策が見付かった。 どうしてArgumentException: JSON CORS data could not be loaded fromが出たか CORSの構成のJSONファイルの文字や空白などに問題があるらしい。 [ { "origin": ["*"], "method": ["GET"], "maxAgeSecon…
Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / Pexels カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記載することになる。 <head>…
Search Consoleに送信して何の問題もなく、使用できたはずの Tumblrブログのサイトマップ が突如としてエラーと除外されてしまっていた。 サイトマップ｜Search Console｜ Google 送信することは可能だけれども「検出されたURLの合計数」が０で、全く機能しない。「インデックスカバレッジを表示」は開けない。そして警告の赤いマークと共に「サイトマップ インデックスは読み取り可能ですが、エラーがあります」と表示される。原因は「誤ったネームスペース」とされて「サイトマップまたはサイトマップ インデックス ファイルのネームスペース宣言が不適切です」という内容に「sitemapindex」が挙げられる。 追記：2023年3月に確認すると元に戻っていて修正する必要はなくなった。 どうしてエラーになるのかは分からない Tumblrのサイトマップはサーバーで自動的に生成されて編集することはで…
Imgurに画像をアップロードしていたら最初は何事もなく、何枚かスムーズに完了したにも拘わらず、不意に一枚がおかしな状態になり、アップロードがいつまでも完了しなくなった。 タブレットでやっていたけれどもステータスバーに「Uploading to imgur／Imgur upload is working」（Imgurへアップロード／Imgurアップロードの作業中）と出て画像が表示されるので、大丈夫そうでも公開するはずが下に「HIDDEN」（隠す）と出ておかしいと感じた。暫く経つと「Upload error／Tap to retry／CANCEL」（アップロードエラー／タップしてやり直す／中止）と出て止まってしまう。タップしてやり直しても二つのメッセージの状態を繰り返すだけでどうにもならないので、中止するとアップロードエラーが確定してさらに用意した画像も後から「Empty Album」（空っ…
ブログにSearch Consoleのモバイルユーザビリティの赤い文字のエラーで、モバイルユーザビリティの問題として「コンテンツの幅が画面の幅を越えています」というのが出た。 モバイルユーザビリティ｜ Search Console ｜ Google 問題のページは一つだけで、確認してみるとスマホで画像などのコンテンツの一部が画面の端から抜けてしまっていて正しく、エラーの文言の通りの状況だった。 このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅（980px など）で最適に表示されるように設計されている場合に発生します。このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。 モバイル ユーザビリティ レポート｜ Search Console ヘルプ ｜Google 原因として直ぐに思い当た…
YouTube 動画には 四つの場面と五つのサイズのサムネイル画像が生成されて サイトで表示できる。ただし大きいサイズの二つのサムネイル画像のsddefault（640×480）とmaxresdefault（最大解像度）のタイプは必ずしも生成されない。サムネイル画像のURLのパターンに記入してYouTubeの所定のサーバーから他と同じように取得しようとしてもエラーになってしまう。現今、何もなければグレー画像が表示される仕様なんだ。 サイトでYouTube動画のサムネイル画像を表示する際に取得エラーを完全に回避するためには二つの大きいサイズよりも小さいサイズを選択するべきだけど、しかし画質を上げたりするためにも大きいサイズをどうしても使いたい場合はYouTube動画にサムネイル画像が生成されなくて取得できないエラーのときだけ小さいサイズを使うようにすれば大丈夫だと考えられる。 JavaScriptで…
