MENU

html文書の情報(メタデータ)を指定するmetaタグの使い方と主な属性まとめ

【PR】アフィリエイト広告リンクを含みます。

html文書の情報(メタデータ)を指定するのが、metaタグです。

SEO的に重要なdescription要素など、覚えておかなければいけない要素も目白押しです。

【WordPress】プラグイン無しでカスタムフィールドを利用してmeta keywordsとmeta descriptionを実装する

HTML5における属性の指定方法は別ページにて解説していますので、そちらもご参考にしていただければと思います。

htmlタグに属性を付与して要素の補足情報を記述するHTML5の書き方について

目次

metaタグの使い方と主な属性について

必ず<head>タグ内で<meta>タグを使う

<head>
    <meta name="description" content="検索エンジンでの説明文">
</head>

上記はname属性、content属性の指定(descriptionにより、検索エンジンに説明文を表示させる)ですが、metaタグは全てheadタグ内で指定を行います。

html要素として必要不可欠なheadタグとbodyタグの違いとは

name属性content属性を指定して、検索エンジンにキーワード・説明文・インデックス方法を伝える

<meta name="keyword" content="今は検索エンジンは利用していませんが、ページの表すキーワードを列挙する">
<meta name="description" content="検索エンジン上に表示される説明文を記述する">
<meta name="robots" content="noindex,follow">

name属性でキーワードは「keyword」、説明文は「description」、インデックス方法は「robots」を指定することで、検索エンジンに適切に情報を伝えることができます。

【WordPress】meta robotsをプラグイン無しで実装する方法

content属性は、name属性の内容を指定する属性になります。

charset属性文字エンコードを指定する

<meta charset="utf-8">

上記のように、charset属性で文字コードを指定することができます。(他にもshift_jisやeuc-jpも)

http-equiv属性文書の状態や言語、挙動を指定する

<meta http-equiv="content-language" content="ja">

今使うhttp-equiv属性と言えば、言語指定ぐらいだと思います。(refresh等の指定はGoogle非推奨になっているためです。)

※言語指定も、htmlタグのlang属性による指定が一般的です。

HTML5のルート要素であるhtmlタグ使用時の注意事項とlang=”ja”の設定方法とは

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次