ブログ全体のユーザビリティ向上をブログ初心者向に詳細に解説

ユーザビィリティ向上

この記事は、ブログ全体のユーザビィリティ向上ついて初心者向に解説していきます。

ブログ全体のユーザビィリティ向上は大きく2つに分ける事ができます。

1. 検索エンジン向け
2. ユーザー向け


ブログ全体のユーザビリティ向上

検索エンジン向けユーザビィリティ向上

  • XMLサイトマップ作成(ロボット用)
  • 常時SSL化を図る
  • URLの正規化と最適化を図る

ユーザー向けユーザビィリティ向上

  • モバイルフレンドリー(レスポンシブデザイン)にする
  • HTMLサイトマップの作成
  • リンク切れがないようにする
  • アンカーテキストはリンク先のページ内容がわかるように
  • スクショには解説を付ける
  • 画像や動画の挿入 ALT属性を忘れずに
  • 画像の最適化
  • ページの最適化
  • タイトルと見出しタグの最適化
  • 広告の数・バナーの数を制限する
  • 新記事・更新情報を検索エンジンに通知

ブログ記事内容のユーザビィリティ向上はこちらの記事で詳細を書いていますので、是非参照してください。
↓ ↓ ↓ ↓ ↓
【初心者向】ブログ記事をユーザビリティ対策して検索エンジン上位を狙う

検索エンジン向けSEO対策

それでは、ここから検索エンジン向けSEO対策をみていきましょう。

検索エンジンにあなたのサイトを認識させる(クローラビリティ―の確保)

ブログ記事を作成・編集しただけでは、検索エンジンにあなたのサイトの存在を知らせることはできません。
そこでXMLサイトマップと言うプラグインを使うことによって、確実に検索エンジンにあなたのサイトを通知することが可能となります。
よろしければ、こちらの記事を参照になりXMLサイトマップを活用してください。
↓ ↓ ↓ ↓ ↓
【XML サイトマップ】を初心者向に使い方と設定方法を解説

常時SSL化

検索エンジンはSSL化されたURLを優先的にランキングシグナルとして捉(とら)えています。
もしあなたのサイトURLが暗号化されたhttpsになっていなければすぐに対応してくださいね。

またSSL化されたサイトは、ユーザーに安心や安全を提供することができますので、検索エンジン向けだけでなくユーザ向けSEO対策としても有効な方法です。

常時SSL化の実施方法はこちらの記事で詳細を記載していますので、参照してください。
↓ ↓ ↓ ↓ ↓
常時SSL化の実施方法をX-ServerとCocoonで詳細に解説

URLの正規化と最適化を図る

URLの最適化も検索エンジンだけではなく、ユーザビリティ―の面からもとても大切なポイントとなります。

例えば、
https://〇〇〇.com/?p=123
https://〇〇〇.com/how-to-bake-apple-pie

上記のURLを見た時に、記事の内容が分かるのはどちらでしょうか?
そうですよね、後者の方だと思います。

このようにURLを記載する事で、ユーザーだけでなく検索エンジンにも理解してもらえるので有利となります。

URLの正規化については、こちらの記事で詳細を記載していますので、ぜひ参照してください。
↓ ↓ ↓ ↓ ↓
URLの正規化を図る方法2種類を詳細に解説

ここまでが、検索エンジン向けのSEO対策となります。
もちろんこれからお話しするユーザビリティの向上も結果的には検索エンジンに影響を及ぼすことになりますので、ぜひ施工(せこう)してくださいね。

ユーザビリティの向上

ユーザー向けにSEO対策を図ることは、ユーザビリティに繋がります。
そして徹底したユーザビリティを極めることこそが、検索エンジン上位にランキングする要となっています。

それでは順番に解説していきますので、是非最後までお付き合いくださいね。

レスポンシブウェブデザイン(モバイルフレンドリー)

レスポンシブウェブデザインとは、どのデバイス(端末)でも同様にサイトを閲覧できるデザインを言います。

レスポンシブウェブデザインに対応しているテーマを使うことで、初心者でも簡単に難しい設定もせずにできるのがとても嬉しいですね。

