ホームページの基本的なメタ情報(metaタグ)の書き方

      2017/05/24

今回はホームページ作成の基本的な meta 情報(metaタグ)の書き方についてお話します。このメタタグは<head></head>の中に記述します。ブラウザでの表示には直接関係のないものが多いのですが、ページのタイトルや概要を指定や、文字コードの指定をしたり、CSSやJavaScriptなどの外部ファイルの読み込みを指示したりといろいろな役割を持っています。

meta情報はあげればキリがないので、今回はホームページの作成でよく利用される metaタグの書き方 についてご紹介します。

文字のエンコードを指定する

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

このmetaタグでは、文字のエンコードを指定することができます。HTMLの文字コード(記述形式)を正しく設定することによって、ページが読み込まれたときの文字化けを防ぎます。

文字コードは「Shift-JIS」、「EUC-JP」、「UTF-8」、「ISO-2002-JP」などがあります。

文字のエンコードを指定する場合は、<head></head>の中に、<meta>として記入します。

Shift-JISの場合

EUC-JPの場合

UTF-8の場合

ISO-2022-JPの場合

HTML5で記述する場合

メモ帳などのテキストエディタを使ってHTMLを作成する際は、特にテキストエディタ保存時の文字コードとメタ情報の文字コードが一致するようにしてください。

コンテンツ言語の指定

この記述は必須ではありませんが、HTML4で作られている日本語サイトの場合、コンテンツ言語の指定をしておかないと、英語圏で表示された場合に文字化けを起こす可能性があります。HTML5の場合は、<html lang="ja">で指定するため省略することができます。

ここで設定するものには、content="ja"(日本語)、content="en"(英語)などがあります。他にも、 zh(中国語)、ko(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語) などが指定できます。

検索エンジンのロボットに対し、ページの要約を記述する

<meta name="description" content="">

このmetaタグではページの要約を設定することができます。
GoogleやYahooなどの検索エンジンは、各サービスが持つ巡回ロボット(クローラー)によって、日々様々なサイトを収集しています。この巡回ロボットがサイトの情報を収集しにきたとき、ロボットにそのページを的確に認識させるには、ページの要約をあらかじめ記入しておくことが必要です。また、ここで記入した内容は検索結果にサイトタイトルと合わせて表示されるので、適切に設定することでクリックされやすくなり、より多くの流入を見込めるようになります。

「content=""」の部分に内容を書き入れます。このとき、ページの内容が分かりやすいよう簡潔に文章を書くようにしましょう。長さは120文字以内に収めると効果的とされています。

当ページの場合

検索エンジンのロボットに対し、ページのキーワードを記述する

<meta name="keywords" content="">

このmetaタグではページのキーワードを設定することができます。
GoogleやYahoo!などの検索エンジンのクローラーがページを収集する際、そのページを認識するときに、このキーワードを参考にしています。従って、ページに含まれるキーワードを出現度順に記述すると効果的であり、より検索エンジンにも登録されやすくなります。

複数のキーワードを書きたい場合は、「,(半角カンマ)」で区切ります。しかし、SEO対策の観点からいうと、1つのページに設定する対策キーワードは1キーワードに絞り込んだ方が効果的と言われているので、なるべく1記事1キーワードとなるように設定しましょう。

当ページの場合

検索エンジンのロボットに対する動作を指示する

<meta name="robots" content="">

このmetaタグではクローラー巡回時のサイト情報収集に関する指示をします。
大手検索サイトのクローラーがサイトを訪問した時に、サイトの情報を収集させるかどうかの指示を与えることができます。指示には以下の4通りがあります。

  • content="index"
  • サイト訪問時にページの収集を許可します。

  • content="noindex"
  • サイト訪問時にページの収集を許可しません。

  • content="follow"
  • ページ内のリンクを辿ってリンク先ページの収集を許可します。

  • contet="nofollow"
  • ページ内のリンクを辿ってリンク先ページの収集を許可しません。

「indexとfollow」、「noindexとnofollow」または、「indexとnofollow」、「noindexとfollow」は組み合わせることができます。その場合は、「,(半角カンマ)」で区切ります。

ページの収集とリンク先ページの収集を許可する場合

ページの収集とリンク先ページの収集を許可しない場合

ページの収集は許可するけど、リンク先ページの収集は許可しない場合

ページの収集は許可しないけど、リンク先ページの収集は許可する場合

このタグは省略すると、全ページが検索対象になります。従って、検索エンジンに表示されたくないページだけに設定するというような感じでも問題はありません。また、サイト全体をコントロールしたい場合には、「Robots.txt」が有効です。

指定時間になったら自動でページをリロード(更新・再読込み)やページ移動させる

<meta http-equiv="Refresh" content=";URL=">

このmetaタグでは、指定時間になると表示しているページを再読込み(更新)させたり、他のページへ移動させることができます。これらの方法は記述の仕方で変えることができます。

指定時間になったら同じページを再読込(リロード)

「content=""」でページを再読込させる時間を指定します。
この時間はページの表示が完了してからカウントされます。

指定時間になったら違うページへ自動的に移動

「content=""」でページを切り替える時間を指定し、「;(半角セミコロン)」で続けて「URL=○○○.com」でジャンプする(移動先)ページのアドレスを指定します。

使い方次第では非常に使い勝手がいいですが、悪用をしてはいけません。

この他にもmetaタグにはたくさんの種類がありますが、今回は一般的によく利用されるmetaタグをご紹介しました。metaタグは省略することもできますが、SEO対策に有効なものもあるので、可能な限り、必要なmetaタグは記述するようにしましょう。

 - HTML・CSS