ウェブエンジニア問題集
第9章

head・meta・SEOの基本 — titleとdescriptionを設定する

約4分
この章の目次開く

head には、ページ本文には直接表示されない情報を書きます。検索結果、ブラウザタブ、SNSシェア、モバイル表示などに関わるため、HTMLの中でも実務で重要な領域です。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML入門 — Webページの構造を学ぶ</title>
  <meta name="description" content="HTMLの基本構造、タグ、属性、アクセシビリティを学ぶ入門ページです。">
  <link rel="stylesheet" href="/styles.css">
</head>
html

head内要素のチートシート

タグ用途よく使う属性注意点
titleページタイトルなしページごとに固有にする
meta charset文字コードcharset基本は utf-8
meta name="viewport"モバイル表示contentレスポンシブ対応に必要
meta name="description"ページ概要content検索結果の説明に使われることがある
link rel="stylesheet"CSS読み込みhrefCSS本と接続する入口
link rel="icon"faviconhrefブラウザタブなどで使われる
meta property="og:*"SNS共有用情報property, contentOGP画像やタイトルを指定

title と description

title はページの名前です。ブラウザタブや検索結果のタイトル候補になります。

<title>お問い合わせ — Example Cafe</title>
html

description はページ内容を短く説明します。

<meta name="description" content="Example Cafeへのお問い合わせフォームです。営業時間やアクセスに関するご質問はこちらから送信できます。">
html
title と description は、全ページで同じ文言にせず、そのページ固有の内容にします。

OGPの基本

SNSで共有されたときの見え方を整えるには、Open Graph Protocolの meta を使います。

<meta property="og:title" content="HTML入門">
<meta property="og:description" content="HTMLの基本を学ぶ入門ページです。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html">
<meta property="og:image" content="https://example.com/ogp.png">
html

CSSとJavaScriptの読み込み

CSSは link、JavaScriptは script で読み込みます。

<link rel="stylesheet" href="/styles.css">
<script src="/main.js" defer></script>
html

defer を付けると、HTMLの解析を邪魔しにくい形でスクリプトを実行できます。詳しくはJavaScriptのDOM操作やCSS入門と合わせて学ぶと理解しやすいです。

よくあるミス

ミス問題修正
全ページ同じ titleページの違いが伝わらない固有のタイトルにする
description が長すぎる要点が伝わりにくい80〜120字程度を目安に要約
viewportなしスマホで縮小表示されるviewport metaを入れる
CSSを script で読む読み込み方法が違うlink rel="stylesheet"

参考リンク

次章では、アクセシビリティの基礎をHTMLの書き方から整理します。

HTMLクイズに挑戦するhead、meta、title、OGPの基本をクイズで確認しよう