最終更新日:
公開日:
レシピ
設定
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)」より確認することができます。

こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。