descriptionの使い方を覚える!【1分でわかるHTML編】

discriptionの解説HTML

こんにちはみっくです。

今回はHTMLのdescriptionについてのお話です。

みっく
みっく

この description ではページの説明文を定義できます♪

ディスクリプションとは

みっく
みっく

「 description ( ディスクリプション )」はmeta description(メタ ディスクリプション)とも言われページの説明文の事です。

html内のhead領域に<meta name=”description” content=”●●●”>の形で記述します。 ●●● にページの内容を記述します。

メモ

metaタグとは記事やコンテンツの情報を検索エンジンやブラウザに伝えるためのタグの事で様々な組み合わせがあります。

ディスクリプションの表示例

HTML

<head>
<meta name=”description” content=”パソコンインストラクター歴10年以上のみっくがパソコンのお悩みをズバっと解決!!ワード、エクセル、パワーポイント、MOS、イラストレーター、フォトショップ、HTML・CSS、ワードプレスなどの内容をこれまでの経験を元に解説します♪”>
</head>

<body>
<p>ディスクリプションは表示されるかな?</p>
</body>

ブラウザでの表示例

ディスクリプションは表示されるかな?

みっく
みっく

上の例のようにブラウザで見ても、headタグ内はWEBサイト上には直接表示されません。基本的にWEBサイト上に表示されるものは、bodyタグの中の情報のみとなります。

検索での表示例

descriptionのイメージ
みっく
みっく

検索の結果には上の図ように表示されます!ちなみに一行目はタイトルタグです。

タイトルタグをご確認したい方は、以下の記事を参考にお願い致します。

TITLEタグの解説HTML titleタグの使い方を覚える!【1分でわかるHTML編】

ディスクリプションのコツ

みっく
みっく

ページの内容を表すような文章を、120文字程度で設定するのがオススメです。

みっく
みっく

特に最初の50文字程度がスマートフォン・PC共に表示されますので、より大事な内容は文章の始めに集めるようにしてみましょう♪

さっぴー
さっぴー

中身を見たくなるような内容がよさそうですね!!

SEO

ディスクリプションはSEOとしても重要な項目です。

ディスクリプションの難易度

みっくのレビュー
難易度
 (1)

内容は検討する必要がありますが、記述としては難しくありませんので、難易度は★1レベルです。

みっぴー
みっぴー

内容は迷ってしまいそうですが、head領域に記述するという事ですね!

ディスクリプションの使用頻度

みっくのレビュー
使用頻度
 (5)

基本的にはすべてのWEBページに記述しますので 、使用頻度は5つレベルです。

さっぴー
さっぴー

ちなみに、description を設定しなかったら、どうなるのかな?

みっく
みっく

ページの内容の一部が自動的に抜粋されて表示されます。

ディスクリプションの重要度

みっくのレビュー
重要度
 (5)

description はページの内容をユーザーに知らせるためにも、SEOとしても大切な役割があります。重要度は★5つレベルです。

みっく
みっく

これはぜひ覚えましょう♪

まとめ

「description ( ディスクリプション )」はmeta description(メタ ディスクリプション)とも言われページの説明文の事です。

html内のhead領域に<meta name=”description” content=”●●●”>の形で記述します。

WEBサイト上には表示されませんが、検索の結果には表示されます。

ページの内容を表すような文章を、120文字程度で設定するのがオススメです。

特に最初の50文字程度がスマートフォン・PC共に表示されますので、 重要です。

内容は検討する必要がありますが、記述としては難しくありませんので、難易度は★1レベルです。

基本的にはすべてのWEBページで使用しますので 、使用頻度は5つレベルです。

description はページの内容をユーザーに知らせるためにも、SEOとしても大切な役割があります。重要度は★5つレベルです。

みっく
みっく

ぜひページ毎にユニークなディスクリプションを設定しましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です