【HTMLのきほん】meta(description)要素ってなに？
記事IT・テクノロジー
こんにちは。LP専門コーダー Ui-Partner・おりです。
今日は、HTMLのきほんと題して、meta(description)要素についておさらいします。
meta(description)要素でWebページの内容を分かりやすくまとめておくことで、検索してきたユーザーにWebページの中身が正しく伝わります。
▼「meta要素」とは？
MDNでは下記のようにまとめられています。
<meta>: 文書レベルメタデータ要素
HTML の <meta> 要素は、他のメタ関連要素 (<base>, <link>, <script>, <style>, <title>) で表すことができない任意のメタデータを提示します。
要するに、「このHTML文書に関する情報」をmeta属性によって文書の中（Webページの表には出ない部分）に記録することができるということです。
今日のテーマである「description」以外にも様々な属性を用いてHTML文書の情報を記録することができます。
（例）
・charset属性：このWebページがどの文字コードを使用しているかを記載
・name属性：Webページの作者名や説明、ビューポートなどを記載できま
す。今日のテーマの「description」はname属性に含まれます。
▼meta(description)属性と検索エンジンでの結果表示
では、meta(description)属性はユーザーにどのような情報を伝えるのでしょうか。
Googleで「ココナラ」を検索すると下記のような画面が表示されます。
（ブラウザはGoogleChromeを使用）
このようにページタイトルの下にページの説明文が表示されています。
ここに表示される文章がmeta(description)属性に記載した内容です。
（ブラウザ等によってはページ内文章が表示されることもあります）
ココナラのdescriptionでは、ページの内容をこのようにまとめています。
知識・スキル・経験など、みんなの得意をサービスとして出品・購入できる日本最大級のスキルマーケット。仕事依頼の成約実績が420万件、業界プロ水準の出品も含めて出品サービス数は30万件。イラストやデザイン、動画の編集制作・各種相談依頼など、240種類の出品カテゴリからニーズに合わせて比較検討ください。
60字～120字でまとめるのがよいと言われています。
皆様のWebページにも、ぜひmeta(description)を設定してみてください。
