画像要素に[alt]属性の指定が無いからスマホ表示が遅い。何の事?。

PCやスマフォに表示されるまでの時間が長いと見るのを止める。それが自分のブログだったらショックです。

ブログの表示速度に関して、意外な原因の一つは「画像要素に[alt]属性が指定されていないこと」です。

この[alt]属性は、視覚に障害のあるユーザーや画像が読み込まれない場合に、画像の内容を説明するために重要なものです。

実は、これが設定されていないと、検索エンジンが画像を正しく認識できず、結果としてページの表示速度に影響を与えてしまうことがあります。

例えば、Googleの検索アルゴリズムは、ページに含まれるコンテンツを評価する際に、画像が適切にタグ付けされているかどうかも重要な要素として見ています。

画像が[alt]属性で説明されていないと、検索エンジンはその画像が何を示しているのか理解できず、結果的にコンテンツの関連性を低く評価する可能性があります。

そのため、画像に[alt]属性を適切に設定することで、検索エンジンがより正確にコンテンツを評価し、ページ表示速度にも好影響を与えることができます。

表示スピードの重要性

ブログの読み込み速度が遅いと、読者はすぐに離れてしまう可能性があります。

特に、Googleの検索結果に表示される前にページが遅いと、インデックス(検索エンジンによる登録)される機会が減ります。

表示スピードが早いと、読者の離脱率を減らし、Googleの評価も向上する。

サーチコンソールの活用

サーチコンソールを利用して、Webページの表示速度やエラー状態をチェック。

具体的には、「Webに関する主な指標」を確認し、サイトのパフォーマンスを改善する方法を学びます。

ページ速度が重要で、モバイル版とデスクトップ版で異なる結果が出るため、特にモバイル版の速度改善が必要。

 [alt]属性の重要性

記事の本題である「画像要素に[alt]属性が指定されていない」という問題に取り組んでいます。

[alt]属性とは、画像が表示されないときにその内容をテキストで説明するための属性で、特に視覚障害者向けに重要です。

スクリーンリーダーを使用しているユーザーにとって、画像の内容を理解するために[alt]属性が必要不可欠です。

SEO改善に向けた努力

SEOを改善するためには、ブログの各ページに適切な[alt]属性を追加し、画像の読み込み速度を速くするなど、さまざまな方法で表示速度やアクセシビリティを向上させることが求められます。

記事は、技術的な詳細や専門用語に悩みながらも、読者と共に問題を解決しようという意気込みが伝わる内容となっています。

[alt]属性を正しく使うことで、SEOやアクセシビリティの面で大きな改善が期待できます。

また、サーチコンソールを活用してページのパフォーマンスを定期的に確認することが推奨されています。

私のブログの現状

bloggerで新しいブログを立ち上げて、まだ20日ほどしか経っていませんが、インデックス登録されたのは9ページもありました。

実際のページは３つだけで、あとはホームとかラベルのページです。それにしても嬉しいものですよね。

よーし幸先良いぞ。と、喜んでいたのですが、昨日サーチコンソールを見てみると1ページだけに減っていました。

これはショックでしたね。

このブログはgoogleの関連会社であるブログサービスのbloggerで書いていますが、元々記事の公開時にpc用とスマフォ用の2種類のurlが発生します。

スマフォ用には勝手にurlの末尾に?m=1が付いてしまいます。これがリダイレクトエラーの原因になるらしいです。

それが問題になり、がた減りしたのか。

多分そうでしょう。そのように言っているbloggerのユーザーさんは多いです。

改善してくれれば良いのですがgoogleはなかなか腰を上げてくれません。そこがアメリカらしいところではあるのですが。

使っている人にはたまりませんね。日本では利用している人も他国と比べると少ないので、ドメインパワーもかなり低いらしいです。

解決策がないか。藁をも掴む思いで探す為に検索すると悩んでいる人はかなり多いですね。

何が原因なのだろうと調べる

上記の?m=1以外で何か問題はあるかもしれない。

あるのであれば、自分で何とか改善してみたい。そんな気持ちになりました。

