メタタグ（metaタグ）とは何？初心者向けに詳しく解説！
今回は、メタタグ（metaタグ）についてまとめました。
SEO対策でも意識しておかないといけない重要なメタタグもたくさんあります。
興味のある方は、ぜひ当記事を最後までお読みください。
メタタグ（metaタグ）とは？
WEB制作を行っていると、必ずメタタグ（metaタグ）というものに遭遇します。
メタタグとは、HTMLファイルの<head>～</head>内に記述するタグです。
Webページの情報を検索エンジンやブラウザなどに伝えるという役割を持っており、非常に重要なタグとお考えください。
例えば、
- ページの文字コードを設定するもの
- SEOに関連するもの
- ページをインデックスさせないようにするもの
- SNS拡散時に関連するもの
など、様々なメタタグが存在します。
今回は、その中でも、よく使用する重要なメタタグについてまとめていきます。
よく使用するメタタグの紹介
メタタグは、様々な情報を伝える役割を持っており、多くのタグが存在します。
ですが、実際には、設定してもあまり意味のないメタタグやほとんど使用されていないメタタグも存在しています。
そこで、覚えておいた方がいいメタタグをまとめてみました。
charset：文字コードを設定【必須】
説明するまでもないですが、ページの文字コードを指定するタグです。
文字化けしないようにするためにも、必ず記載してください。
記述例：<meta charset=”utf-8″>
viewport（ビューポート）：モバイル向け【必須】
モバイルフレンドリーを意識して設定するタグです。
記述例：<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
設定しておくことで、スマートフォンやタブレットでWebサイトを見た際に、
各端末の画面サイズに応じて最適化して表示してくれます。
現在は、Webサイト制作時にはモバイル対応（レスポンシブデザイン）がデフォルトになってきているので、必須のタグと言ってもいいです。
メタキーワード（meta keywords）
こちらは、以前は、SEO上とても重要視されていたメタタグで、ページ内の重要なキーワードをカンマ（,）で区切って設定します。
記述例：<meta name=”keywords” content=”キーワード,キーワード,キーワード,キーワード”>
ただし、
現在、メタキーワードはGoogleの検索ランキングに影響しないので記述不要です。
まだまだ多くのWebサイトで残っていますが。。。
メタディスクリプション（meta description）
メタディスクリプションは、ページの内容を簡潔にまとめた説明文を記述するメタタグです。
記述例：<meta name=”description” content=”ページの説明文”>
こちらも、以前は、SEO上とても重要視されていましたが、現在は、Googleの検索ランキングに影響しません。
ただし、メタディスクリプションに設定した説明文は、Googleの検索結果一覧でタイトルの下に表示されます。
そのため、検索時のユーザーのクリック率に影響を与えると言われています。
そのため、メタディスクリプションはしっかりと設定しておいた方がいいです。
ただし、適当な説明文を記述するのはNGです。
それであれば、設定しない方がマシです。
↓
メタディスクリプションは設定していなくても、
Googleが勝手に最適な文章をページ本文から拾ってきて、検索結果に表示してくれます。
※設定していたとしても、勝手に書き換えられてしまうこともあります。
noindex：ページをインデックスさせない
こちらは、ページをインデックスさせたくない場合に使用するタグです。
記述例：<meta name=”robots” content=”noindex”>
インデックス不要なページであったり、大した中身の無い低品質なページがある場合に使用するメタタグです。
これにより、高品質なページが充実することになり、SEO効果も高まります。
ちなみに、ページをインデックスさせたい場合にはindexと指定します。
ですが、noindexを設定しない場合はページがインデックスされるので、「index」をあえて設定する必要はないです。
nofollow：クローラーにページを辿らせない
クローラーに、低品質なページを辿って欲しくない場合に設定するメタタグです。
記述例：<meta name=”robots” content=”nofollow”>
こちらは、
<head>～</head>内に記述するとページ全体を辿らせないように指定できますが、
<a>タグに直接記述する方法があります。
ちなみに、クローラーにページ内を巡回して欲しい場合にはfollowと指定しますが、
この場合には、あえて記述する必要はないです。
noindexとnofollowはセット
noindexとnofollowはセットで設定することが多いです。
その場合には、
カンマで区切って設定してください。
記述例：<meta name=”robots” content=”noindex,nofollow”>
例えば、中身の無い薄っぺらで質の低いページであれば、noindexとnofollowを両方とも設定しておいた方がいいでしょう。
OGP
Facebook（フェイスブック）からの拡散を意識して設定するメタタグです。
設定しておくことで、Facebookから拡散された際のタイムラインに表示されるサムネイルやタイトルなどを指定できます。
記述例：
<meta property=”og:title” content=”ページのタイトル”>
<meta property=”og:description” content=”ページのディスクリプション”>
<meta property=”og:url” content=”ページのURL”>
<meta property=”og:type” content=”ページのタイプ”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:image” content=”画像のURL”>
ツイッターカード（Twitter card）
こちらは、Twitterからの拡散を意識して設定するメタタグです。
記述例：
<meta name=”twitter:card” content=”カードの種類”>
<meta name=”twitter:site” content=”@Twitterユーザー名”>
twitter:cardには、「Summary Card」か「Summary with Large Image」を指定します。
「Summary with Large Image」を指定すると、
ツイートされた際に大きなサムネイルが表示されるので、
私は「Summary with Large Image」を指定することが多いです。
まとめ
今回は、Web制作の初心者向けにメタタグについてまとめました。
重要なメタタグのみをまとめたので、制作時には参考にしてください。
