metaタグとは?|SEOにも重要なメタデータを指定しよう

metaタグとは?|SEOにも重要なメタデータを指定しよう
博士
今回は、SEOにも重要な<meta>タグについて解説するぞい。
リンゴ
<meta>タグ?
WordPressでブログを書いてるときにも、ちょくちょく目にしますね。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<meta>タグとは

 

<meta>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類メタデータ・コンテンツ
利用場所charset属性があるか、http-equiv属性の値が「content-type」の場合:head要素内 / http-equiv属性があるが、その値が「content-type」ではない場合:head要素内、またはhead要素の子要素であるnoscript要素内 / name属性がある場合:メタデータ・コンテンツが期待される場所
内容


 
 
<meta>タグは、文書に関する情報(メタデータ)を指定する際に使用します。
メタデータは主に、サイトの制作者や文書の説明、キーワードや文字コードの指定などを記載します。
これらの情報は、検索エンジンロボット「クローラー」がサイトに訪れた際に拾われ、検索ページに反映されます。

<meta>タグは<head>~</head>の間に記述します。
meta要素を指定する際は、name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定しなくてはいけません。
また、name属性、http-equiv属性を指定する際は、必ずcontent属性とセットで利用します。
セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。

メタデータは、サイトの画面上には表示されません。
 
 

博士
メタデータには様々なものがあるが、ここでは使用頻度の高いメタデータの指定方法を紹介するぞい。
 
 

http-equiv属性

http-equiv属性を指定すると、そのmeta要素はプラグマ指示子となります。
プラグマ指示子とは「実行命令を指示するもの」のことで、ブラウザに対して文書の状態や挙動を指示する役割があります。

http-equiv属性の値には、以下の4つのキーワードを指定することができます。

  • content-language
  • content-type
  • default-style
  • refresh

 
 

content-language

http-equiv=”content-language”は、文書の主言語を指定します。
言語はcontent属性で指定します。
 
 

記述例

 
 
上記の場合、言語は日本語「content=”ja”」で指定しています。
 
 
博士
「ja」の部分を「en」にすれば英語、「ko」と入力すれば韓国語など、さまざまな言語で指定できるぞ。
リンゴ
なるほど~。
 
 

content-type

http-equiv=”content-type”は、ファイルタイプや文字エンコーディングを指定します。
 
 

記述例

 
 
上記の場合、ファイルタイプはHTML「content=”text/html”」、
文字エンコーディングはUTF-8「charset=”UTF-8″」を指定しています。
 
 

default-style

http-equiv=”default-style”は、デフォルトスタイルを指定します。
content属性でCSSファイルのURIを指定できます。
 
 

記述例

 
 

refresh

http-equiv=”refresh”は、別のURLへのリダイレクトやページの再読み込みの指定ができます。
content属性の値には何秒後にリフレッシュするかと、 ジャンプ先のURLを指定します。
 
 

記述例

 
 
リンゴ
この場合、10秒後にsamplepage.htmlというページにリダイレクトされるってことですね!
博士
そのとおりじゃ。
ちなみに、10分ごとにページを再読み込みする場合は、以下のように記述しよう。
 
 

記述例

 
 

スポンサーリンク

name属性

<meta>タグのname属性でメタデータ名を定義し、content属性でその内容を指定することができます。

name属性では、主に以下のような属性値が指定できます。

  • keywords
  • description
  • robots
  • author
  • generator
  • viewport
  • application-name

 
 

keywords

name=”keywords”は、そのHTML文書がどのような内容を示したものかキーワードで指定します。
キーワードを複数指定する場合は、半角カンマ区切りで指定します。
 
 

記述例

 
 

description

name=”description”には、そのHTML文書の内容を簡潔な概要にまとめて記述します。
ここで記述した概要は、検索エンジンの検索結果画面で使用されることがあります。
 
 

記述例

 
 

robots

クローラーに対して、URLのインデックスやリンクのクロールについて指示できます。
 
 

記述例

 
 
上記のように記述することで、クローラーにURLをインデックスせず(noindex)、文書内のリンクをたどらないよう(nofollow)指示することができます。
 
 

author

name=”author”は、HTML文書の作者を示す際に指定します。
 
 

記述例

 
 

generator

name=”generator”は、HTML文書作成に使用したツールやソフトウェアを示す際に指定します。
 
 

記述例

 
 
これは、ツールやソフトウェアを使ってWEBページが自動生成された際に挿入されるものです。
手打ちの場合は使用できませんので注意してください。
 
 

viewport

name=”viewport”は、スマートフォン向けに最適化したページサイズを指定できます。
 
 

記述例

 
 

application-name

name=”application-name”は、Webアプリケーションの名前を指定できます。
 
 

記述例

 
 
博士
特にkeywords、description、robotsの指定はSEO対策としても非常に重要じゃぞ。
 
 

charset属性

charset属性は、HTML文書の文字エンコーディングを指定する際に使用します。
日本語用の文字コードとしては、”UTF-8″、”Shift_JIS”、”EUC-JP”などが広く使われています。
大文字と小文字の違いは区別されません。
 
 

記述例

 
 
charset属性を指定したmeta要素は、一つの文書に一つだけしか記述できません。
 
 
リンゴ
これは絶対指定しないといけないんですか?
博士
文字エンコーディングを指定しないと、日本語で作成されたWEBページに英語版のブラウザでアクセスした場合、文字化けが起きることがあるんじゃ。
リンゴ
そうなんだ!
できるだけ指定しておいた方がいいんですね。
 
 

スポンサーリンク

まとめ

<meta>タグは、文書に関する情報(メタデータ)を指定するタグです。
サイトの制作者や文書の説明、キーワードや文字コードなど様々な情報を指定することができます。
 
 

博士
今回紹介した他にも、メタデータの指定方法はたくさんあるぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








metaタグとは?|SEOにも重要なメタデータを指定しよう