アンカーテキスト、alt 属性は、ともに SEO の観点から重要なものです。title 属性に関しては、調べる限り SEO に意味がないばかりか、a タグの title 属性と内部の img の alt 属性に同じテキストを指定するとペナルティになる場合すらあるようです。

ふと、本来alt 属性と title 属性はどのように使うものなのか疑問に思い、調べてみました。

alt属性の仕様

W3Cによると、alt 属性は、代替テキストとして定義されています。

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the langattribute.

HTML 4.01 Specification : 13.8 How to specify alternate text

「この属性は、画像、フォーム、アプレットを表示できないユーザーのために、代替テキストを指定する。代替テキストの言語は、lang 属性で指定する。」とのこと。

title属性の仕様

title 属性は、補助情報を伝えるものとして定義されています。

The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.

HTML 4.01 Specification : 12 Links

「title 属性は A と Link の両方に指定することができ、リンクの性質情報を付加します。この情報は、ユーザーエージェントによって音声出力されたり、ツールチップとして読み込まれたり、カーソルイメージの変化によって伝えられます。」

かなり苦しい訳になってしまいました。余談ですが、W3Cのドキュメントに出てくる “user agent” はブラウザのことと思っていいのでしょうか？HTTPヘッダに含まれるユーザーエージェントではなさそうです。

alt 属性と title 属性の使い方

仕様を見た上で、alt属性と title 属性に同じテキストを指定することによるペナルティを考えると、単に本来の目的を無視した使い方をしているだけのように思えます。仕様に準拠した使い方をしていれば問題ないのではないでしょうか？

ただし、title 属性を有効に活用できてきる例はあまり見たことがありません。使い方はもう少し研究したほうがよさそうです。

メニューがハイライトされるデザイン

Dreamweaver のテンプレートは、ネスト（階層化）することができて便利です。今回のサイトはグローバルメニューにハイライトがあたるようになっており、該当ページがそのメニューに含まれる場合、色が変わります。

このハイライトは、リストでマークアップしたグローバルメニューの a 要素にクラスを追加することで実現されています。つまり、グローバルメニューのコードは全ページ共通ではなく、ハイライトされる場所によって変わります。

Dreamweaver のテンプレートは条件分岐もできるため、通常はそれで OK になりそうです。しかし、今回のサイトは、サイドメニューがあり、そのサイドメニューにもハイライトがあたるようになっているため、より運用を簡単にするためには、グローバルメニュー = カテゴリ ごとにテンプレートを用意する必要がありました。

ネストされたテンプレート

そこで、コンテンツページに共通する部分を共通化するベーステンプレートと、ベーステンプレートをもとに、グローバルメニューのハイライトと、カテゴリ内で共通するサイドメニューを含む子テンプレートを作成してみました。

作成の方法は、「ファイル」-「新規」-「テンプレートから作成」でベーステンプレートから新規ドキュメントを開きます。その新規ドキュメントをテンプレートとして保存すると、子テンプレートを作ることができます。

また、ベーステンプレートの編集可能領域は、ネストされた子テンプレートに引き継がれます。ただし、その編集可能領域に新しいテンプレート領域（各種編集可能領域、編集可能にした属性を含む）を挿入すると、子テンプレート独自の編集可能エリアとなります。

基本テンプレート内の編集可能領域はネストされたテンプレートに継承されます。それらの領域に新しいテンプレート領域が挿入されない限り、ネストされたテンプレートから作成されるページでも、編集可能なまま保持されます。

Adobe Dreamweaver CS4 : ネストされたテンプレートについて

テンプレート構成

今回は、以下のような構成で、作成してみました。

その他はまったところ

複数の文字コードは対応していない？

このサイトは、メールフォームのみ shift-JIS 、その他のページが UTF-8 で作成されていました。デザインはメールフォームもコンテンツページも変わらないため、同じテンプレートで作成し、charset の値をDreamweaver の変数に設定して、ページ側で文字コードを設定できるようにしたのですが、見事にすべてのページが shift-JIS に変換されて泣きそうになりました。

そのほかの方法は試していないですが、複数の文字コードはサポートしていない気がします（未確認）。今回は、メールフォームのみテンプレートを使用しない方向で乗り切りました。

ページの作成は「新規ドキュメント」-「テンプレートから作成」で

最初はテンプレートから1ページ作成して、そのファイルをコピーしたりしていましたが、ページ内に必要ないTemplateparam タグやが残ったり、テンプレートプロパティの中に削除した項目が残ったり、よくない雰囲気でした。

おとなしく、「新規ドキュメント」-「テンプレートから作成」で新規ページを開き、そこにコンテンツを流しこむ方法が確実でした。

「編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても、次回のテンプレート適用時にファイルが更新されて、これらの変更は失われます。それまで変更を保持しますか?」

しょっちゅう出る。いまだ原因がわからず。これに関しては、いずれまとめてみたい。

html要素に dir="" を追加すると、文書全体の書字方向を指定できます。

TAG index : ページ全体の書字方向を指定する

ようするに、そのページが右から読むページか左から読むページかを明示するもののようです。日本語は左から右へ、アラビア語は右から左へ、その方向を指定するものですね。

html ファイルの文字コード

該当の html ファイルをFTP でダウンロードして、Terapad で文字コードを確認 →UFT-8N

ブラウザはどの文字コードで認識している？

Google Chrome で開いて（文字化けしてる）文字コードを確認 →Google Chrome は SHIFT-JIS で認識している →UTF-8 を選択すると文字化けが直る

サーバ（Apatch）の設定は？

httpd.conf の設定 →AddDefaultCharset ECU-JP

推測できるのは、上記のような不思議な状況のため、ブラウザが文字コードを認識できず、ブラウザの既定の文字コードで読み込んでいるのでは。Google Chrome の場合、右上のレンチのアイコン→オプション→フォントや言語を変更→エンコード で設定されているようです。

確認してみると案の定、Shift-JIS になってる。で、一時的に既定の文字コードを UTF-8 にしてもう一度問題のページを見てみると、やっぱり Google Chrome は Shift-JIS で認識している。。

となると、ブラウザがどこからか Shift-JIS で設定されている部分を見つけて誤解しているのか、そもそも何かのバグがあるのか、、、 WebKit の仕様を調べる必要がありそうです。。

後日追記）
.htaccess に、 AddDefaultCharset UTF-8 を指定することで改善することができました。もっと早く思いついてもよかったのに。