HTMLタグの一つで、そのページに関する様々な情報をブラウザやクローラーに知らせるためのタグです。これらの情報は一般的に通信の中だけでのやり取りに使われるためブラウザの画面には表示されません。そのため、一般的にはユーザーは見ることのない情報となります。
metaタグは全てheadタグ(<head>)内に記述します。
metaタグには複数の属性を使うことができ、それぞれに伝える情報が異なってきます。
- http-equiv属性
- name属性
- content属性
- property属性
- charset属性
上記が主に使う属性です。
大まかにどの様な情報を記述出来るかと言えば、ページを読み込むために必要な文字コードや言語の情報、ページの内容、設定などなど、基礎情報を記述することができます。ブラウザやクローラーはこの情報を使って他のページへの連携をとったり、ブラウザへの表示を決めたりします。
Googleがサポートをしているmetaタグはそんなに多くありません。よって、SEOに大きく関わるmetaタグは一部となります。
ここでは主によく知られているであろうmetaタグを大まかに紹介していきます。
http-equiv属性は主にユーザーエージェント(ブラウザ)に対してそのページをどのように表示させるかという情報(プラグマ指示子と呼ばれます)を記述することで、指示を出すことができます。content属性を用いて指示を書いていきます。
といった書き方をします。
content-language使うことで、そのページでは何語を使うのか指示することができます。
言語は日本語(ja)を使います。という指示。
content-type使うことで、そのページのファイルのタイプを指定します。charset属性も一緒に指定できるので、文字コードは何を使うかも指示できます。
このファイルのタイプはhtmlのテキスト文章であり、エンコードにはUTF-8を使います。という指示。
refresh使うことで、ページを別のページへと転送する処理や再読込などの指示が出来ます。こちらについては別途詳しく解説したいと思います。
name属性は主にページの内容情報について記述することが出来ます。content属性を用いてその詳しい内容を書いていきます。
といった書き方をします。
name属性の中にはGoogleがサポートしているタグが複数存在しています。その中でも下記に関しては重要な意味合いがあるため別途詳しく解説をします。
- description
- keywords
- robots
ここではもう一つname属性を紹介します。
author使うことで、そのページを書いた作者の名前を記述することが出来ます。
property属性はSNSでシェアされた時に表示するサイトの情報を指定出来ます。これらは主にOGP(Open Graph Protocol)設定と言われており、Facebook等での連携に使われます。
<meta property="og:type" content="サイトタイプ" >
<meta property="og:description" content="ページの概要" >
<meta property="og:url" content="ページのURL" >
<meta property="og:image" content="ページのアイキャッチ画像" >
<meta property="og:site_name" content="サイト名" >
といった書き方をします。
http-equiv属性のファイルタイプ指定部分でも少し触れましたが、charset属性は文字エンコーディングの指定が出来ます。ファイルタイプと一緒に指定してしまうことも出来ますが、単体での記述も可能です。ページ全体の文字コードを指定するタグのため、なるべく記述は他の文章を書く前にしておく必要があります。少なくともタイトルタグよりは前に記述しましょう。
ここで紹介したタグは一部となります。他にもmetaタグは存在しているため、自分が付属させたい情報に合わせてタグの設置をしましょう。
