metaデータを表すタグの基本

metaデータを表すタグの基本

投稿日 更新日

by Chiharu Morita

meta要素はブラウザには表示されない内部情報を掲載または指定するものです。

特に検索エンジンやソーシャルメディアに特定の情報を伝えたり、コンテンツの仕組みをブラウザに伝えるために利用します。

  • meta要素
  • title要素
  • link要素
  • style要素
  • メタタグ使用時の全体像

metaタグ

カテゴリ 基本構造
タグ <meta>
機能 キーワードや検索エンジン対策に記述します。<head>内に使う。
属性 content
name
charset
http-equiv
itemprop
使用例
<meta http-equiv="" content="">
<meta name="" content="">

metaタグの説明

HTML文書に何が記述してあるかを、サーバやブラウザ・クローラー等が参照するための情報です。

１．charset

ホームページがどのようなエンコーディングを採用しているかを宣言します。通常は文字コードをutf-8に指定します。もしくはShift_JISですが特別な事情がない限りUTF-8を指定しておけばいいでしょう。

２.http-equiv

３.name

nameはcontentと紐付いています。

SEO

description

contentにホームページの説明文を１００文字程度で書きます。検索エンジンの詳細説明文として表示されます。入れなかった場合はGoogleが自動的に表示します。
keywords

contentにホームページのキーワードを入れます。そのページのターゲットキーワードを入れることができます。複数ある場合は半角英数字カンマ（,）区切ります。SEO的にはほとんど効果はないため現在は入れないほうがいいという意見もあります。入れる場合は1〜2つ程度が最適だといわれています。
robots

robotsはgoogleの検索エンジン（クローラーというロボット）に対して情報を伝えます。クローラーはホームページのリンクを辿って情報を収集し、検索エンジンに表示する順位を算出します。
robots
index クローラーに対して検索エンジンへの登録を許可します
noindex クローラーに対して検索エンジンへの登録を拒否します
follow クローラーが巡回するのを許可します
nofollow クローラーが巡回するのを拒否します
noarchive クローラーに対して検索エンジンのキャッシュを拒否します

SEO対策がよくわからない方はのこちらの記事をご覧ください。初心者向けに簡単な注意点なども掲載しています。
SEOって何ですか？初心者でも解るSEOの基本！

レスポンシブWEBデザイン

スマートフォンに対応するための仕様です。viewportを設定することでスタイルシートに記述したmax-widthやmin-widthなどが反映されるようになります。これらの指定をすることで画面幅に応じてデザインが変化するレスポンシブWEBデザインに対応することができるようになります。

HTML4の場合

HTML5の場合は必要ありません。

文字コードを指定します

スタイルシート言語を指定します

スクリプト言語(JavaScript)を指定します

title要素

titleは、読んで字のごとくホームページのトップページと各ページのタイトルを指定するタグです。

効果的な指定方法として、トップページにはキャッチコピーを記載し、各ページにはそのページのタイトルを記載するといいでしょう。使用方法は下記をご覧ください。

カテゴリ 基本構造
タグ <title>
機能 ページのタイトルを表示します。（head内に記述）
使用例
<title> ～ </title>

titleタグの説明

head要素内（<head> </head>）に書きます。
ブラウザでホームページを開いた場合上部のタブ部分に表示されます。また、検索エンジンやソーシャルメディアで表示されるタイトルにもtitleタグに指定したものが表示されます。

タイトルは検索エンジンで表示される部分になりますので、自分のホームページを見てもらいたい人のことを考えて、検索されやすいキーワードを含めて決めることがSEO対策として大切です。

↓このように付けよう！

  • トップページ
    「サイトを表す内容を書く(キャッチコピーなど) | サイト名」
  • 各ページ
    「ページのタイトル名 | サイト名」
    もしくは「ページ名のみ」

    • ※ 『 | 』 ではなく、『 – 』(ハイホン)でもかまいません。前後に半角スペースを書きます。

検索エンジンでの表示例

検索エンジンで表示された例です。
titleタグの検索エンジン表示例

ブラウザでの表示例

ブラウザのタブの部分にサイトに設定したタイトルが表示されます。
タイトルタグの例

このようにサイト名をタイトルの後ろに指定すれば、気に入ってくれた訪問者がお気に入りに登録してくれてもどこのサイトの何のページかわかりやすくなります。訪問者の使い勝手に配慮した対策が重要です。

※ブログがメインのサイトなどの場合、タイトルが非常に長い場合もあります。その際の各ページのタイトルはサイト名を記載しないでページのタイトル名だけにするのも良い方法です。

link要素

HTMLと外部のスタイルシートや画像などのファイルを関連付けるタグです。

スタイルシートを読み込むための記述例。下の例は相対パスですが、絶対パスで記述することもできます。

style要素

styleシートをHTMLに反映させるためのタグ。link要素の場合とは違いHTML内に直接記述します。

styleタグをhead内に書きます。

メタデータ使用時の全体像

headタグ内に記載することで、ホームページのタイトルとして反映されます。






タイトル | サイト名

カテゴリー HTMLリファレンス

タグ