3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

アクセシビリティ_HTMLページには意味のある`<title>`をつけましょう

Posted at

これはなに?

WCAG2.1のアクセシビリティの「操作可能」の中の、「ナビゲーション可能」ガイドラインの「2.4.2: ページタイトル」についてまとめた記事です。

対象読者

  • HTMLやCSSをコーディングするデザイナーやエンジニア
  • SEOの担当者

HTMLページには空ではない<title>を用意する

いわゆる<head>タグ内の<title>のことを指します。
健康的な方はもちろん、視覚障害の方は音声読み上げでページを確認します。
また、運動障害がある人は音声操作でウェブページを行き来したりすることもあります。

ちなみに<title><head>内に1つしか指定できません。

今更聞けない <title>の役目

ナビゲーションには、主に二つの機能があります

  • 利用者に自分がどこにいるのかを知らせる
  • 利用者が他のどこかへ行けるようにする

<title>はこの2つの機能を提供しています。
なので、<title> がついていないと、利用者は迷子になってしまいます。
必ずHTMLページには意味のある <title> をつけましょう。

<title>どこに表示されるの?

  • ブラウザのタイトルバーまたはタブバー
  • お気に入り(ブックマーク)の登録時のタイトル
  • 検索エンジンの検索結果
  • SNSなどで共有した時のページのタイトル

Qiitaでの事例

  • qiita.com が提供しているページは共通してお尻に - Qiita が付いています
  • 記事ページは記事タイトルが<title>になり、おしりに - Qiita は付きません

SEOにおける<title>

検索結果において1番目にとまる要素と言って過言ではないのではないでしょうか。
タイトル自体はSEOにとって重要な要素です。
昔はタイトルにキーワードが入っていると検索順位に影響があると言われたこともありますが、今はキーワードの有無は強い影響はないはずです。
私の解釈では、今ではタイトルはCTR(クリックしてもらいやすさ)に影響すると考えています。

良いタイトルをつけることができ、良いコンテンツを提供すれば下記のサイクルが発生すると思います。

  1. 検索したキーワードに関連していそうなタイトル
  2. クリックされる
  3. コンテンツに満足してもらう
  4. CVが発生する or ユーザーが満足して検索行動をやめる
  5. 有益なページだと評価される

タイトルだけでページの評価は決まりませんが、きっかけになるのは間違いないないのではないでしょうか。
だからこそ、「タイトルは順位に影響する!」と主張しているサイトが世の中にあるんだろうなと思いました。

タイトルをつけるときのポイント

  • わかりやすい
  • 文字数はモバイルで36文字、デスクトップで30文字を目安にする
  • 重要なキーワードはできるだけ前に入れる
    • 検索エンジンでは長すぎると文字が省略されるため
  • ページの内容にズレがない
    • ズレが有ると離脱が発生し、ユーザーに有益なページでないと評価されてしまいます
  • サイト名を統一でつける
    • 露出機会アップ
  • 他のページと同じタイトルをつけない
    • 重複コンテンツ対策

<title>の内容が検索結果のタイトルと一致しないこともある

ときどき、<title>以外のテキストが追加されていることがあります。
例えば、見出しやそのページへのリンクなどが該当します。
検索エンジンの仕様…と言ってしまったら元も子もありませんが、それでも <title>の内容が反映されることのほうが多いと思います。

まとめ

  • アクセシビリティとしては、HTMLページには意味のある <title> をつけましょう
  • SEOの観点ではページに訪問してもらえるように、良いタイトルを考えよう

以上です。

この記事が誰かのお役に立てれば幸いです。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?