今回はホームページ作成の基本的な 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の場合
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
EUC-JPの場合
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
UTF-8の場合
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ISO-2022-JPの場合
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
HTML5で記述する場合
<meta charset="UTF-8">
コンテンツ言語の指定
<meta http-equiv="content-language" content="ja">
この記述は必須ではありませんが、HTML4で作られている日本語サイトの場合、コンテンツ言語の指定をしておかないと、英語圏で表示された場合に文字化けを起こす可能性があります。HTML5の場合は、<html lang=”ja”>で指定するため省略することができます。
ここで設定するものには、content=”ja”（日本語）、content=”en”（英語）などがあります。他にも、 zh（中国語）、ko（韓国語）、de（ドイツ語）、fr（フランス語）、it（イタリア語）、es（スペイン語）、ru（ロシア語）、ar（アラビア語） などが指定できます。
検索エンジンのロボットに対し、ページの要約を記述する
<meta name=”description” content=””>
このmetaタグではページの要約を設定することができます。
GoogleやYahooなどの検索エンジンは、各サービスが持つ巡回ロボット（クローラー）によって、日々様々なサイトを収集しています。この巡回ロボットがサイトの情報を収集しにきたとき、ロボットにそのページを的確に認識させるには、ページの要約をあらかじめ記入しておくことが必要です。また、ここで記入した内容は検索結果にサイトタイトルと合わせて表示されるので、適切に設定することでクリックされやすくなり、より多くの流入を見込めるようになります。
当ページの場合
<meta name="description" content="今回はホームページの基本的なメタ情報（metaタグ）の書き方についてお話します。このmetaタグは<head></head>の中に記述します。ブラウザでの表示には直接関係のないものが多いのですが、ページのタイトルや概要を指定や、文字コードの指定をしたり、CSSやJavaScriptなどの外部ファイルの読み込みを指示したりといろいろな役割を持っています。">
検索エンジンのロボットに対し、ページのキーワードを記述する
<meta name=”keywords” content=””>
このmetaタグではページのキーワードを設定することができます。
GoogleやYahoo!などの検索エンジンのクローラーがページを収集する際、そのページを認識するときに、このキーワードを参考にしています。従って、ページに含まれるキーワードを出現度順に記述すると効果的であり、より検索エンジンにも登録されやすくなります。
複数のキーワードを書きたい場合は、「,（半角カンマ）」で区切ります。しかし、SEO対策の観点からいうと、1つのページに設定する対策キーワードは1キーワードに絞り込んだ方が効果的と言われているので、なるべく1記事1キーワードとなるように設定しましょう。
当ページの場合
<meta name="keywords" content="meta,タグ,書き方">
検索エンジンのロボットに対する動作を指示する
<meta name=”robots” content=””>
このmetaタグではクローラー巡回時のサイト情報収集に関する指示をします。
大手検索サイトのクローラーがサイトを訪問した時に、サイトの情報を収集させるかどうかの指示を与えることができます。指示には以下の4通りがあります。
- content=”index”
- content=”noindex”
- content=”follow”
- contet=”nofollow”
サイト訪問時にページの収集を許可します。
サイト訪問時にページの収集を許可しません。
ページ内のリンクを辿ってリンク先ページの収集を許可します。
ページ内のリンクを辿ってリンク先ページの収集を許可しません。
「indexとfollow」、「noindexとnofollow」または、「indexとnofollow」、「noindexとfollow」は組み合わせることができます。その場合は、「,（半角カンマ）」で区切ります。
ページの収集とリンク先ページの収集を許可する場合
<meta name="robots" content="index,follow">
ページの収集とリンク先ページの収集を許可しない場合
<meta name="robots" content="noindex,nofollow">
ページの収集は許可するけど、リンク先ページの収集は許可しない場合
<meta name="robots" content="index,nofollow">
ページの収集は許可しないけど、リンク先ページの収集は許可する場合
<meta name="robots" content="noindex,follow">
指定時間になったら自動でページをリロード（更新・再読込み）やページ移動させる
<meta http-equiv=”Refresh” content=”;URL=”>
このmetaタグでは、指定時間になると表示しているページを再読込み（更新）させたり、他のページへ移動させることができます。これらの方法は記述の仕方で変えることができます。
指定時間になったら同じページを再読込（リロード）
「content=””」でページを再読込させる時間を指定します。
この時間はページの表示が完了してからカウントされます。
<meta http-equiv="Refresh" content="5">
指定時間になったら違うページへ自動的に移動
「content=””」でページを切り替える時間を指定し、「;（半角セミコロン）」で続けて「URL=○○○.com」でジャンプする（移動先）ページのアドレスを指定します。
<meta http-equiv="Refresh" content="5;URL=https://column.noith.com">
この他にもmetaタグにはたくさんの種類がありますが、今回は一般的によく利用されるmetaタグをご紹介しました。metaタグは省略することもできますが、SEO対策に有効なものもあるので、可能な限り、必要なmetaタグは記述するようにしましょう。
コメント