些細な日常
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマ…
サイトの表示速度を計測する PageSpeed Insights にその他のパフォーマンスを判定する要素が盛り込まれて総合的に使い易さの指標が得られるようになった。 コントラスト比の最低基準は4.5 : 1 PageSpeed Insights｜ Google Developers ブログで気がかりになったものの一つにコントラスト比があって「背景色と前景色には十分なコントラスト比がありません」という指摘と共にユーザー補助の項目も少し減点されてしまった。 調べるとWCAG（Web Content Accessibility Guidlines／ウェブコンテントアクセシビリティガイドライン）が定める最低基準となるレベルAAの4.5を通常の文字サイズで越えなくてはならない。 テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する Two swallows by Capri23auto / Pixabay decodingは画像のimg要素に使える属性で、画像のデコード（ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程）の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる（初期値） sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどの…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する Hoffman's Two-toed Sloth by gailhampshire / CC BY loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む（初期値）。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従…
サイトに 自由に描画できるインラインSVG は便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。 インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマークアップが特徴的に可能かを覚えておきたい。 目次 インラインSVGの特徴的なマークアップ リンクの付け方について 題名の付け方について 説明文の付け方について ランドマークの付け方について ラベルの付け方について 視覚障害者のサイトの利便性のために インラインSVGの特徴的なマークアップ 狐 狐が地面に身を丸めて眠っている Fuchs by Schmidsi / Pixabay リンクの付け方について <a href="リンク先">リンク名</a> 通常のimgタグの画像に…
ホームページやブログの検索エンジンでのサイト評価を上げてアクセスアップを図るためには キーワードを入れてタイトルを付けるのが大切 だけれどもどのくらいの文字数が良いのかも考えておきたくなる。 Googleが提起するBloggerのSEO対策への助言を参考にする タイトルは半角 60 文字（全角 30 文字）前後にする（短い簡潔なタイトルは読みやすく、末尾の切り詰めも防ぎます）。 検索エンジンでブログを見つけてもらいやすくする｜ Blogger ヘルプ ｜Blogger 信憑性が高いと思う。BloggerヘルプのSEO対策への助言で、最大手の検索エンジンの Google が提供していて世界で最も利用者の多いブログサービスの一つなのが真実味を著しく与える。検索結果やブログのアクセスの何れも正しくビッグデータに裏打ちされたサイトの検索エンジンからのアクセスアップの並外れた専…
人気のキーワードで検索結果の上位に掲載されないとサイトのアクセスアップは時間がかかる。どうすれば良いのか。Google検索を研究するためのフィールドワーク（現地調査）として実際の検索結果を調べるのはとても大事な作業の一つなので、やってみると見出しを多用したサイトが好かれていて検索結果の上位を占めていると気付いたんだ。 人々の検索数が少ないキーワードだと本文ばかりのサイトでも有利だけど、ところが人気のキーワードで爆発的なアクセスを得ているサイトは見出しを多用している。 数え切れないほどの競合サイトが犇めき合った検索結果の激戦区を勝ち上がっているサイトは検索エンジンでのサイト評価が素晴らしく高いのは間違いない。 Googleでは 高品質なコンテンツとページランク（外部サイトからのリンク）が二大要因 だから何れも満たしているのは当たり前だし、サイトのSEO（検索エ…
Bloggerブログのページタイトルの変更、またはtitleタグのカスタマイズはトップと記事／追加とアーカイブとラベルの四種類に分かれている。テンプレートが公式テーマだと 2017年のContempoなど からそれぞれのHTMLのタイトルの出力が変わっている。使われる独自タグが違うためで、 前以て注意しておかなくてはならない。 目次 新しいタイトルの独自タグと表示 古いタイトルの独自タグと表示 トップページとその他に振り分けた際のページ名の独自タグと表示 インデックスページとその他に振り分けた際の古いタイトルの独自タグと表示 ブログ名を日付やラベル名の前に付けて記事／追加名だけ順番を入れ換える 四種類に振り分けたページのタイトルの表示を個別に変更する 新しいタイトルの独自タグを使ったtitleタグの簡単なカスタマイズ titleタグのカスタマイズに使える振り分けの独自タ…
何を考えているかというとブログの利便性を高めるべきだ。 きっとリンク付きのプロフィールバッジを埋め込めば訪問者にGoogle+（サービス終了）もやっていると気付いて貰い易いだろう。 Google DevelopersのGoogle+ Badgeで手軽に使えるんだ。因みにバッジだけではなくてアイコンも作れるようになっている。 なぜGoogle+のプロフィールバッジをブログに使うか フッター｜ Super Leak ブログの上段にホームページのリンクを置いておいて下段にGoogle+のプロフィールへのリンクを置くなんてもうやり過ぎという気持ちもするし、目立つところのホームページへのリンクだけで十分かも知れない、僕のことを多めに知って貰うためには。 またはホームページへ行けばGoogle+のプロフィールへのリンクはトップページや子ページのプロフィールにも置いてあるわけ…