企業サイトやブログ向け、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. 他の記号や組み合わせたりなど。

Post on:2009年6月11日