【HTML】初心者向け、Headタグとは？？
Headタグの使い方を数回に分けて、じっくりと説明していきます。HTMLの心臓部とも言えるHeadタグですが、駆け出しのうちから理解しておくといろいろと便利です。
<head>タグは、ウェブページの「頭脳」みたいなもの。見た目には直接関係ないけど、その裏でページの設定や動作をコントロールしています。
このタグを使ってどうページをカスタマイズできるのか、数回に分けて、実践的に学んでいきますよ！
headタグとは？
<head>タグは、HTML文書のヘッダー情報を格納するための要素です。このタグの中には、ページのタイトル、文字セット、スタイルシートへのリンク、スクリプトなど、ページそのものではなく、ページの設定や関連情報が含まれます。
このタグは、通常<html>タグと<body>タグと一緒に使われ、HTML文書の全体構造を形成します。
<!DOCTYPE html>
<html>
<head>
<!-- ここにヘッダー情報が入ります -->
</head>
<body>
<!-- ここにページの主要な内容が入ります -->
</body>
</html>
<head>タグが持つ情報は、ブラウザや検索エンジンにとって非常に重要です。
例えば、検索エンジンは<meta>タグ内のキーワードや説明文を使ってページの内容を理解し、ランキングに影響を与えることがあります。
それでは、次にこの<head>タグでできる主なことについて詳しく見ていきましょう。
headタグの主な機能
ハンズオンに進む前に、軽くheadタグの機能や特徴について覚えておきましょう。
1.ページタイトルの設定
<title>タグを使用して、ブラウザのタブに表示されるページのタイトルを設定します。
<head>
<title>マイページ</title>
</head>
2.メタデータの指定
<meta>タグでページの文字セットや作者、説明文などのメタデータを設定できます。
<head>
<meta charset="UTF-8">
<meta name="author" content="私">
<meta name="description" content="これはデモページです">
</head>
OGP（Open Graph Protocol）の設定
<meta>タグを使用してOGPの設定を行えます。
ブラウザやクローラー、SNSなどに共有した時に表示される説明など…このサイトがどのようなものかを自己紹介するものとして捉えるとわかりやすいかもしれません。
X(Twitter)を例にすると、特定のメタタグを設定することで、ツイート内でリンクがどのように表示されるかを制御できます。
※ ここを深掘りするとキリがないのでひとまず
<!-- Twitter共通設定 -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:url" content="ページのURL" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明（200文字以内）" />
<meta name="twitter:image" content="画像のURL" />
OGPに関する設定は、ページが多くの人々にシェアされる可能性がある場合、特に重要です。これはブランディングやマーケティングの観点からも非常に有用な機能です。
3.スタイルシートへのリンク
<link>タグで外部CSSファイルを読み込むことができます。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4.JavaScriptの埋め込み
<script>タグを使用してJavaScriptコードをページに埋め込むことができます。
<head>
<script src="script.js"></script>
</head>
以上のように、<head>タグ内にはページに関する多くの情報や設定が含まれます。これらはページがどのように動作し、見えるかを大きく影響します。