htmlで実装する際、毎回思い出す作業から始まるhead内のタグ。
実はどのようなサイトであってもほぼ共通のため、コピペしてしまっても案外大丈夫だったりします。
ですが、思わぬトラブルを防ぐためにも、head内にいれるべきタグとその意味をまとめていきたいと思います。
headタグの前に入れるべきタグ
さっそくhead内のタグについて説明ていきたいところですが、headタグよりも前に必ずいれるべきタグをご紹介します。
htmlの宣言文
htmlを勉強すると最初に必ず覚えるであろう宣言文、DOCTYPE(ドックタイプ)宣言。私が覚えた当時よりも進化し（HTML5現在）、かなり省略化されています。
| <!DOCTYPE html> |
DOCTYPE(ドックタイプ)宣言は、htmlのバージョンをインターネットブラウザに伝えるために必要です。最近の主流はHTML5のため、それを宣言しているのが上記になります。ちなみに、厳密に言うと<>で囲われていますがタグではありません。
宣言文はHTMLファイルの1番最初の行に記述し、この1行だけで完結します。
html要素
DOCTYPE宣言の次に書くのが、html要素です。HTMLファイルの中で1番外側にあたる要素で、こちらはタグのため最後に必ず終了タグを付けます。終了タグは基本的にはfooter部分に入ることになるかと思います。
| <html>〜</html> |
headタグ内はサイト情報を埋め込む重要な部分
htmlの宣言文とhtmlタグを入れたら、次はいよいよheadタグを書き込んでいきます。
| <head>〜</head> |
headはWEBブラウザや検索エンジンクローラーにサイトの情報を伝える重要な部分で、head内に書き込んだファイルは、ページタイトルを除きサイト上に表示されることはありません。
head内に入れるべきタグ一覧
head内に入れるべきタグは、主にmetaタグとlinkタグです。
文字のエンコード
| <meta charset=”utf-8″> |
文字のエンコードです。文字コードを指定するためのもので、日本語サイトの場合は必ず書きましょう。
viewport設定
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
レシポンシブデザインを作成するために必須になります。
viewportは表示領域のことで、「width=device-width」を記述すると、表示領域の幅をPCやスマホなどの端末画面の幅に合わせられるようになります。
タイトルタグ
| <title>ページタイトル</title> |
検索結果やブラウザのタブに表示されるため、必ず入れましょう。
ちなみに私は、phpで以下のように書いています。
| <?php get_template_part(‘template/page-title’); ?> |
メタディスクリプション
| <meta name=”description” content=”ページの説明” /> |
ページの説明文を記入するタグです。指定した文章は検索結果のタイトル下に表示される可能性があるため、流入を増やすためにも重要なタグになります。
wordpressでサイトを構築する際は、プラグインを利用するなどhead内にタグが必要ではない場合もあります。
Google Fonts
| <link rel=”preconnect” href=”https://fonts.googleapis.com”> 〜 |
Google Fontsを使用する場合に入れるタグです。Google Fontsのサイトから入手できます。Google Fontsは商用でも無料で利用することが可能です。
フォントの表示が閲覧者の端末に依存せず、デザインしたとおりのテキスト表示が可能になるため、WEBフォントの使用はおすすめです。
URLの正規化
| <link rel=”canonical” href=”正規化するURL”> |
canonical（カノニカル）タグは、重複・類似コンテンツの解消に必要なタグです。
たとえば、ページのURLがPCとスマホで異なるなど、やむを得ない事情で重複・類似コンテンツが発生する場合があります。重複すると、検索エンジンからの評価が分散してしまったり、コピーコンテンツとみなされて評価が下がる恐れがあります。
canonicalタグを使用し、特定のURLに統一することにより、クローラーに対して最も重要なURLであることを伝えることができます。
ファビコン（サイトのアイコン）の設定
<link rel="icon" href=" |
ブラウザタブの左端に表示されるアイコンの設定です。各ブラウザのファビコンサイズは、16×16pxが一般的なサイズですが、表示される場所によっては表示サイズが大きい場合もあるため、32px×32px程度の大きさで作成するのがおすすめです。
尚、wordpressで作成する場合は、512px×512pxのPNG形式ファイルを作成すれば全てに対応してくれるようなっています。（バージョン4.3以降）
OGPタグ
<meta property="og:url" content="ページのURL" /> <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ"> <meta property="og:description" content="記事の抜粋文" /> <meta property="og:image" content="画像のURL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:locale" content="ja_JP" /><!– twitter –> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザー名" /> <!– facebook –><meta property="fb:app_id" content="appIDを入力" /> |
facebookやtwitterなどのソーシャルメディアでシェアされたときの表示設定です。URLを共有した際に設定した画像やタイトルなどが表示されるため、流入を増やすためにも必ず設定を行いましょう。
CSSファイルの読み込み
| <link rel=”stylesheet” href=”CSSファイルのURL” /> |
外部のスタイルシート（CSS）を読み込むためのタグです。
JavaScriptファイルの読み込み
| <script src=”JavaScriptファイルのURL”></script> |
script は、実行できるコードやデータを埋め込むためのタグで、主にJavaScript のコードの埋め込みや参照に使用されます。
ちなみに私は、このコードを書き忘れたことによって、ポップアップウィンドウがまったく動かず対処に相当の時間をかけてしまった苦い経験があります。
その他、必要に応じてhead内に記述するタグ
基本的には上記で挙げたタグを入力していれば問題ないと思いますが、その他必要に応じてhead内にタグを書き込むケースがあります。
たとえば、Googleアナリティクスやタグマネージャー、facebook広告を使用する場合などに、head内にコードを追加する必要があります。
満を持して、コピペしてみよう！
それでは、それぞれのタグの意味を理解したところで、以下head内にコピペをしてみましょう。
| <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link rel=”preconnect” href=”https://fonts.googleapis.com”> 〜 <link rel=”canonical” href=”正規化するURL”> <title>ページタイトル</title> <meta name=”description” content=”ページの説明” /> <link rel="icon" href="<link rel=”stylesheet” href=”CSSファイルのURL” /> <script src=”JavaScriptファイルのURL”></script> <!– OGP –> <meta property="og:url" content="ページのURL" /> <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ"> <meta property="og:description" content="記事の抜粋文" /> <meta property="og:image" content="画像のURL" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:locale" content="ja_JP" /><!– twitter –> <meta name="twitter:card" content="カード種類" /> <meta name="twitter:site" content="@Twitterユーザー名" /> <!– facebook –><meta property="fb:app_id" content="appIDを入力" /></head> |
不要なタグがある場合には、削除してご使用ください。
尚、私はwordpressでプラグインやphpを使用しながら実装しているため、タグは以下のようになります。
（googleフォントは、Noto Sans JPを使用）
| <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <?php get_template_part(‘template/page-title’); ?> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>”> <?php if( is_page()) { ?> <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’);?>/style_page.css” type=”text/css” /> <?php }?> <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=Noto+Sans+JP:wght@400;700&display=swap” rel=”stylesheet”> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script> <?php wp_head(); ?> </head> |
<?php wp_head(); ?>は、プラグインで設定したmeta情報などが出力されるタグです。
固定ページの場合、別のスタイルシートを読み込みたいため、PHPを使って出し分けを設定しています。
自分のスタイルを見つけよう
head内には必須タグの他に、推奨される任意のタグも複数存在します。
一度実装してみると、自身がしっくりくるスタイルがきっと見つかると思いますので、ぜひ自分用のコピペhead内タグを作ってみてください。
この記事を書いた人
くまこ
DTP/WEBのぽんこつデザイナー。ほぼ独学からスタートしています。難しい言葉が苦手なので、自分のためにざっくりと分かりやすく纏めています。
