HTMLページの説明文（概要）を設定する

HTMLページに説明文を設定する理由と、設定方法をコードを使って具体的に解説します。

この記事のポイント

ページの説明文を設定するメリットが分かる
説明文の設定方法と、ちょうど良い長さが分かる

HTMLページの説明文とは？

HTMLページの説明文は、一言にまとめると「ページに書いてある内容が一目でわかる概要」です。
Googleなどの検索結果ページでも表示されるため、SEOの基本としても知られている大事なテキストです。

Googleの検索結果ではページタイトルの下に、ページの説明文として表示されます。
検索をした人はタイトルと説明文を読んで「欲しい情報が書かれているか」を判断していることが多いため、非常に重要な要素になります。

HTMLページに文字コードを設定する

設定はmeta要素の「description」を使います。

index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="ページ説明文のサンプルテキスト">
	<title>サンプルコード</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>文字コードの設定</h1>
	<p class="text1">ページに文字コードを設定する</p>
	<div class="footer">Copyright© GRAYCODE.</div>
</body>
</html>

説明文の長さは124文字以内とされ、それ以上長くなると省略されてしまいます。
あまり短すぎても良くなく、60〜100文字程度がちょうど良い長さとされています。

また、同一サイト内で他ページの説明文と重複してはいけません。
必ず各ページでオリジナルの説明文を設定しましょう。

Googleの「Search Console」では、説明文の長さに問題があるページを確認することができます。
「検索での見え方」の「HTMLの改善」を開き、「メタデータ（descriptions）」より確認することができます。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。