2023-04-23

headタグの中に記述すべき内容まとめ

HTML5に関する記事

Webページを作成する際に不可欠なheadタグ。今回はheadタグの一般的な記述内容、中身となる要素について解説します。headタグの記述内容はSEO対策にも関係するので、ポイントを一通り押さえておきましょう。

headタグとは

headタグはHTML文書内のメタデータを含む要素を定義するために使用されます。メタデータとは、文書の情報であり、Webブラウザーなどのアプリケーションに表示されることはありませんが、文書を処理する際に役立ちます。

下記は簡単なHTMLコードで、<head>で囲まれた部分がheadタグの中身です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- headタグ ページに表示されない ここから-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="description" content="ページの説明">
    <!-- headタグ ページに表示されない ここまで-->
</head>
<body>
    <!-- bodyタグ ページに表示される ここから-->
    ようこそ、WEBページへ。
    <!-- bodyタグ ページに表示される ここまで-->
</body>
</html>

htmlページはhead部分とbody部分から成り立っています。htmlタグの内容として、bodyタグより前に記述します。また、headタグはページごとに1つのみで、複数記述することはありません。

WEBページにアクセスしたユーザが見ている(見える)のは<body>タグで囲まれた部分で、<head>で囲まれた部分はユーザに表示されません。

スポンサーリンク

headタグに記述する内容

headタグに記述する内容を説明します。下記の記述はすべて必須という訳ではありません。ページのコンテンツに合わせて必要なものを記述しましょう。

文字コード

<meta charset="utf-8">

ブラウザは、Webページをダウンロードするときに、HTTPヘッダーまたはhtmlの<meta>要素で指定された文字コードを認識し、ページ内の文字をデコードします。文字コードをutf-8で指定、明示することにより、Webページのテキストを正しくブラウザに表示することができます。

昨今では、文字コードにutf-8が使用されることが一般的なので、charsetにutf-8を記載していますが、正確にはページ自体の文字コードを指定する必要があります。ページ自体がShift-jisで作成されているのであれば、charsetにはShift-jisを指定しましょう。昔に作成されたページであれば、utf-8以外の文字コードで作成されている場合も考えられます。

タイトル

<title>【ページのタイトル】</title>

title要素は、ページのタイトルを定義するために使用されます。Webページのタイトルは、Webブラウザのタブに表示されるテキストや、検索エンジンの検索結果ページに表示されるリンクのテキストなどに利用されます。Webページのコンテンツを要約し、読者にページの内容を簡単に伝える重要な要素であるとともに、SEOにも重要です。

検索エンジンは、Webページのタイトルを重視し、Webページの内容を理解するための重要な情報源として扱います。つまり、Webページのタイトルが適切である場合、検索エンジンがページ内のコンテンツを適切に認識しできるので、検索結果の改善にも重要な関係があると言えます。

※検索結果で表示されるリンクテキストと必ずしも一致するわけではなく、Googleなど検索エンジンがページのコンテンツを判断し最適なタイトルを表示することがあります。

ディスクリプション

<meta name="description" content="【ページの内容を説明する文章】">

metaタグのdescriptionは、Webページの概要を記述するために使用されます。

上記のように、metaタグのdescriptionは、name属性に”description”を指定し、そのcontent属性にWebページの概要を指定します。文字数は、140から160文字程度に収めることが推奨されています。

descriptionは、検索エンジンに表示されるサマリーに利用されたり、検索エンジンの検索結果ページに表示されることがあります。SEOに直接は関係ないといわれています。

関連記事：https://dailyhackon.com/php-description/

デバイスによる表示の最適化(viewport)

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewportの設定によって、モバイル端末でもページが適切に表示されるようになります。文字サイズやレイアウトが最適化され、ユーザーがページを閲覧しやすくなります。

上記のように、metaタグのname属性に”viewport”を指定し、content属性にviewportの設定を指定します。この例では、”width=device-width”はデバイスの幅に合わせて幅を設定し、”initial-scale=1.0″はビューポートの初期倍率を1倍に設定しています。

さらに細かい設定ができるのですが、上記の記述が基本となります。

URLの正規化(canonical)

<link rel="canonical" href="【https://example.com/統一させたいURL】">

PC:https://example.com/test/
↑ページの内容が全く同じ場合に、URLを上記ひとつに統一させる
(スマホページのhead内にPCサイトのURLを記述)
スマホ:https://example.com/sp/test/