この様な時はサーチコンソールでエラーの状態を調べるのが一番らしいです。

正直言って根本が駄目なので、直ぐには結果が出ませんが重複ページ等は比較的簡単に合格になります。

リダイレクトエラーは今後の課題として、表示されるスピードを何とかしたいものです。自分のブログが表示される時間が早い事は良い事ですからね。

サーチコンソールの存在

最初に申し上げておきますが、私はブログ歴は長いです。

しかし、思いついた事を書いてみたい。どちらかと言いますと日記を書く様な気軽さで記事を書き始めました。

googleのクローラってご存じですよね。難しく書くとここで嫌になりますから、小学生でもわかるように簡単に説明します。

クローラとは

クローラは、インターネットを探検するプログラムのこと。

Googleのクローラは、ウェブサイトやブログを訪れて、どんな情報があるかを集めています。

これによって、検索結果に表示される内容が決まるのです。

例えば、君が「猫の飼い方」と検索すると、Googleはクローラが集めた情報を使って、関連するブログやウェブサイトを見せてくれる。

クローラは新しい情報を見つけたり、古い情報を更新したりするために、定期的にサイトを訪れます。

要するに、クローラはGoogleがインターネットを「読み書き」する手助けをしている、探検家のような存在なのです。

クローラは意外と厳しい

ところが人の害になる内容等、為にならない物はインデックス登録させません。

それに、人の為になる情報を第一に選択しますが、後から出て来た同じ内容の物は基本的に登録しません。

前に登録した記事を読んで真似をしたと判断するからです。

その他にも色々と細かい事をチェックしますので、内容を調べるのに時間がかかるような作り方をしていると、まず登録はされません。

それを教えてくれるのがサーチコンソール

googleさんは正しい記事の書き方や、それに伴う守り事を教えてくれるサーチコンソールというものを準備してくれました。

サーチコンソールの画面です。

お陰で記事の作り方について何が悪いのか教えてもらえます。

ところが分かりづらいんですよね。

専門用語とかが分からなくて、それを知るために進んでいくと、外国人が書いた説明書きがあるのですが英文です。

翻訳すると訳の分からない妙な日本語訳です。まるで幕末の日本語のうる覚えのアメリカ人との会話のような雰囲気です。

これじゃ、どうにもならない。

専門用語すら分からない私にとっては猶更です。

ある程度理解が出来るレベルでないと理解するのは無理ですね。

それで一つづつですが、解決するために調べて実践した事を書いて行こうと思います。

具体的に体験して実践あるのみ

自分の備忘録の為もありますが、サーチコンソールの玄関で立ち止まっているのは私だけでは無いと思います。

これから分かり易く画像付きで説明していきます。

表示スピードを上げる為に

サーチコンソールの左側の下の方に「webに関する主な指標」という項目がありますので、それをクリックして下さい。

左下を見て下さい。

モバイルを表示してから

②「PageSpeed Insightsを試す」をクリックしますと、次のような画面になります。

この様な画面になります。これが携帯のデーターになります。

ちなみにデスクトップはこの様な数値に変わります。

結構良い数値が出ていますが、目標は100です。

携帯の「パフォマンス」が低いですね。デスクトップ(pc)が89で携帯が79となっています。やはり携帯表示に時間がかっていますね。

これを何とか短くしていきたいものです。

下の方にスクロールしてください。すると色々な問題点が表示されています。

何か色々書いてありますが、ほとんど意味不明です。それだけ私の知識が浅いという事ですが、もう少し勉強すれば良かったですね。

もっと下には何があるんでしょうか。

見てみたくなりますね。

「名前とラベル」から始めよう

名前とラベルに問題ありという感じで4個ありますが、これらも赤いマークがありますね。

ここから、まずは挑戦してみましょうか。

「画面の要素にalt属性が指定されていません」から挑戦

最初に[alt]属性とは何でしょうか

スクリーンリーダーとは

画像要素に[alt]属性を入れるには

見易い様に色づけしました

実際に[alt]属性を記入してみよう

眠いよ

[alt]属性はsrcのurlに記入

コードを入れた後のurl

まとめ