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

top of page

©2017 coliss