ですが、ここでひと手間かけるのが、本当の意味でのユーザビリティ向上につながります。

ひと手間とは?

記事を投稿したら、必ずご自身のスマホやタブレットでの表示を確認してくださいね。
特にテーブルを挿入している記事はなおさら注意が必要です。

ここで気を付けて見るポイントは

改行が変な箇所で行われていないか?
空間が空きすぎていないか?
行間が詰まりすぎていないか?
テーブルが崩れていないか?
画像は綺麗に見えているか?
読みやすいか?
など細かいと思われる点ですが、しっかりと確認してください。

このツールを使うことで、あなたのサイトがモバイルフレンドリーかどうかを調べる事が可能です。
ご自身の目で確かめる事が一番良いのですが、お時間の無い人はこのツールでも良いかと思います。
↓ ↓ ↓ ↓ ↓
Googleのモバイルフレンドリーテスト

HTMLサイトマップの作成

クローラーもHTMLサイトマップを訪問してまだ未登録(クロールしていない)ページを見つけようとしてくれますのでSEO的にも効果がありますので、サイトマップは必須です。

プラグイン『PS Auto Sitemap」を使った設定方法の詳細を解説しています。
↓ ↓ ↓ ↓ ↓
PS Auto Sitemapのインストールから設定方法までを解説

Cocoonをお使いの方向けの記事となります。
↓ ↓ ↓ ↓ ↓
CocoonでHTMLサイトマップの設定方法を初心者向に解説

リンク切れがないようにする

リンク切れは、検索エンジンのランキングにはあまり影響はないようですが、ユーザビリティの面から考えると、これは避けたい事案ですよね。

そこで便利なプラグイン「Broken Link Checker」をおススメします。

「Broken Link Checker」インストールから設定方法まで詳細に解説している記事をぜひ参照ください。
↓ ↓ ↓ ↓ ↓
WordPress【Broken Link Checker】でリンク切れに対処

アンカーテキストは、リンク先のページ内容がわかるようにする

アンカーテキストとは?検索エンジンに「リンク先のページ内容を伝える」役目を持っています。

たとえば、
↓ ↓ ↓ ↓ ↓
文賢評判を検証!ブログ初心者向けに文賢4つのメリット&3つのデメリットを解説!
↑ ↑ ↑ ↑ ↑
青文字になりアンダーラインもひかれています
このようなテキストにリンクが貼ってあるものを、アンカーテキストと読んでいます。

検索エンジンに好まれるアンカーテキスト

それでは一体、どんなアンカーテキストが検索エンジンとユーザーにとってより良いのでしょうか?
いくつかパターンを書いておきますので、ごらんください。

こちらのページをご覧ください。
https://〇〇〇.com/xxxをご覧ください。
【初心者向】ブログ記事をユーザビリティ対策して検索エンジン上位を狙うをご覧ください。

上記3つのテキストリンクのパターンの場合、3番目の「ブログ記事を・・・・」が最適であることをお分かりいただけましたか?

なぜ3番目が最適かと言うと、1番目・2番目は共にリンク先のページには一体どんな事が書いてあるのか?パット見ただけでは判断できません。

一目見て内容が分からないリンクは、検索エンジン的にもユーザビリティの面からも不利になってしまいます。

スクショ(スクリーンショット)画像は、画像の下に解説文を書く

スクリーンショットの画像を掲載すると、その画像の文字はかなり小さめになってしまいます。
クリックして画像を大きくできるように設定する!これも手です。

ですが、この機能を知らなかったり、使えない人がいたら?

と言うことで、画像の下に繰り返しになりますが、同じ内容を書きだします。

ちょっと見ずらいので、画像の下に同じことを書き出します。

UpdraftPlus3
↓ ↓ ↓ ↓ ↓

□ UpdraftPlus バックアップ/復元
アドオン/プロサポート/復元/無効化/ツア―を開始  復元をクリックします。

↑ ↑ ↑ ↑ ↑ これがポイントとなります。

どうでしょうか?

