htmlのheadタグについて理解します。
目次
headタグとは
基本的にはサイトの情報を記載します。ブラウザ画面に表示されることはないです。
サイト情報
サイトの情報はmetaタグに記載します。
metaタグはサイトの情報だけでなく用途は様々です。主に以下の用途で使用します。
説明(description)
ページ(画面)についての説明を指定します。
説明の内容はブラウザ画面に表示されません。
googleなどの検索エンジンから検索された結果の一覧画面に説明の内容が表示されます。
具体的には、metaタグのname属性にdescriptionを指定した際のcontent属性の値が表示されます。
<meta name="description" content="会社サイトのHPです。">検索キーワード(keywords)
検索エンジンから検索させたいキーワードを指定します。
キーワードもブラウザ画面に表示されません。
具体的には、metaタグのname属性にkeywordsを指定した際のcontent属性の内容がキーワードとなります。
<meta name="keywords" content="it,システム、system,エンジニア">文字コード
htmlで表示する文字コードを指定します。
とりあえずutf-8で設定すると覚えておきましょう。
文字コードを指定しないと文字化けします。
<meta charset="utf-8">自動リンクの制御
電話番号、メールアドレス、住所はスマートフォンやタブレットでは自動的にリンクとなる場合があります。
このリンクを解除することが出来ます。
具体的には以下のように設定します。
<meta name="format-detection" content="telephone=no,address=no,email=no">viewポート
viewポートについてはここでは詳しく記載しません。後に説明します。今はviewポートの指定ができると覚えておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1">タイトル
サイトのタイトルが設定できます。
タイトルはブラウザのタブに表示されます。
<title>会社のサイト</title>カノニカル
サイトにアクセスする場合、以下のように複数のアクセス方法が存在することがあります。
http://sample.com
http://www.sample.com
http://www.sample.com/index.htmlこの場合、同じサイトなのに検索エンジンからはそれぞれ別のサイトだと思われてしまいます。
なので、同じサイトであることを証明する必要があります。
このように、サイトへのアクセス方法が複数ある場合に同一のサイトであること証明する際にカノニカルを指定します。
具体的には以下のように設定します。
<link rel="canonical" href="https://sample.com">スタイル読み込み
htmlのスタイルを読み込みます。主にcssファイルの読み込みを行います。
cssについては、css入門を参照して下さい。
以下に例を記載します。
test.cssというスタイルシートを読み込んでいます。
<link rel="stylesheet" href="test.css" type="text/css">最後に
今までの内容をまとめたサンプルを以下に記載します。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="description" content="会社サイトのHPです。">
<meta name="keywords" content="it,システム、system,エンジニア">
<title>test</title>
<link rel="canonical" href="https://sample.com">
<link rel="stylesheet" href="test.css" type="text/css">
</head>headタグに何を指定するかは各サイトにより異なります。
次回はweb画面の内容を記述する bodyタグについて説明します。
▼ HTMLに関する記事の一覧をみる