ホームページ制作者がheadタグの間でチェックしてしまう10のポイント
2009年 10月 2日 (金) / PM 2:13
ホームページ制作の仕事をしていると気になったページはソースコードを見てしまいます。
これって職業病でしょうね。
HTMLソースの上部にあるheadタグの間の記述内容を見て制作スキルをある程度判断している10のポイントを公開します。
基本的な記述
有って当たり前だけど、細かい部分にまで気を使っているサイトは素敵。
１. ページのタイトル
<title>***</title>
検索結果で目立つように表示されるのでSEO対策的にも費用対効果が高い項目。
30文字以内でページの内容とサイト名が分かるものがベストですよ。
これが無いと論外ですね。
２. ページに関連するキーワードと紹介文
<meta name="keywords" content="キーワード" /> <meta name="description" content="紹介文" />
本来はSEO的に重要視されるはずなのですが、悪用したSEOスパムが増えたため最近は信用度低下。
それでも無いよりは有った方が良いものです。
そのページのキーワードと紹介文なのでページ内容にあった記述内容にするべきなのですが、実際にページ毎に変更するとなると非常に大変な作業です。
見つけると「勉強されてますね」と思わせる記述
数年前には無かった情報が当たり前になってしまう業界ですから。
３. GoogleWebマスターツールの認証用メタタグ
<meta name="verify-v1" content="***" />
Googleに対してサイトの管理者である事を認証するタグ。
認証用の専用HTMLファイルをアップロードする方法もあるので注意。
サイトのGoogle検索に関する様々な情報を取得することが出来るので、少しでもSEO対策を考えるのであれば登録を推奨します。
４. Yahoo! Site Explorer の認証用メタタグ
<meta name="y_key" content="***" />
Yahoo！Japanに対してサイトの管理者である事を認証するタグ。
認証用の専用HTMLファイルをアップロードする方法もあるので注意。
サイトのYahoo！Japan検索に関する様々な情報を取得することが出来るので、少しでもSEO対策を考えるのであれば登録を推奨します。
５. Favicon（ファビコン）の指定
<link rel="shortcut icon" href="http://***/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="http://***/favicon.ico" type="image/vnd.microsoft.icon" />
ブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに表示される独自のアイコンの指定。
６. モバイルサイトの指定
<link rel="alternate" media="handheld" href="http://モバイルサイトのURL" />
この記述があると検索からパソコン用のサイトにたどり着いた時にモバイル用サイトを表示してくれるので便利。
見つけると「無駄なのに」と思わせる記述
数年前には当たり前だった情報が無意味になってしまう業界ですから。
７. ロボット型検索エンジンへの無駄な登録指定
<meta name="robots" content="index,follow">
検索エンジンに対して「このページもリンク先のページも検索結果に反映して下さい」とお願いしているのですが、無くても全く同じなので無駄です。
８. 使用しているエディタの表示
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows">
Windowsのパソコンでホームページビルダーのバージョン12を使って作りましたよと教える必要は無いと思いますよ。
比較的ホームページビルダーを利用している方に初心者の方が多いため、見つけると思わず初心者の方が作ったページだろうなと思ってしまいます。
ちなみに私が最初に作ったWebサイトで記述するとしたら下記になります。
<meta name="generator" content="SEGA Dream Passport Version 1.0 for Dreamcast" />
見つけると「お疲れ様です！」と思わせる記述
人間ですから疲れます。
９. IE8のレンダリングモード指定
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
この記述だとIE7としてページを描画します。
IE8以前に制作されたページで「IE8で見たら崩れる、何とかしろ！」と言われた時にやる気無く作業した結果。
１０. 内部スタイルシートに.style1
<style type="text/css">
<!--
.style1 { *** }
-->
</style>
Adobe Dreamweaverで急いで作っちゃったスタイルシートに良くある記述。
完成したはずのページで「ここの文字色を赤にして！」と言われた時にやる気無く作業した結果。
番外編
世の中には分かる人にしか分からない事もあります。
面白いコメントタグ
<!-- どうもソースを見ていただきありがとうございます。 使えそうな部分がありましたら、どうぞお持ち帰りください！ 問題がある部分を見つけましたら、お手数ですがご連絡くださいませ。 https://www.kayac.com/contact/ -->
面白法人カヤックさんのページに記載されているコメントタグ。
このセンスが好きだなぁ。
