見出し画像

忘れてしまいそうなhead要素についてもう一度確認してみよう！

Wajin

head要素とは

head要素はそのページの情報（メタ・データ）を表すタグです。

Webサイトの運用をするにあたっても、新規ページを作るにしても一度書くと何となく内容が曖昧になって忘れがちになるhead要素です。
実際はかなり重要なんだろうと思ってます（かなり重要です）

なぜ忘れがちなの？

新規・運用にあたってどうしてもbody要素内のほうがメインなってくるのです。
現在Web制作はページを動的に出力するものが多く1度設定すると運用にあたってはそれ以降ほぼ触らないことがあります。
新規ページも似たようなページをコピーして必要な部分だけ書き直すといったことが多くなっています。

自分は、<head>要素を手打ちでコーディングするのは無理かなと思ってます・・・（す、すみません）

何の要素が入るの？

head要素にはページの情報が入ります！！SEO対策でも力を発揮するhead内要素です！
では主にどのようなものがあるのでしょうか。

  • <title>：ページのタイトルを定義します。ブラウザのタブに表示されたり、検索結果に表示されたりします。

  • <meta>：ページに関するメタ情報を提供します。例えば、文字コード、キーワード、説明文、作者、ビューポートの設定などです。

  • <link>：ページ内に外部ファイルを読み込むために使用されます。CSSファイルやファビコン、JavaScriptファイルなどを読み込むことができます。

  • <style>：ページ内でスタイルを定義するために使用されます。CSSのスタイルを記述し、HTMLの要素に適用することができます。

  • <script>：JavaScriptコードをHTMLページに埋め込むために使用されます。

  • <base>：相対URLの解決に使用されます。href属性を持つ他のタグに影響を与えます。

metaタグの属性には多くの種類があるので、かなり多くmetaを書くことがあります。

テンプレート

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明文">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SNS用 -->
  <meta property="og:url" content="サイトURL" />
  <meta property="og:type" content="website or article" />
  <meta property="og:title" content="サイト名" />
  <meta property="og:description" content="ページのディスクリプション" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:image" content="サムネイル画像のURL" />
  <!-- SNS用 -->
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- ここにページのコンテンツを記述する -->
</body>
</html>

おわりに

忘れながちだけど、大切なhead要素ここはしっかり覚えるようにしましょう。一昔前はキーワードなどもあったのですが、時代の流れとともに無意味な設定になってしまいました。
とはいえ、今後どのような変更があるかわからないので、HTMLのバージョンが上がるたびにチェックしていけると良いですね！

この記事が気に入ったらサポートをしてみませんか？