metaタグとは
metaタグのメタとは、メタデータという言葉からできています。メタデータはデータについてのデータになります。
そのため、metaタグはHTMLで構成されるWebページの基本的な情報を示すタグになります。代表的なmetaダクでは、Webページの著者や文字コード、タイトル、説明文などかあります。
基本的にmetaタグで設定する内容は検索エンジン・ブラウザ向けに記述するので、Webサイト上で表示されることが無いのでユーザーは閲覧することはありません。
metaタグの種類
metaタグはそれぞれ以下の属性をセットで記述することになります。この属性を記述することでmetaタグにそれぞれ役割を分けて使うようなイメージです。
- name属性
- http-equiv属性
- content属性
- charset属性
- itemprop属性
- property属性
name属性
metaタグの要素に対して名前を付与します。ユーザーが入力した値をサーバーやブラウザに送信するための識別子です。また一緒にcontent属性を合わせて記述することで名前と値を指定して使ったりします。
| 項目 | 説明 |
|---|---|
| description | Webページの内容をまとめた説明文を記述できます。 |
| keywords | Webページの内容を示すキーワードを指定できます。 カンマ区切で複数キーワードの指定が可能。 |
| robots | 検索エンジンのクローラーにインデックス、リンクのクロールの指示できます。 |
| viewport | スマホに最適化したページサイズの指定ができます。 |
| author | Webページの作者を示す際に指定できます。 |
http-equiv属性
metaタグはhttp-equiv属性が指定されることで、ユーザーエージェント向けのプラグマ指示子になります。
| 項目 | 説明 |
|---|---|
| content-language | コンテンツの言語が指定できます。 |
| content-type | ファイルタイプや文字エンコーディングなどが指定できます。 |
| default-style | デフォルトスタイルの指定ができます。 content属性をセットで指定してcssファイルの指定も可能。 |
| refresh | リダイレクト・再読み込みの指定ができます。 content属性をセットで指定して秒数とリンク先URLが指定が可能。 |
content属性
content属性は主にname属性、http-equiv属性と一緒に使って、実際の内容を指定します。
charset属性
charset属性は文字エンコーディングを指定する属性になります。基本的には「UTF-8」「Shift_JIS」「EUC-JP」を3つのどれかを指定することになると思います。
itemprop属性
itemprop属性は構造化データなどのプロパティを指定するための属性です。 例えば文書のタイトル、説明文、著者名などを指定することができます。
property属性
property属性は、SNSでシェアされたときに表示するサイト情報が指定できます。
覚えておきたい代表的なmetaタグ
数あるmetaタグですが、全てを覚える必要は無く必要なものだけ覚えれば問題ありません。ここでは特に利用することが多いmetaタグを紹介します。
ディスクリプションタグ
ディスクリプションタグはWebページの説明文を記述します。検索結果ページでタイトルとURLの下に表示されます。大体100文字から120文字程度で簡潔にまとめることを目指しましょう。
<meta content="概要文を120文字程度" name="description">文字コード
文字コードはWebページをブラウザで表示する際の文字エンコーディングを指定します。作成した文書に合わせて「UTF-8」「Shift_JIS」「EUC-JP」の3つのどれかを指定しましょう。
<meta charset="utf-8">コンテンツ言語
コンテンツの言語を指定するmetaタグになります。
<meta http-equiv="content-language" content="ja">OGP
OGPタグはSNSに投稿・シェアされた時にWebサイトのタイトルやサムネイル画像を指定するmetaタグです。
<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページの種類" />
<meta property="og:image" content="サムネイル画像のURL" />
スマホ最適化
スマホ向けにページサイズの指定ができます。
アクセスしたデバイスサイズに合わせて最適化した表示ができます。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">noindex・nofollow
noindex・nofollowは検索エンジンのクローラーに対してインデックスしない、リンクパワーを付与しないことを指定できます。
<meta name="robots" content="noindex,nofollow">
IE対策
Internet Explorerのブラウザ使用してアクセスされた時に利用できる互換性のモードを指定することができます。
<meta http-equiv="X-UA-Compatible" content="IE=edge">ツールやソフトウェア名
Webページを作成したツール名、ソフトウェア名を指定できます。
<meta name="generator" content="ツール名・ソフトウェア名">著者・作者
Webページの著者名・作者名を指定できます。
<meta name="author" content="著者名・作者名">別ページ誘導タグ
リダイレクト・再読み込みの指定ができます。content属性を指定して、リダイレクトする秒数、リンク先URLが指定できます。
<meta http-equiv="refresh" content="10; url=index.html">metaタグのSEOへの影響
metaタグの中でも、SEOに影響があるものがいくつかあるので説明していきたいと思います。
titleタグはSEO上とても重要
<title>タイトル名</title>titleタグは検索結果ページの検索順位を決める上でシグナルの1つになっています。Google検索セントラルの「ウェブマスター向けガイドライン」でもGoogleのクローラーがページの内容を理解するためにtitleタグを使っていると記載があるためSEO評価にも影響があることが分かります。
titleタグは検索結果ページ上に表示されるので、キーワードを詰め込んだりユーザーがページの内容が分からないようなタイトルにならないように注意して、狙っているキーワードを入れながらコンテンツの内容を適切に伝えるタイトルを付けましょう。
titleタグ・descriptionタグはクリック率に影響を与える
<title>タイトル名</title>
<meta content="説明文" name="description">titleタグとdescriptionタグは検索結果ページ上に表示されるので、ユーザーはどのWebページの情報を見ようとするかを決める時の判断材料になります。ついついクリックしたくなるような魅力的なタイトルや自分が得たい情報が分かりそうなページをクリックするので、狙っているキーワードからユーザーの検索意図を推測してそれに応えるようなタイトルと説明文を設定しましょう。その結果、検索結果ページ上のクリック率も向上していきます。
あと意外と見落としがちなのですが、タイトルはFacebookやTwitterなど、SNSでシェアされた時にも表示されるのでSNSからの流入を意識してサイト運営されている方は意識した方が良いでしょう。
keywordタグはSEO効果は無い
<meta name="keywords" content="keyword1,keyword2,keyword3">以前はkeywordタグに狙ってるキーワードを設定することでSEO評価がありましたが、現在はkeywordタグに設定しても直接SEO評価に影響はありません。そのため、keywordタグは設定してもしなくてもどちらでも大丈夫です。keywordタグを設定していないWebサイトも多くなっています。
