ウェブサイトのアクセシビリティとSEOを高める方法

アクセシビリティとSEOが共存する場所を見つける

それは神話ではありません。SEOとアクセシビリティが交差する領域がいくつかあります。クレジット:Unsplash

検索エンジン最適化(SEO)とWebサイトのアクセシビリティは同じものではありません。従うべき異なるルール、ターゲットとする異なる対象者、およびそれぞれの効果をテストする異なる方法があります。

検索エンジンボット用にWebサイトを最適化しても、実際の人々が自動的にアクセスできるというわけではありません。一部のSEOプラクティスは、Webサイトのアクセシビリティを損なうことさえあります。

しかし、それはすべて悪いニュースではなく、2つの世界が重なるいくつかの領域があります。プロジェクトの予算や期間が限られている場合、これら6つの領域*をターゲットにすると、SEOとWebサイトの両方のアクセシビリティが同時に向上します。

*注:この記事の焦点は、重複する領域にあります。以下の各領域の特定のタスクはそれぞれSEOをよりターゲットにでき、一部のタスクはアクセシビリティをよりターゲットにできます。

警告:流行に敏感なひげを生やしたピザの男は、SEOとWebサイトのアクセシビリティのためのUIの重要性を過小評価すると、あなたを追い詰めて、彼が浴槽で作った手作りの醸造酒を飲むように強制します。クレジット:Unsplash

構造の問題

優れたユーザーインターフェイス(UI)の力を過小評価しないでください。クリーンで明確で一貫性のあるUIを備えたWebサイトは、検索エンジンボットや、支援技術デバイスを使用している人やキーボードのみを使用している人に特に適しています。考えてみてください。ユーザーまたはボットがページを見つけられない場合、どのようにしてページを読んだり操作したりできますか?ページを見つけて、ウェブサイトとのやり取りをできるだけ簡単にする必要があります。

ベストプラクティス

  • ナビゲーションとページレイアウトを明確かつ一貫した方法で構築し、コンテンツを検索する複数の方法(検索、サイトマップ、目次など)を用意します。整然としたWebサイトアーキテクチャのような検索エンジンボットは、コンテンツをより意味のある方法でインデックスに登録します。
  • ウェブサイトの操作や使用が困難な場合、ウェブサイトでの時間、閲覧したページ、直帰率など、ユーザーの分析統計に影響する可能性があります。これにより、SEOランキングが低下する可能性があります。少なくとも、ユーザーを苛立たせるでしょう。
  • CSSやその他のスタイルマークアップを使用して意味を伝えないでください。代わりにHTMLマークアップを使用する必要がある要素を「偽造」しないでください。
  • 必要に応じて、
    などのアクセス可能なHTML 5ページ要素を使用します。これらの要素は、単純な
    または

    要素よりも、検索エンジンボットおよび支援技術デバイスの方がわかりやすいです。

タグ、タグ、どこでもタグ。さまざまなサイズと色の手作りパッケージタグ。クレジット:Unsplash

タグの適切な使用

Webサイトのコンテンツは、ページの見出しに使用されるタグ(

タグと混同しないように)を含めて、基本的にHTMLマークアップに要約できます。

および

タグをナビゲートすると、ユーザーまたは検索エンジンボットにページの概要とそのコンテンツの構造を提供し、

タグで各セクションの詳細をすばやく理解できます。 。 WebサイトのアクセシビリティとSEOの両方にとって、これらのタグを正しくすることが重要です。

ベストプラクティス

  • 見出しタグの一貫性を保ち、見出しの視覚的な外観を与えるためにテキストをスタイルするだけでなく、実際の見出しタグを使用します。そうしないと、検索エンジンのボットとユーザーは、どのコンテンツが最も重要かを知ることができません。
  • 見出しタグは順番に並んでいる必要があります。つまり、

    の後に

    が続き、

    の後に

    または

    が続きます。

  • ウェブサイトのページで順番に進むときに見出しタグをスキップしないでください。たとえば、

    から

    にスキップしないでください。注:新しいページセクションを開始する場合は、順番に(
    から

    )上がったときに見出しタグをスキップしてもかまいません。

  • ページごとに

    を1つだけ持つことをお勧めします。

    タグは、本質的に、検索エンジンボットに関連性​​の信号を送信する「2番目のページタイトルタグ」と考えてください。

練習が完璧になります。選手は金網フェンスに白いアディダスの靴を置きます。クレジット:Unsplash

リンクを完成させる

リンクは、検索エンジンボットと、スクリーンリーダーなどの支援技術デバイスを使用している人々の両方のWebサイトを作成したり、破壊したりできます。ページ見出しを確認した後、リンクはユーザーとクローラーが最も頻繁に注目する次の主要な要素であるため、リンクはできるだけ完璧であることが不可欠です。

ベストプラクティス

  • 壊れたリンクがないことを確認してください。これは、SEOのWebサイトが放置または放棄された兆候と見なすことができます。また、ユーザーを苛立たせたり混乱させたりする可能性のある、悪いWebサイトのアクセシビリティ慣行でもあります。
  • 内部タグ付けタイプのリンクを使用しますが、無理をしないでください。 Yoast.comによると、「SEOが向上するのは、あるコンテンツを別のコンテンツ、より具体的には投稿のグループを相互に関連付けることです。」また、ユーザーはワンクリックで同様のコンテンツに簡単にアクセスできます。
  • 説明的なリンクテキストを提供します。ここをクリックして詳細を読むなどのフレーズを使用しないでください。これらのフレーズを使用したい場合は、視覚的に非表示の方法またはARIAメソッドを使用して追加のリンク情報を追加する場合、それらを保持できます。
  • 説明的なタイトル属性のリンクへの追加をスキップします(リンクの上にカーソルを置いたときに表示されるテキスト)。リンクのタイトルを追加することは必ずしも間違っているわけではありませんが、SEOまたはWebサイトのアクセシビリティのいずれにとっても、おそらくあまり役​​に立たないでしょう。
