metaタグ/メタ情報定義

<meta>タグはHTMLファイルにメタ情報を定義する時に使います。

説明

 <meta>タグは文字コードやスタイルシートの形式、キーワード、説明文等、様々なメタ情報の定義をします。

 メタ情報を定義する事でHTMLファイルがどのように記述されているか等の要約を示し、ブラウザや検索エンジンにも通知出来るため、ブラウザ上での表示や検索結果に影響が出てきます。

 又、SNSにページの内容を通知するOGPを利用する場合にも使います。

構文

 <meta>タグはHTMLヘッダー内に記述します。構文は以下の通りです。

<meta http-equiv="定義項目" content="定義">

又は、

<meta name="定義項目" content="定義">

 </meta>で閉じる必要はありません。

利用例

 文字コードをUTF-8に指定する場合は以下になります。UTF-8部分をShift_JISと記述するとシフトJISになります。

<meta http-equiv="Content-Type" content=""text/html; charset=UTF-8">

 スタイルシートの形式を指定する場合は以下になります。

<meta http-equiv="Content-Style-Type" content="text/css">

 スタイルシートとは見栄えの定義の事で、CSSはその記述形式です。CSS以外にもありますが、ホームページを作る際のスタイルシートはCSSで記述するため、上記のようにtext/cssを指定します。

 nameでketwordsを指定するとページのキーワードを定義出来ます。キーワードは「,」で区切る事で複数記述出来ます。

<meta name="keywords" content="キーワード1,キーワード2,・・・">

 nameでdescriptionを指定するとページの説明を記述出来ます。

<meta name="description" content="ページの説明">

 検索された時はこの説明がタイトル下に表示される事もあり、これをスニペットと言います。このため、訪問して貰いやすいように簡単に要約を記述する事が重要です。

OGP

 <meta>タグによりSNSにページの内容を通知させる事も出来ます。

 例えば、「いいね!」ボタンを設置してボタンが押された時は通常、ページのタイトル等がテキストでニュースフィードやタイムラインに表示されますが、画像付きで表示させる事も可能です。

 詳細はSEO対策の「「いいね!」ボタン設置とOGP」をご参照下さい。

関連ページ

・ホームページ作成「トップページ:ヘッダー作成

 <meta>タグについてだけでなく、ホームページを作る際の初歩から説明しています。

・SEO対策「htmlヘッダーでのSEO対策

 <meta>タグを利用したSEO対策について説明しています。

・SEO対策「「いいね!」ボタン設置とOGP

 「いいね!」ボタンの設置方法を説明しています。本ページでは説明していないSNS特有のタグも説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加