misaこんにちは、ウェブデザインパレットのmisaです。
今回は、HTMLのheadタグ内の書き方について解説します。
headタグは、HTML文書の冒頭に記述される要素で、そのページに関する情報を記述する領域です。
ページのタイトル、説明文などページに関する情報を設定したり、外部ファイルの読み込みをおこなったり、SEOやソーシャルメディア対応にも重要です。
コピペで使えるheadタグ内のコードを用意したので、ぜひご利用ください。
ひとつひとつのコードについても詳しく解説していきます。
【コピペで使える】headタグ内に書くべき要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="ディスクリプションを入力">
<!-- OGP設定 -->
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像のURL">
<!-- ファビコン -->
<link rel="icon" href="favicon.ico" sizes="48x48">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script src="main.js"></script>
</head>
<body>～</body>
</html>詳しく解説していきますね。
headタグとは？
HTMLのheadタグは、Webページの頭部にあたる部分で、そのページに関するメタデータ（ページの説明や設定情報など）を記述する領域です。このタグの中に含まれる情報は、ユーザーが直接見ることはできませんが、Webページの表示や動作、検索エンジンのインデックス付け、ソーシャルメディアでの共有時の情報表示などに影響を与えます。
メタデータとは？
メタデータとは、データに関するデータのことです。Webページのメタデータには、ページのタイトル、説明文、キーワード、文字コード、スタイルシートのリンク先など、ブラウザや検索エンジンに情報を伝えるための様々な情報が含まれます。
headタグの主な役割
メタデータの提供
ページのタイトル、文字エンコーディング、ページの説明など、ページに関する情報を指定します。
外部リソースの読み込み
外部のCSSファイルやJavaScriptファイル、フォント、アイコンなどをリンクし、ページのデザインや機能を拡張します。
SEOやソーシャルメディア対応
検索エンジンにページを最適にインデックス付けさせたり、SNSでのシェア時に適切な情報を表示させたりするための設定を行います。
misaheadタグ内をしっかり記述することで、検索エンジンにページの内容を正しく理解してもらうことができます。
headタグの構成
DOCTYPE（ドックタイプ）宣言
<!DOCTYPE html><!DOCTYPEhtml>はDOCTYPE（ドックタイプ）宣言と呼ばれ、ブラウザに対してHTMLのバージョンやルールを指定する宣言です。HTMLファイルの一番初めに記載します。
htmlタグ
<html lang="ja"> ～ </html>コード全体をhtmlタグで囲みます。これはHTMLの文書であるということを表していて、HTMLファイルを作成するときには必ず書きます。
lang属性を設定することで、HTML文書全体がどの言語で書かれているかを指定します。｢ja｣は日本語を意味します。
文字コードの指定
<meta charset="UTF-8">HTMLファイルの文字エンコーディングを指定するためのタグです。
ブラウザに「このページの文字コードはUTF-8です」と伝えることができます。これにより、ブラウザはページ内の文字を正しく解釈し、表示することが可能になります。
指定していないと文字化けが発生してしまうことがあるので、必ず記述するようにしましょう。
サイトタイトル
<title>サイトタイトル</title>Webページのタイトルを指定します。
ブラウザのタブに表示されるほか、検索エンジンでの表示にも使用されます。
ビューポートの指定
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTMLファイルが表示されるデバイスのビューポート（表示領域）を設定するためのタグです。
特に、モバイルデバイスでのページ表示を最適化するために重要です。この設定がなければ、ページが小さく表示されたり、横スクロールが必要になったりと、ユーザビリティが悪くなってしまいます。
レスポンシブWebデザインのWebサイトでは、必ず記述するようにしましょう。
自動リンクの無効化
<meta name="format-detection" content="telephone=no">このメタタグは、スマートフォンやモバイルブラウザで電話番号を自動的にリンク化する機能を無効にするためのものです。
多くのスマートフォンやモバイルブラウザは、ページ内の電話番号を自動的に認識し、タップするとその番号に電話をかけられるようにリンク化します。しかし、ページ内の電話番号以外の数字列（注文番号、IPアドレスなど）も誤って電話番号と判断し、自動的にリンク化してしまう場合があります。
このタグを記述することで、ブラウザに対して電話番号の自動リンク化を行わないように指示します。
メタディスクリプション
<meta name="description" content="ディスクリプションを入力">メタディスクリプションは検索エンジンにページの内容を説明するための要素です。
このタグ内に記述されたテキストは、検索エンジンの検索結果に表示されるページの説明文として利用されます。
ページのキーワードを自然に盛り込むことで、検索エンジンにページの内容をより正確に伝えることができます。
ユーザーがページの内容を判断する際の指標となるため、魅力的で関連性のある説明を書くことが重要です。
OGP設定
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像のURL">OGP（Open Graph Protocol）とは、FacebookやXなどのSNSでWebページのURLを共有した際に、ページのタイトル、画像、説明文などを自動的に表示させるための仕組みです。
サムネイル画像やタイトル、説明文が適切に設定されていると、SNSでのシェア時に視覚的に魅力的な投稿が作成され、リンクのクリック率が向上する可能性があります。
WordPressの場合はプラグインで設定することも可能です。
各タグの説明
<meta property="og:url" content="ページのURL">:- ページのURLを指定します。シェアされたリンクがこのURLに関連付けられます。通常、ページの正規URLを指定します。
- 例:
https://web-design-pallet.site/
<meta property="og:type" content="ページの種類">:- ページの種類を指定します。一般的な値には
website（通常のウェブページ）やarticle（記事）などがあります。これにより、ソーシャルメディアプラットフォームがページのコンテンツを適切に解釈します。 - 例:
article,website
- ページの種類を指定します。一般的な値には
<meta property="og:title" content="ページのタイトル">:- シェアされたときに表示されるページのタイトルを指定します。このタイトルは、ユーザーがリンクをクリックするかどうかを判断する際に重要です。
- 例:
「HTMLとCSSの基本を学ぶ」
<meta property="og:description" content="ページの説明文">:- シェアされたときに表示されるページの説明文を指定します。この説明は、タイトルと一緒に表示され、ページの内容を簡潔に伝える役割を果たします。
- 例:
「このページでは、HTMLとCSSの基本的な使い方について学ぶことができます。」
<meta property="og:site_name" content="サイト名">:- サイト全体の名前を指定します。例えば、ページがブログやニュースサイトの一部である場合、このタグによりそのサイト名が表示されます。
- 例:
「Web Design Pallet」
<meta property="og:image" content="サムネイル画像のURL">:- シェアされたときに表示されるサムネイル画像のURLを指定します。ビジュアル的な要素として、リンクがクリックされる可能性に大きく影響します。できるだけ高品質で関連性のある画像を指定します。
- 例:
https://web-design-pallet.site/images/thumbnail.jpg
ファビコン
<link rel="icon" href="favicon.ico" sizes="48x48">
<link rel="icon" href="favicon.svg" type="image/svg+xml">ファビコン（favicon）とは、ブラウザのタブ、アドレスバー、ブックマークバーなどに表示される小さなアイコンです。
ファビコンは、ウェブサイトの象徴的な存在です。複数のタブを開いている際や、お気に入りの中から目的のサイトを探したい時に、ファビコンがあると視覚的に分かりやすく、目的のサイトを見つけやすくなります。
上記の例では、SVGファイルとICOファイルの2種類を設定しています。
SVGファイルは、ベクター形式の画像なので、解像度に依存せず、さまざまなサイズで鮮明に表示されるという利点があります。ただし、一部のブラウザではサポートされていない可能性があるため、ICOファイルやPNGファイルなどの代替ファビコンも併用すると、すべてのユーザーに対応できるようになります。
なお、WordPressの場合は設定画面からサイトアイコンを設定することができます。
Webフォント
<!-- Google Fonts（例） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">Webフォントとは、ウェブサイト上で表示する文字のスタイルを自由にカスタマイズできる技術のことです。従来のシステムフォントに縛られず、個性的なフォントでデザインを表現できます。
Webフォントを使用する場合は、使用したいフォントの読み込みタグをhead内に記述します。
CSSファイル
<link rel="stylesheet" href="style.css">外部のスタイルシート（CSSファイル）を読み込むためのタグです。
JavaScriptファイル
<script src="main.js"></script>外部のJavaScriptファイルを読み込むためのタグです。
※ページをインデックスから除外したい場合
<meta name="robots" content="noindex,nofollow">サイトのメンテナンス中や、まだ公開する準備ができていないページなど、一時的にページを非公開にしたい場合にはこのタグを指定することで、検索エンジンに対してページをインデックスから除外して、リンクをたどらないように指示します。
misaインデックス登録したい場合に間違って指定しないように気をつけましょう。
まとめ
今回は、HTMLのheadタグ内の書き方について解説しました。
headタグは、ページの内容を説明し、ブラウザや検索エンジンに情報を伝えるために非常に重要な役割を果たしています。headタグを適切に記述することで、SEO対策、ユーザー体験の向上、そしてウェブサイト全体の品質向上に繋がります。
ご自身のWebサイトの目的に合わせて、必要な要素を記述するようにしましょう。
では、また～✨
