[SEO対策]の強力な副因、「アクセシビリティ」の強化は検索エンジンの評価にも有効

2020年2月7日

SEO対策であれこれ試したけどいまひとつ伸び悩み、そんなときに試して見ませんか?。難しい作業はいりません、基本的な項目を見直すだけです、誰にでもできます!。「アクセシビリティ対策」は思いの外強力な「SEO対策」なのです。

アクセシビリティ対策で実施する、マシーンリーダブル(マシーン=視覚障害者用の音声読み上げソフトなど、に優しい)な記事は、そのまま検索エンジンにも優しい設定なのです。検索エンジンが「読みやすい、解りやすい」と感じれば(認識すれば)、検索上位になる可能性は高いのです。

「記事の内容をこれ以上高めるのは難しいよ〜」
「表示速度対策や、メタキーワード対策、などなど、やり尽くしたよ〜」

「もう、上位表示させる手立てが思い浮かばないよ〜」
と嘆いているのなら、

試しに取り組んで見ませんか?

「こんなことで!」という結果になれば幸いです。

アクセシビリティとSEO
アクセシビリティ基盤委員 https://waic.jp/qa/accessibility-and-seo/

Q

アクセシビリティに取り組むことで、SEOの効果は期待できますか?

A

澤田氏:Googleのような検索サービスのロボットからのアクセスには、アクセシビリティ対応も有効ですが、Web標準に準拠することも大事だと思います。

植木氏:最近では、JIS対応したら検索順位が上昇したというような、以前ほどの目に見える相乗効果があるとは言えないと思います。しかし、SEOとアクセシビリティには、コンテンツをマシンリーダブルにすることが基本だという共通点があります。良いコンテンツを作ったら、それをマシンリーダブルにすることによって、より多くのユーザーに届けられることになります。

 

ところで、「アクセシビリティ」ってなに?と思っていますか?

また「アクセシビリティ」と言う言葉を聞いたことはあるけど、具体的に何をするのかは把握していない、
では、以下を!

Webアクセシビリティ対策とは

Webアクセシビリティとは、わかりやすく表現すると「情報のバリアフリー化」です。障害や加齢その他の要因があっても、みんなと同じように知りたい情報に到達でき、なおかつ利用できる。そのためにサイトに求められるバリアフリー化です。

一般的には、視覚障害者向けの音声読み上げソフトや高齢者向けの拡大鏡のような特別なイメージが強いかと思います。勿論その対策は必要ですが、ちょっとした不具合は日常のWeb閲覧でたくさんあります。

    例)

  • 騒音で音が聞こえにくい
  • 静かな場所で音が出せない
  • 明るい場所で画面が見えにくい
  • スマフォの地図は字が小さくて読みづらい
  • 食事中で片手でスマフォを操作したい

などなど、また一時的な怪我などで利き手が使えない、マウスが使えない等。でも現状それらの不具合はスマフォやパソコンに装備されている補完機能(アクセシビリティ機能)で解消することが可能です。案外すごいのです。

しかし、それらの機能が存分に働くためには、補完のためのソフト(マシーン)が不自由なく活躍できることが必須です。そのための条件はWebの構造(書き方)が正しく整備されいる(書かれている)ことです。

でも、Webの作り手側のちょっとした認識不足でこれらの機能が十分に活かせないケースが多々あります。その原因のほとんどは人が見るには問題ない表示だけれどマシーン(読み取りソフトなど)が見たら(読んだら)解読できない!構造(書き方)になっていることなのです。
 検索エンジンはマシーンです、人が見る画面ではなく、マシーン用の見た目で読み取っています。つまり、読み取りソフトなどのマシーンと同じ画面を見ています。

Webアクセシビリティ」対策とは、検索エンジン(マシーン)に読み取りやすい画面(ページ)を作ることに他ならないのです。

 

構造(HTML)とは

 ここで言う「構造」とは言い換えるとWebページを作るために使用されるHTMLの記述方法のことです。Wordpressを利用してブログ構築をする場合、直接HTMLを編集する機会は少ないですが、テキスト編集画面を表示させるといつでも見えます(^^)。

ちょっとご紹介しますね

■いつも見ているWebページはこんなのですが
↓↓↓↓↓↓↓

HTMLの紹介

