meta要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

meta要素っていつ使うの?

ユキ
ユキ

ブラウザや検索エンジンに情報を伝えるために使うよ!

結論からいうと、meta要素はブラウザや検索エンジンに情報を伝えるために使います。

今回はlink要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: HTML5とは

html5

HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。

つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。

2: meta要素とは

meta要素とは、ブラウザや検索エンジンに情報を伝えるための要素です。

meta要素は文書メタデータで、ページに関する情報を表現します。
検索エンジンやブラウザに対する情報なので、実際に目には見えなくても内部的に重要な役目を果たしてくれます。
meta要素は様々な属性を組み合わせることによって効果を発揮します。
代表的なのは文字コードで、charset属性で表します。この属性はHTMLを作成する際に最も多く使われるものです。
この他にもメタデータの種類を示すname属性や、文書の処理の方法や扱いを指定するhttp-equiv属性などがあります。
これらのメタデータの属性を組み合わせることで効果的なSEO対策を施すことができます。

charset文字コードの指定
nameメタデータの種類を指定
http-equiv文書の処理方法を指定
contentneme属性やhttp-equiv属性と併用する。メタデータを指定。

3: meta要素の使い方

<head> <meta charset="UTF-8"> <meta name="author" content="ユキ">
</head>

head要素内にmeta要素を指定します。

charset属性には文字化け対策のためにUTF-8を指定します。
name属性にはHTML文書の著作者の名前を表すauthorを指定します。content属性にはauthorのメタデータとして自身の名前であるユキを指定します。

まとめ

今回はmeta要素についてと使い方について解説しました。

meta要素はブラウザや検索エンジンに情報を伝えるための要素で、縁の下の力持ちとしての役割を果たしてくれます。SEO対策としても重要な要素なので使いこなせるようなりましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!