同一のコンテンツが複数のURLで運用されている場合に、独自性のないコンテンツとして評価が下げられてしまうことがあります。URLの正規化(canonical)は、コンテンツを統一して評価させるよう明示することで、ページランクが分散してしまうことを防ぐ手法です。

クローラーの制御

<meta name="robots" content="noindex, nofollow">

metaタグのrobots属性は、検索エンジンに対してWebページのインデックス化の可否や、クロール方法に関する情報を提供するために使用されます。

上記の指定を行うと、検索エンジンのインデックス化から除外され、リンク先のページへのクロールも行われなくなります。なお、robots属性は必須ではありませんが一般的に使用されます。

OGPタグの設定

<meta property="og:title" content="【ページのタイトル】">
<meta property="og:type" content="【website】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【画像のURL】">
<meta property="og:description" content="【ページの説明】">

OGP(Open Graph Protocol)は、SNS等でWebページが共有された際に表示されるプレビュー情報を指定するためのメタデータを定義するプロトコルです。上記は、基本的なOGPメタタグの例です。

  • og:title: ページのタイトルを指定します。
  • og:type: ページの種類を指定します。一般的には、websiteやarticleなどが使われます。
  • og:url: ページのURLを指定します。
  • og:image: ページのプレビュー画像のURLを指定します。
  • og:description: ページの説明を指定します。

これらのメタタグを指定することで、FacebookやTwitterなどのSNSや、リンクをシェアする際に、タイトルや画像、説明が表示されるようになります。また、og:typeを指定することで、Facebookなどのサイトで、ページの種類に合わせた適切な表示形式が使用されます。

例えば、ブログなどの記事ページの場合はog:typeにarticleを指定することで、Facebookなどのサイトで記事用の表示形式が使われるようになります。

Twitterカードの設定

<meta name="twitter:card" content="【summary】">
<meta name="twitter:title" content="【ページのタイトル】">
<meta name="twitter:description" content="【ページの説明】">
<meta name="twitter:image" content="【画像のURL】">

Twitterカードは、Twitterでリンクを投稿するときに表示されるプレビュー情報を指定するための仕組みです。

  • twitter:card: カードのタイプを指定します。summary、summary_large_image、app、playerのいずれかを指定します。
  • twitter:title: カードに表示するタイトルを指定します。
  • twitter:description: カードに表示する説明文を指定します。
  • twitter:image: カードに表示する画像のURLを指定します。画像サイズは、最低でも120px x 120pxである必要があります。

JavaScriptやCSSなどの外部ファイルの読込み

<script src="【JavaScriptファイルの場所】"></script>
<link rel="stylesheet" href="【CSSファイルの場所】" />

JavaScriptやCSSを外部ファイルとして記述している場合は、ファイルを読み込む必要があります。headタグ内出なくても動作しますが、まとめてheadタグ内に記述するのがシンプルで高い保守性を維持できると思います。

<link rel="icon" href="favicon.ico">

ルートディレクトリにファビコンファイルを置く場合は、上記コードを記述しなくてもブラウザが自動でアイコンファイルfavicon.icoを読み込んでくれます。

<link rel="apple-touch-icon-precomposed" href="【画像のURL】">

スマホやタブレットでページを「ホーム画面に追加」したときに表示されるアイコンです。指定しなければページを元に自動で作成、表示されます。

特に記述する必要がないタグ

<meta name=”keywords” content=”【キーワード】”>

過去にはSEO対策の上で、重要視されていたこともありましたが、現在は検索順位に関係ないため記述不要です。

<meta name="author" content="【...】">

著者情報を明示する場合、author属性を使用することで、ページの信頼性や信頼度を高めることができます。SEO対策上は効果がないので気にする必要はありません。

まとめ

記述内容やそれぞれの重要度は変化し続けます。記事内でmetaキーワードがSEOに関係ないという説明をしましたが、その話を初めて聞いた時は信じられませんでした。metaキーワードは非常に重要視されていたためです。そういった変化に対応するため、常に情報をキャッチアップしてゆく必要があると改めて感じました。

headタグは、HTML文書のメタデータを含む重要な要素であり、SEOに直接的な影響を与える要素の一つです。適切に設定されたheadタグは、検索順位にも影響があり確かに重要です。コンテンツに合わせた記述ができるよう、理解しておきましょう。