文字を大きくしたり、文字の色を変えたり
リンクを貼ったり https://applired.net/

写真やイラストを挿入したり
バナー、アクセシビリティ

 

■マシーン(検索エンジン等)が見ている実態はこんなのです!
↓↓↓↓↓↓↓

<h3>HTMLの紹介</h3>
<p>文字を<span style=”font-size: 24pt;”>大きくしたり</span>、文字の<span style=” color: #ff00ff;”>色を変えたり</span>、<br />
リンクを貼ったり <a href=”https://applired.net/”><strong>https://applired.net/</strong></a></p>
<p>写真やイラストを挿入したり<br />
<a href=”https://applired.net/wp-content/uploads/2019/11/top-barrierfree_512x512.png”><img class=”alignnone wp-image-8602 size-thumbnail” src=”https://applired.net/wp-content/uploads/2019/11/top-barrierfree_512x512-150×150.png” alt=”バナー、アクセシビリティ” width=”150″ height=”150″ /></a></p>
 

この文字や記号だらけの羅列を上のような綺麗な表示にしてくれているのが「ブラウザGoogle Chromeなど)」です。でも視覚障害の方がつかうスクリーンリーダーや、SEOの評価のためのクローラー(検索エンジンのプログラム)が見ているのは下のような文字の羅列なのです。

実は、ブラウザで表示させた時には同じように見える内容でも、下の構文にするときには色々な記述方法があって、記述の仕方によって意味や動作が変わってきます。正しい「構造」とは、このHTMLの構文を正しく使いましょうと言うことです。
 

 

具体的なアクセシビリティ対策(HTML構造)について

とは言っても、実際にはどんなことなのか?
イメージしてもらうために、解りやすいアクセシビリティ対策(HTMLの記述の仕方)の例を挙げてみますね。
「そんなことか?!」と思うはずです。

リンクテキストは、リンク先が分かる文言にする

リンクを貼る文字は「こちら」などの短くリンク先の内容がわからない文字より、長くリンク先の内容がわかる文字にします。これはSEOの面でも高評価となります。

キャプチャー、リンクの文字の長さ

 

情報を伝えている画像に代替テキストを提供する

画像ファイルを挿入する際、代替テキストに「図1」とか内容がわからない説明を入れると、スクリーンリーダーで読み上げられた時や画像が表示されない時に内容がわかりません。情報を伝える必要がある代替えテキストは内容がわかるよう入力します。これもSEO対策には極めて重要で効果があります。

イラスト、画像説明の例

 

タイトルは 「titleタグ」で設定する

サイト(ブログそのもの)のタイトルも、各ページのタイトルもHTMLの構文では「title」というタグで設定する必要があります。「title」タグをつかうことでブラウザや検索エンジンが「タイトル」として扱います。タイトルとして扱われると
・ブラウザのタブに表示されます
・検索結果のタイトルになります

<title>Ringo | 初心者とシニアに優しいネットビジネス講座</title>

 

見出し設定

見出し設定には「h1〜h6(通常ブログ内で使うのはh3かh4くらいまで)」のタグが使われます。例をあげながらその正しい使用方法を紹介します。

マシーンが「見出し」と認識することで
・スクリーンリーダーでは見出しジャンプができる
・アウトライン(目次)を作ることができる
・検索エンジンのキーワードとして検出できる
など、ユーザーにとっても作り手にとっても利点がたくさんあります。

見出しは見出しタグ「h1〜h6」を使う

見た目にいくら大きな字や太字を使っても、見出しタグを使用していなければ見出し機能が働きません。
画像、見出しタグの記入例

 

見出しのレベルは飛ばさず順番に使う

見出しは「h2→h3→h4」と順番に飛ばさずに使います。
画像、見出しレベルは飛ばさない

 

リスト設定

リストは、「<ol>,<li>」または「<ul>,<li>」のタグを使用します。

マシーンが「リスト」と認識することで
・スクリーンリーダーではリストの項目数などを補足で読み上げてくれる
・スクリーンリーダーでは次のリストへジャンプできる
・大項目、中項目のリストも作成できる
などの機能が利用できます。

 

順番のないリスト

順番のないリストは、順番情報のない「・」や「■」なのが先頭についたリストのことです。この順番のないリストは<ul>,<li>タグを使用します。

