読者です 読者をやめる 読者になる 読者になる

ちょっとしたSEO? 「ブログに貼る画像」について

その他(日記)

スポンサーリンク

このブログにはGoogle Adsenseを貼らせて貰っています

そして最近ふと気がついたのですが

Google Adsenseのページで「サイトの状況」というところの

赤い四角で囲った部分が●3個になっていてその横の緑矢印のところが

赤い矢印で下を向いていました

(その時のキャプチャは撮り忘れました・・・)

 

Adsenseホーム画面

 

この部分をクリックして確認してみると

 

Adsenseホーム画面

 

上の「モバイルのパフォーマンス」のところに黄色い注意マーク

のようなものが出ています。ここが最近よくアクセスのあるページだから

 もう少し改善するとより良くなるよというGoogleのアドバイスです

さっそく一番上のページの部分を押して分析を開始

 

Adsense チェック画面

 

結果が表示されたら

どうすればより良くなるのかを確認します

 

Adsenseチェックの結果

 

一番上の「! 修正が必要」の項目3つは「はてなブログ」の運営しか弄れない

部分なので個人では対応できません

 

その下の「! 修正を考慮」の部分「画像を最適化する

これはブログに貼られている画像を最適化したほうがいいよ

というアドバイスです、それなら対応できそうなので

「修正方法を表示」で確認してみると

 

Adsense画像の修正項目

 

「画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます。」

と書かれています

ようするに貼られている画像ファイルのサイズが大きすぎるから

適切なサイズに修正したほうがいいですよというアドバイスです

(画像に適切なフォーマットというのはjpegにしておけば間違いないと思います)

 

上の2つが「http://cdn○○hatena.com/~」から始まって

最後.「jpg」となっていますね

(最後が.gif .png になっている場合もあるかもしまれません)

 

これがはてなブログで記事を書くときに「写真を投稿」で

画像ファイルをアップしている先と参照先のURLです

 

はてなブログ-記事を書く画面

 

その下の項目はブログの記事を書くときに貼っている画像ファイル

ではないので見なかったことにします・・・

 

 

とりあえずGoogleからのアドバイスに従うことにしましょう

今貼られている画像を確認して

そのファイルを加工というかサイズ変更させます

OSに標準で付属しているペイントツールでもサイズ変更と

ファイルの種類をjpegにするぐらいならできます

 

 

そしてその後ロスレス圧縮をかけます

これはホームページでこのサービスを公開してくれているところが

あるのでそこを利用させてもらおうと思います

ページはこちらです→ : JPEGmini | Oops...

 

ロスレス圧縮サービス

この「DROP PHOTO HERE」とかかれている所に

画像をドラッグアンドドロップで放り込むだけです

 

 

かわいい猫

 

数秒後、ロスレス圧縮された画像ファイルが出来上がりました

ファイルサイズが158KBから90KBになりました

ロスレス圧縮とは書いてありますが実際には

「できるだけ画質を悪くしないでサイズを圧縮させています」

それでも劣化はほとんど感じない程度です

 

左下の「Download Full Res.(662 x 1000)」のところからダウンロードできます

この画像を再度ブログの記事に挿入させます

 

これをすると画像ファイルのサイズが小さくなるので

インターネットの回線があまり早くない環境でも

画像ファイルが早く表示されるようになります

最近だとスマホのデータ通信容量に制限もあるので

モバイル端末からブログを見るときでも多少通信が軽減されていいかも

とりあえずここまでGoogleからアドバイスを受けたとおり実施しました 

 

  • おまけ

さらにSEOが向上するにはもう一工夫あります

この先はできればHTMLの知識が軽くでもあったほうがいいです

はてなブログの「記事の管理」で「HTML編集」を選択して

 


タグを無効にしても画像が出る・・・


という<img>タグの内容を変更させます

 

まずブログに表示される画像がオリジナルのサイズより小さく

なる場合があるのでオリジナルの画像を見ることができるように

リンクを貼ります

(スマホでブログを開くと画像の表示サイズが変更されています)

 

 

画像ファイルのURLをリンク先に指定し

オプションを追加して「新しいタブ」で開くようにしておきます

<a href="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hakoroid/20150524/20150524145744.jpg"

target="_blank">

 

次に画像を表示させますが、これもオプションをつけます

つけるオプションはtitle,alt,width,heightの4つです

 

titleは" "で囲った文字を画像にマウスが乗った時

吹き出しで名前を表示してくれます

 

altは" "で囲った文字を何らかの問題で画像が表示できなかった場合に

代替として表示してくれます(サーバーダウンや指定したURLが違っていた場合)

 

widthとheightは画像ファイルのサイズで幅と高さです

これを指定してあげるとウェブブラウザが画像ファイルを読み込む前に

画像のサイズがわかるので表示スピートが向上します

 

これらを考慮してHTMLを編集すると

こんなかんじになります

 



<a href = "http://cdn-ak.f.st-hatena.com/images/fotolife/h/hakoroid/20150524/20150524145744.jpg" target="_blank"><img src = "http://cdn-ak.f.st-hatena.com/images/fotolife/h/hakoroid/20150524/20150524145744.jpg"  title = "かわいい猫" alt = "かわいい猫" height="595px" width="500px"></a>

 


(実際にこのHTMLが1つ上のかわいい猫の画像を表示するに書かれています)

 

 

これでブログの画像にマウスが乗ると「かわいい猫」

という文字が出て、もし画像が開けなくても「かわいい猫」と

文字がでます

画像サイズはファイルのプロパティ等から確認できます

結構手間はかかるかもしれませんが少し工夫すると

SEOが向上するようです

 

 

おまけはここまでです

 

  • まとめ

これらを実施して一番上の画像のように●が4つに増え矢印が

緑の上向きに変わりました

 

こうすることによって閲覧する人がブログを読みやすくなるので

Googleはそういう質のいいページを作りなさいと進めているんだろうな

と感じました

 

基本的にSEOを良くして行くということは

閲覧する人にとってよりよい状態である

という事なのでしょうね

  

 はてなブログで記事を書くのにHTMLの知識がなくても

書けますが色々カスタマイズするにはどうしてもHTMLの知識や

CSSの知識が必要になることがあります

ちょっとした事ならネットで調べることもできますが

HTMLの小さな本を買って読みながらページを弄るのも結構楽しいですよ

 

 僕はこの本を見ながら、ここのブログをちょこちょこ弄ってます

前半にHTMLの基本的なことが載っていて後半CSSについて書かれています

サンプルの画像付きなのでHTMLをどのように書いたらどういうふうに

表示されるのかわかりやすくなっていますよ

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

 

 

 

にほんブログ村に参加しています。
よかったらポチッとお願いします。

ブログランキング・にほんブログ村へ
にほんブログ村