コーディングの学習をしていて、どうしても後回しにしがちなのがheadタグ内のコード。
しかし実はとても重要な内容を記述する部分で、SEOにも影響を及ぼすものでもあるのでしっかりと覚えておきたいところです。
- headタグ内に記述するタグはなにか？
- SEO的にも不可欠なタグはなにか？
- 表示にも影響する！？必須タグはなにか？
Googleでは、 サイトのページを検索結果にどう表示するかを決める際の判断材料 にメタタグをサポートしています。
googleがサポートしている特別なタグ
headタグとbodyタグ
bodyタグ内にはウェブサイトに表示される部分を記述する部分であり、コーディングの学習を行っている人はどうしてもこちらを優先しがちです。
対して headタグ内の記述はhtmlファイルの情報を宣言し、検索エンジンやブラウザが理解するために記述するものであり、直接的にウェブサイトの表示されるものではありません。 headタグ内の記述内容はページに関する付加情報（メタデータ）や表示に必要な設定を行います。
しかしSEO的には重要な部分であるため、しっかりと学習しておきたいところです。
ウェブサイトは広告であり、集客できなければ意味がありません。もちろんデザインやコンテンツも重要ですが、SEO対策の一歩としてheadタグ内の内容も理解しておきましょう。
一度覚えて記述しておけば、あとはサイトごとに一部修正するだけなので、すぐに対応できます。
Webデザイナーとしてはしっかりと押さえておきたい部分なので、理解しておきましょう！！
記述重要タグ
headタグ内に記述できるタグはたくさんあり、何を記述したらよいかわからないと思いますので、絶対に記述すべき重要タグから説明していきます。とりあえずここだけ抑えておけば最低限大丈夫です。
titleタグ
<title>サイトやページのタイトル</title>titleタグは記述必須のタグです。例外で省略することもできますが、必ず記述するようにしましょう。
metaタグ
metaタグはname属性を使用して、色々なメタデータを示すために設定しますが、かなりの数があり、初めて見る方は混乱すると思いますが、本当に必要なモノは限られているので、しっかりと記述するようにしましょう！
charsetでエンコードの種類を指定
<meta charset="UTF-8">サイトで表示される文字の種類を指定します。日本語であれば、「UTF-8」
指定しないと、文字化けしてしまいます。
titleタグで記述した文字が文字化けしないように、titleタグより前に記述する事
name=”description”でページの概要を指定
<meta name="description" content="記事の紹介文を記述します">SEO対策としても重要な指定。検索結果で表示されるウェブサイトの紹介文を記述します。
content属性を使用して、ウェブサイト・ページの紹介文を記述します。ページの概要がわかる文章を記述しましょう。
ほとんどの検索エンジンでは、検索結果で表示される概要は最大160文字なので、文章が全て表示されるように160文字以内で記述しましょう。
name=”viewport”でモバイルのビューポートを設定
<meta name="viewport" content="width=device-width, initial-scale=1">モバイルデバイスに合わせた表示（レスポンシブ）をするための指定。レスポンシブ対応は今や必須となりますので、必ず記述するようにしましょう。
これで、Googleの検索エンジンにモバイル対応のページであると判定されます。
name=”robots”で検索エンジンのロボットへの指示
<meta name="robots" content="noindex, nofollow">検索エンジンのロボットに指示する内容を記述します。
content属性で指示する内容を記述します。
| noindex | ページを検索結果に表示しない（インデックス登録しない） |
| nofollow | ページ内のリンクを追跡しない |
検索結果に表示してほしくない、リンクを追跡してほしくないページなどに記述します。普通に表示してほしいページには記述しないでください。
name=”format-detection”で自動リンクをオフ
<meta name="format-detaction" content="telephone=no">iOSでは電話番号やemailアドレス、住所をサイト内で見つけると、自動でリンクを付ける便利な機能がありますが、不要なリンクを付けられてしまうことがあるので、必ず記述しておきましょう。
その上で、リンクを付けたい電話番号やemailアドレス、住所にはhtmlでaタグを指定し、CSSでテキストのスタイルを記述します。
| telephone=no | 電話番号に自動リンクを付けない |
| email=no | emailアドレスに自動リンクを付けない |
| address=no | 住所に自動リンクを付けない |
http-equiv=”X-UA-Compatible”でIEのレンダリングで指定
<meta http-equiv="X-UA-Compatible" content="IE-edge">IE（Internet Explore)には互換表示機能があり、古いバージョンのIEで表示することが出来ます。しかしこの互換表示機能を設定していると、HTML5で作成したサイトはレイアウト崩れを起こしてしまいます。
この記述をすることで、最新の標準規格で表示することが出来るため、レイアウト崩れを起こさずに表示されます。
OGPタグでSNSでのウェブサイト情報を明示
property属性を使用し、明示する情報を指定します。SNSでページを紹介したり、シェアした時に使用されます。
OGPで何を表示したいかを指定して、
<meta property="og:site_name" content="サイト名">
<meta property="og:local" content="言語の種類">
<meta property="og:type" content="コンテンツの種類">
<meta property="og:title" content="タイトル">
<meta property="og:url" content="URL">
<meta property="og:description" content="概要">
<meta property="og:image" content="画像のURLやパス"><meta property="fb:app_id" content="Facebookのid"<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@twitterユーザー名">コチラはname属性を使用するので、間違えないように注意してください。
linkタグ
linkタグはrel属性でリンクタイプを、href属性でURLを指定します。
rel=”canonical”で内容が重複するサイトの評価をまとめる
内容が同じページが、別のURLで存在していることはGoogleの評価を大きく下げます。canonicalを設定することで、設定したページはhrefに指定したURLのコピーだと示すことができ、評価をまとめることが出来ます。
当然のことですが、これは自サイト内での重複問題でのみ有効なものです。別のサイトと内容が同じものには適用されません。
rel=”stylesheet”で外部CSSスタイルシートを読み込む
CSSなどを記述した外部ファイルを、htmlに反映させるために記述します。
<link rel="stylesheet" href="cssファイルのURLやパス" type="MIMEタイプ" media="メディアクエリ" title="">hrefにはCSSのファイル名を記述しますが、パスを間違えないように注意しましょう。
rel=”icon”でアイコンを指定
<link rel="icon" type="image/ファイル形式" href="画像のURLやパス" sizes="〇〇×〇〇">
<link rel="apple-touch-icon" type="image/png" href="画像のURLやパス" sizes="〇〇×〇〇">
title横のアイコン
リンク時
ファビコンと呼ばれるアイコンの設定です。type属性のファイル形式はpngやgifなどです。jpg画像は使用しないようにしましょう。sizes属性でサイズを指定。pxは不要です。
scriptタグ
scriptタグはsrc属性で外部のスクリプト(JavaScriptなど)を指定するか、scriptタグ内にスクリプトソースを直接記述します。
<script type="text/javascript" src="ファイルのURLやパス"></script>
<script>スクリプトソースを記述</script>scriptタグにおいては、headタグ内だけでなく、bodyタグ内でも記述可能です。
linkタグに似ていますが、ファイルのURLやパスの指定はsrc属性を使用し、また閉じタグがあるので注意しましょう！
noscriptタグ
スクリプトが動作しない環境用の代替情報の表示を指定することが出来ます。scriptタグ同様headタグ内だけでなく、bodyタグ内でも記述できます。
まとめ
bodyタグ内のコーディングに時間を割いてきた人には、見慣れないタグばかりで最初は戸惑うかもしれませんが、重要なものは限られているので、一度覚えてしまえばそれほど難しくないと思います。
一部の内容を変更すれば、他はそのまま使えますので、試しに一度記述してみると良いでしょう。
SEO対策や表示にも影響する重要な部分になりますので、しっかりと記述するようにしましょう！！
コメント