画像、順番のないリスト

順番のあるリスト

順番のあるリストは 「1、2、3・・」や「a、b、c・・」というように順番が決まっているリストのことです。この順番のあるリストは<ol>,<li>タグを使用します

 

 

どうですか、難しいことは何もないことがお解りいただけるかと思います。ただ「やるとやらないでは大違い!」なことです。ぜひ今からすぐにでも取り組んでください。

「今までの記事も全部改修するのか!?」とちょっと青くなりましたか、勿論それができれば望ましいですが、画像の代替えテキストに「図1」とか入れている場合改修は考えただけで真っ青になります。
 まずは、今から作成する記事をいますぐにです!
あとは、余裕がある時に、閲覧数の多い記事や、検索上位を狙いたいキーとなる記事を中心に取り組めば良いかと思います。

できることから、実行あるのみです。

 

*このブログではアクセシビリティ対策の内容をひとつづつご紹介しています、
Wordpressで上記の設定確認や実施をする方法を初心者向けに解説しています。
この機会に取り組みませんか!

イラスト、車椅子とスロープ

↓↓↓↓↓↓↓(メニューバー「Webバリアフリーの勧め」からアクセスできます)
情報のバリアフリー化のための記事一覧

↓↓↓↓↓↓↓

また、最後にご紹介しているりんごのメルマガでは、ビジネスに役立つ実践講座をご用意!
あなたの「SEO対策」に有益な情報をお届けします。

 

最後に

りんごがこの記事を書こうと思い立ったわけ、それは以下のグーグルアナリティクスの検索クエリーの結果を見たからです。キャプチャー、検索クエリー結果0203

Cocoonの記事のPV数が増えてきたなあと思ったのと、検索クエリーの資料を探していて遭遇しました!

「なんだこの検索順位は! 1位がずらり!!」

実際に検索してみると、一番上に表示されます、(^^)

[Cocoon]、[SEO]での検索結果
キャプチャー、検索結果SEO

 

[Cocoon]、[アドセンス]での検索結果キャプチャー、検索結果アドセンス

これらの記事は、Wordpressの無料テーマ「Cocoon」がメジャーデビューしたばかりのころ。初心者向けに 「Cocoon」を使用したWordpressの構築用記事をシリーズで書いたものです。 恥ずかしながら更新もできていません(*実は読み返すと誤字や誤変換が沢山で大汗です、もし見つけたら是非教えてください)

なので、ちょっとどころかめちゃびっくりの結果です。
で、自分なりに何が原因(要因)なのか考えて見たのです。

勿論、初心者さんのために、噛み砕いて解りやすくを心がけました。それがグーグルの意向に沿ったものであったことは確かです。でもそのほかにと思った時「アクセシビリティ対策」も浮上してきたわけです。どれか一つの記事だけが突出してではなく、多くの記事が上位に表示されていたこともそれなら頷けるからです。

ご存じのようにグーグルの検索の仕組みや内容は「」です、推察の域を出ないことはご承知おきいただいて、やってみる価値はありそうだと思うのです。

 

そして、最後の最後に

この記事はSEO対策について、つまり「検索エンジンに評価されること」をキーワードとして書いてきましたが、やはり、評価されるのなら「読んでくれるユーザーに評価される」べきだと思います。アクセシビリティはいわゆる情報取得の面では弱者と思われるユーザー(障害者や高齢者)のための対策です、でもそうした人たちに優しい記事(サイト)は結果みんなに優しい記事(サイト)なのです。

この記事を見つけて、ここまで読んでくださったあなたに伝えたいこと。

今回、アクセシビリティのなかでも、直接マシーンリーダブルに関わる項目をピックアップしましたが、アクセシビリティ項目には、人のためを思った対策が他にもたくさんあります。できればそれらも合わせて実施いただき。より多くの人が快適に利用できるサイト作りをお願いしたいと思います、りんごはそのことこそが、(グーグルの意向にもマッチし)貴サイトの成果に繋がると信じています。

 是非この機会にアクセシビリティに興味を持っていただき、検索エンジンのみならず全てのユーザーのために見やすい(解りやすい)サイトの作成を心がけていただければ嬉しいです。

良い結果が訪れることを望みます。

 

SEO, ブログ

Posted by りんご