携帯サイト作成で最初にすること(4)
SEO対策のためタグを重視
METAタグはサイトの情報を記述し、各サイト、各ページの見出しに相当しています。
このMETAタグは、SEO（サーチ・エンジン・オプティミゼーション）と呼ばれる、検索サービスに対して読み込ませて検索結果で上位に表示させるには重要な記述です。
「キーワード:<meta name="keywords" content="×">」と「記述:<meta name="description" content="×">」は、<HEAD></HEAD>内にあり、検索の対象となるキーワード＝キーワード、サイトの説明文＝記述、です。
PCと携帯ではこのMETAタグ内の文字数に違いがあります。
PC：キーワード：読点（,）も入れて20のキーワード（同じキーワードを7つも使用すると無視されます）- PC：記述：全角文字で80〜100文字くらいを目安に。
- 携帯：キーワード：多くても10のキーワード
- 携帯：記述：10文字〜40文字。20文字程度が良いと言われています。
他に必要なMETAタグには、
- (1)<meta name="robots"content="index,follow">
- (2)<meta http-equiv="Pragma" content="no-cache" />
- (3)<meta http-equiv="Cache-Control" content="no-cache" />
- (4)<meta http-equiv="Expires" content="-1" />
- (5)<link rel="alternate" media="handheld" href="http://あなたのサイトURL/index.html" />
などがあります。
(1)は、サイト内の全てのページを検索対象とすることを許します。
(2)〜(4)は、携帯には「更新する」または「再読込」などの機能を使用し、リフレッシュしないと前回表示したページ内容がそのまま残って表示されたりすることがあります。これを防止するタグです。
(5)は、携帯サイトのトップページを指定するものです。index.htmlやindex.phpなどページを指定しておきます。
携帯各キャリアの電話機を所有する
「docomo、SoftBank、auでのサイト表示は同じ」だと、同じ携帯電話キャリアの携帯電話を使い続けている人は思っています。
絵文字は、各携帯電話キャリアによって違います。この絵文字が違っているだけで、同じページでも表現力が違った印象を与えるのが携帯サイトです。
また、CSS（カスケーディング・スタイル・シート）への対応、htmlファイル用の記述とxhtmlファイル用の記述での表示の違い、xhtmlファイル用の記述が厳格なauと他キャリアとの適応の違い、写真のボーダー表示の有無、FORMボタンなどのデザイン、写真の回り込みタグの違い、動画ファイル（mpg4形式）のダウンロードまたはストリーミングを適用する記述の違い、などなど。あげていくと携帯電話キャリアそれぞれの表示に違いは多いのです。
こうした理由から、最終チェックには携帯各キャリアの電話機を1台ずつ所有することをお薦めします。
自分の目で最終的に確認することはスタート時には重要なことです。
最終的には、携帯各キャリアの電話機で表示や動作を確認するのですが、その都度電話を持ち替え、小さなボタンで全てのサイトを表示させるのも大変です。
ファイルを書き換えながらチェックするときに便利なブラウザがあります。PCのブラウザで、「FireFox」です。このFireFoxのアドオンに「FireMobileSimulator」という便利な携帯サイト表示シミュレーターをお薦めします。
ほとんどの機種をカバーしていて、絵文字も出力されます。位置情報も扱えてGPS機能までテストできます。このシミュレーターを使用するためにFireFoxをインストールする携帯サイト開発担当者は多いのです。