一見すると不要な書き込みですが、こうすれば画像で見ずらい文字もハッキリと示す事が可能となります。
このようなちょっとしたひと手間をかけることが、ユーザビリティ向上につながります。

画像や動画の挿入と最適化

画像や動画をブログサイトの中に入れる事は、視覚的に考えてもとても効果的な方法です。
そして文字だけで読むよりも、数倍も記憶に残ったり、理解する速度も速くなると言われています。

なので、文章の内容に沿った画像や動画を挿入する事がとても大切になってきます。

無料で写真やイラストが見つけられるサイトのご紹介です。

O-Dan(オーダン:カッコいい写真が揃っているサイト

いらすとや:いろいろなサイトで良く見かけるかわいいイラストが豊富なサイト

イラストAC(イラスト・写真):イラストも写真も揃っているサイト

こちらは有料素材となりますが、安価で素敵なデザインがたくさん揃っていますので、おススメです。

イラスト素材【PIXTA】:豊富なイラストと画像

ココナラのクリエイターに依頼する:あなたの好きが見つかるココナラ

alt(オルト)属性・代替テキストをいれる

alt(オルト)属性・代替テキストをいれる目的は、

  1. 検索エンジンに正しく画像の内容がわかるようになる
  2. 視覚障害者でも画像の内容がスクリーンリーダーで読んだ時にわかる

alt(オルト)属性・代替テキストについての詳しい解説と設定時の注意などを書いた記事を参照してください。
↓ ↓ ↓ ↓ ↓
alt(オルト)属性の正しい書き方をブログ初心者向けに解説

画像の最適化

あなたがWebサイトを訪問して、そのサイトの表示速度が遅い場合、あなたはどんな行動を取りますか?

「そのサイトの大ファンまたはそのサイトしか情報を得られない事を知っている」以外は、すぐ離脱すると思います。

そこでこのような事態を避けるために、画像の最適化(画像ファイルを軽くする)をすることをおススメします。

画像の最適化が最も即効性があり、初心者でも出来る事の一つだと考えています。

おススメ画像圧縮プラグインは、Imagifyです。Imagifyのインストールから設定方法までは、こちらの記事に図解を入れて詳細に解説していますので、ぜひご覧ください
↓ ↓ ↓ ↓ ↓
Imagify画像圧縮プラグイン(初心者向)設定方法の詳細を解説

ページの高速化

訪れたいサイトのページが重すぎるのは、ユーザビリティ―の面から言って最悪の状態です。
一番の大きな問題は、画像の大きさだと言われています。

先程お話ししたプラグイン【Imagify】は、どのプラグインよりも強力に画像を圧縮しますので、画像に関してはこれで問題は無いと思います。

Cocoonをお使いの方は、「高速化」も簡単にする方法をこちらの記事で詳細に解説しています。
↓ ↓ ↓ ↓ ↓
Cocoonならブログ初心者でもSEO設定が簡単にできる!用語も合わせて解説

タイトルタグ・見出しタグの最適化

タイトルを考える時の大切なポイント3つ

  1. 検索エンジンに認識されやすい
  2. ユーザーが記事内容を簡単に推測できるようにする
  3. ユーザーが興味を持ちクリックしたくなるようなタイトルにする

タイトルを考える時のコツ5つ

  1. キーワードを出来るだけ文章のはじめの方に置く
  2. 文字数は30~32文字程度に収める
  3. ユーザーのメリットが伝わるようにする
  4. どんな結果が得られるのかを伝えるようにする
  5. 数字を入れると良い

記事タイトルをより詳細に知りたい方は、こちらの記事をご一読ください。
↓ ↓ ↓ ↓ ↓
読まれるブログ記事「タイトル」の決め方、初心者でもポイントをおさえれば簡単に書ける!

見出しタグの最適化

見出しタグの最適化については、見出しタグルールの詳細も是非一緒にご一読ください。
↓ ↓ ↓ ↓ ↓
【HTML】見出しタグh1~h6の効果的な使い方を初心者向に解説

広告やバナーの数を控える

広告やバナーは無用だと言うのが私の持論です。
↓ ↓ ↓ ↓ ↓

ユーザビリティの低下
類似した商品の広告・バナーの表示はマイナスになる

ユーザビリティの低下

SEO対策にはユーザビリティを向上させることが最も大切なことだとお伝えしています。

ここでちょっと考えて欲しいのは、あなたがサイトを閲覧中に大きな広告やバナーが目に飛び込んで来たら、
その広告どうしていますか?

私は煩わしいので「x」をクリックして消しています。
でもそのクリックする手間が惜しい時もありますよね? そうです、そのサイトから速攻離脱します。

不要な広告やバナーはユーザビィリティを低下させる原因だと私は感じています。

類似商品の広告・バナーの表示はマイナスになる

ここである仮説を立てていきましょう。

あなたのサイト:物販サイト(物を販売するサイト)
扱うジャンル:ファッション小物
売りたい商品:ハンドバック

ユーザーがあなたのサイトを見つけて、あ~このハンドバック素敵!と思った時、類似したハンドバックの広告・バナーが目の前に飛び込んで来たら、ユーザーはどのような行動を取るでしょう?

予測されるユーザーの行動バターン4つ

  1. 広告の商品に興味を持ち、そのサイトから購入する→クリック型広告の報酬(低額)が発生します。
  2. 広告の商品に興味を持ちクリック後あなたのサイトに戻る→クリック型広告の報酬(低額)が発生します。
  3. 煩わしい広告の「x」をクリックしてあなたのサイトを見続ける
  4. 煩わしい広告と一緒にあなたのサイトから離脱する

心理学的に言うと、余り多くの選択肢を与えない方が人は決定しやすい傾向を持っています。

ここで勘の良い人ならもうお気づきだと思いますが、余計な広告は見せずにあなたの売りたい商品だけを提示する事が最適だと言うことです。

クリック型広告の報酬額 扱っている商品の販売報酬額

新記事・更新情報を検索エンジンに通知する

記事の投稿・更新情報を検索エンジンが拾ってくれるのをひたすら待っていては、時間の無駄です。
そこで迅速に情報を伝えてくれるプラグイン【WebSub/PubSubHubbub】を使うことをおススメします。
↓ ↓ ↓ ↓ ↓
【初心者向】WebSub/PubSubHubbubを使うメリットと設定方法

まとめ

ブログサイトのユーザビリティを向上させるのは、2つのポイントをおさえる必要があります。

  1. 検索エンジン向け
  2. ユーザ向け

検索エンジン向けユーザビィリティ向上

  • XMLサイトマップ作成(ロボット用)
  • 常時SSL化を図る
  • URLの正規化と最適化を図る

ユーザー向けユーザビィリティ向上

  • モバイルフレンドリー(レスポンシブデザイン)にする
  • HTMLサイトマップの作成
  • リンク切れがないようにする
  • アンカーテキストはリンク先のページ内容がわかるように
  • スクショには解説を付ける
  • 画像や動画の挿入 ALT属性を忘れずに
  • 画像の最適化
  • ページの最適化
  • タイトルと見出しタグの最適化
  • 広告の数・バナーの数を制限する
  • 新記事・更新情報を検索エンジンに通知

この両方のユーザビリティを向上させてこそ、良い記事になると考えています。

そして絶対に忘れてはいけないもう一つのユーザビリティは、ブログ記事内容に関するものです。
↓ ↓ ↓ ↓ ↓
【初心者向】ブログ記事をユーザビリティ対策して検索エンジン上位を狙う

あくまでもユーザーにとってより良い情報を提供するためには、どんな事が必要か?
それを念頭に置いて記事を書く事で、あなたのブログ記事も必ず検索上位に表示されるようになります。

長くなってしまいましたが、ここまでがブログ全体のユーザビィリティ向上記事となります。

実際におこなってみて、疑問や不安などが出てくると思います、いつでもお気軽にご相談くださいね。

SEO対策
  あさこをフォローする                お気軽に声をかけてくださいね!
幸せな老後のために