はい、チーズ!レトロなニコンカメラを保持しているピンクの花柄のシャツの女性。クレジット:Unsplash

画像の最適化

検索エンジンボットやスクリーンリーダーを使用する人々は、従来の意味で「見る」ことはできませんが、どちらも画像の名前と代替テキストに頼って、画像が何を描いているかを伝えます。これらの要素を適切に配置することは、周囲のコンテンツを補うため、およびユーザーエクスペリエンス全体にとって不可欠です。

ベストプラクティス

  • 画像に名前を付けるときは、できるだけ一貫性と正確性を確保してください。たとえば、オレンジ色のトラ猫の写真のファイルにbrown-puppy.jpgという名前を付けないでください。
  • アルファベット以外の文字(例:7、%、&、$)の使用を避け、画像名または代替テキストにアンダースコアではなく、単語間にダッシュを使用します。たとえば、0r @ nge_t @ 66y_c @ t!.jpgではなくorange-tabby-cat.jpgと書き込みます。
  • 代替テキストは125文字以下にしてください。さらに文字が必要な場合は、キャプションテキストを使用するか、ページのメインテキスト領域で画像をさらに説明します。
  • ロボットではなく人間のような代替テキストを作成します。キーワードスタッフィングは誰にも利益をもたらすものではありません。スクリーンリーダーを使用しているユーザーはいらいらし、検索エンジンボットはペナルティを科します。しないでください。
ボットと人間のためにメディアを機能させます。回転するレコードプレーヤーのクローズアップ。クレジット:Unsplash

メディアを補足する

視覚障害(発作障害、視覚障害など)、聴覚障害(聴覚障害、聴覚障害など)、状況/一時的な障害、帯域幅の接続が不十分な人々、およびその他の多くの人々は、方法。同様に、検索エンジンボットは目、耳、手がないという点で「無効」になっているため、これはSEOとWebサイトのアクセシビリティの両方がある程度重複している領域です。

ベストプラクティス

  • 少ないほうがいいですね。可能な限り、デザインでの複雑なメディアコンポーネント(スライドショー、ビデオなど)の使用を制限してください。恐れない…代替のレイアウトオプションがあります。
  • 明確で、完全で、簡潔なテキストの説明とマークアップを重要なメディアに追加します。必須ではないメディアの保管についてよく考えてください。
  • すべてのビデオとスライドショーには、自動進行する場合は再生/一時停止ボタンがありますが、自動起動しないでください。理想的には、すべてのメディアコントロールにアクセスできる必要があります。
  • メディアにアクセスする別の方法を提供します。たとえば、ビデオのトランスクリプトおよび/またはキャプションがあります。オーディオのみのファイルのトランスクリプトを作成します。点字形式のファイルをメディアに追加します。さまざまな種類の代替形式が使用可能です。
コンテンツは王様です。印刷機のコンテナは、さまざまなサイズとフォントファミリーの文字をブロックします。クレジット:Unsplash

コンテンツを整理する

最後に大事なことを言い忘れましたが、ウェブサイトの全体的な構造、見出しタグ、リンク、画像、その他のメディアに対処した後、次のステップは実際のコンテンツに焦点を当てることです。各Webサイトは固有のスノーフレークであるため、WebサイトのコンテンツにはWebサイトごとに多くのばらつきがあります。一部のウェブサイトの一部のユーザーに有効なものは、あなたとあなたのサイトには機能しない可能性があります。重要なのは、できる限り最高のコンテンツを作成し、Googleのコンテンツ作成マントラを心の奥底に保つことです。

「あなたのウェブサイトがユニークで、価値があり、魅力的である理由を考えてください。あなたのウェブサイトをあなたの分野の他の人から目立たせてください。」

ベストプラクティス

  • 各段落の長さを約3文に制限し、視聴者に合った読解レベルをターゲットにします。理想的には、WebサイトのアクセシビリティとSEOの両方の目的のために、9年生レベルを目指してください。
  • 単語を強調するために太字および斜体のタグを使用せず、代わりに強く強調します。視覚的には互いに似ていますが、スクリーンリーダー(右モード)はタグとタグで囲まれた単語を強調しますが、タグを完全に無視するか、わずかに変更します。
  • コンテンツを複製しないでください。検索エンジンボットは気づき、ペナルティを科します。ユーザーは混乱するだけです。
  • 箇条書きと番号付きリストは、読者のためにコンテンツを分割し、より使いやすくするのに役立ちます。ボーナス:いくつかの調査では、検索エンジンのボットがプレーンテキストよりも箇条書きと数字のコンテンツを好むことが示されています。

❤この記事が気に入ったら、拍手アイコンをクリックして(何度でも)ソーシャルメディアでストーリーを共有し、MediumまたはTwitterでフォローしてください!ありがとう、幸せな読書❤

このストーリーは、273,971人以上が続く中規模の最大の起業家向け出版物、The Startupで公開されています。

ここで私たちのトップ記事を受け取るために購読してください。