2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

meta要素とは? 分かりやすく解説します!

meta要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.meta要素とは?

meta要素は、HTML文書の文字コードや概要、キーワードなど、HTML文書におけるさまざまなメタデータを表します。

つまり、meta要素は検索エンジンやブラウザにWebページの情報を伝えるHTMLタグのことです。

meta要素の記述箇所はWebページの「<head>~</head>」に囲われている範囲です。

基本的にユーザーは見ることができませんが、SEO観点でも重要な役割を担っています。




2.meta要素の使い方

それではmeta要素の使い方をみていきましょう。

文字コードを指定する

<meta charset="文字コード">

文字コードの指定が無い場合、Webページが文字化けしてしまうことがあります。

検索エンジンに適切に収集されないことがあるので、そのような事態を避けるためにも文字コードの指定を忘れないようにしましょう。

日本では、「UTF-8」、「Shift_JIS」、「EUC-JP」の3つがよく使われている文字コードです。

なお、HTMLでは「UTF-8」を使用することが推奨されています。

文書の著作者を記述する

<meta name="author" content="著作者">

上記のように記述することで「このWebページは誰々が作りました」という情報を表すことができます。

例えば、「<meta name=”author” content=”HTML&CSS辞典”>」と記述することで「このWebページはHTML&CSS辞典が作りました」と表すことができます。

文書の説明文を記述する

<meta name="description" content="説明文">

上記のように記述することで「このWebページはこのような内容です」と表すことができます。

この説明文は検索エンジンに読み取られ、検索結果にも表示されます。

文書のキーワードを記述する

<meta name="keywords" content="キーワード">

上記のように記述することで「このWebページのキーワードはこれです」と表すことができます。

content属性の値はカンマで区切り、複数のキーワードを入力できます。

スマートフォン向けの文書表示方法を指定する

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上記のように「width=device-width」と指定することで、端末の画面幅に合わせてWebページが表示されます。

同時にカンマで区切って「initial-scale=1.0」と記述することで倍率を1で指定しています。

クローラーのアクセスを制御する

<meta name="robots" content="noindex, nofollow">

上記のように記述することで検索エンジンのクローラーによるWebページへのアクセスを制御することができます。




コメントを残す

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