企業サイトやブログ向け、title要素内の表記規則のパターン

ブラウザのタイトルバーや、検索サイトの結果画面などに表示されるtitle要素内の表記規則のパターンをCSS Tricksから紹介します。

What's The Best Way To Handle Page Titles?

title要素内の表記規則：第一階層の場合

1. [サイトの名前]
   例：コリス
2. [サイトの名前] - 短いタグライン
   例：コリス - Web制作に関する最新情報をお届け
3. [サイトの名前] - キーワード
   例：コリス - ウェブデザイン、HTML、CSS、JavaScript

title要素内の表記規則：第二階層の場合

1. [サイトの名前] - [記事のタイトル]
   例：コリス - jQueryのプラグイン33+1選
2. [記事のタイトル] - [サイトの名前]
   例：jQueryのプラグイン33+1選 - コリス
3. [記事のタイトル]
   例：jQueryのプラグイン33+1選
4. [サイトの名前] - 階層 - [記事のタイトル]
   例：コリス - JavaScript - jQueryのプラグイン33+1選
5. [記事のタイトル] - 短いサマリー
   例：jQueryのプラグイン33+1選 - 最近リリースされた便利なjQueryのプラグインを紹介
6. 他に、日付を入れるなど。

title要素内の表記規則：区切り

1. スペース
   例：コリス jQueryのプラグイン33+1選
2. ビュレット
   例：コリス • jQueryのプラグイン33+1選
3. ハイフン
   例：コリス - jQueryのプラグイン33+1選
4. Enダッシュ
   例：コリス – jQueryのプラグイン33+1選
5. Emダッシュ
   例：コリス — jQueryのプラグイン33+1選
6. シングルアロー
   例：コリス > jQueryのプラグイン33+1選
7. ダブルアロー
   例：コリス » jQueryのプラグイン33+1選
8. チルダ
   例：コリス ~ jQueryのプラグイン33+1選
9. 縦線
   例：コリス | jQueryのプラグイン33+1選
10. ピリオド
    例：コリス . jQueryのプラグイン33+1選
11. スラッシュ
    例：コリス / jQueryのプラグイン33+1選
12. 他の記号や組み合わせたりなど。