今回は、メタタグについてまとめました。
SEO対策でも意識しておかないといけない重要なタグもあるので、興味のある方は、一度、こちらの記事に目を通してみて下さい。
メタタグ（metaタグ）とは？
WEB制作を行っていると、必ずメタタグ（metaタグ）というものに遭遇すると思います。
メタタグとは、
HTMLファイルの<head>～</head>内に記述するタグで、
WEBページの情報を検索エンジンやブラウザなどに伝えるという重要な役割を持っています。
・ページの文字コードを設定するもの
・SEOに関連するもの
・ページをインデックスさせないようにするもの
・SNS拡散時に関連するもの
など、
様々なメタタグが存在します。
今回は、
その中でも、
よく使用する重要なメタタグ
についてまとめてみます。
よく使用するメタタグは？
メタタグは、様々な情報を伝える役割を持っている為に、多くのタグが存在しますが、
実際には、設定してもあまり意味のないメタタグや、
ほとんど使用されていないメタタグ
も存在しています。
そこで、よく使用されている、個人的に重要だと思うメタタグをまとめてみました。
charset：文字コードを設定【必須】
説明するまでもないですが、
ページの文字コードを指定するタグなので、
文字化けしないようにするためにも、必ず記載して下さい。
viewport（ビューポート）：モバイル向け【必須】
モバイルフレンドリーを意識して設定するタグです。
設定しておくことで、スマートフォンやタブレットでサイトを見た際に、
各端末の画面サイズに応じて最適化して表示してくれます。
現在は、サイト制作時にはモバイル対応がデフォルトになってきているので、
必須のタグと言ってもいいです。
メタキーワード（meta keywords）
こちらは、以前は、SEO上とても重要視されていたタグで、
ページ内の重要なキーワードをカンマ（,）で区切って設定します。
ただし、
現在、メタキーワードはGoogleの検索ランキングに影響しないので記述不要です。
まだまだ多くのサイトで残っていますが。。。
メタディスクリプション（meta description）
メタディスクリプションは、ページの内容を簡潔にまとめた説明文を記述するメタタグです。
こちらも、以前は、SEO上とても重要視されていましたが、
現在は、Googleの検索ランキングに影響しません。
ただし、メタディスクリプションに設定した説明文は、
Googleの検索結果一覧で、タイトルタグの下に表示されるので、
検索時のユーザーのクリック率に影響を与えると言われています。
その為、しっかりと設定しておいた方がいいです。
ただし、適当な説明文を記述するのはNGです。
それであれば、設定しない方がマシです。
↓
メタディスクリプションは設定していなくても、
Googleが勝手に最適な文章をページ本文から拾ってきて、検索結果に表示してくれます。
※設定していたとしても、勝手に書き換えられてしまうこともあります。
noindex：ページをインデックスさせない
こちらは、ページをインデックスさせたくない場合に使用するタグです。
インデックス不要なページであったり、大した中身の無い低品質な内容のページがある場合に、
設定するタグです。
これにより、高品質なページが充実することになり、SEO効果も高まります。
因みに、ページをインデックスさせたい場合にはindexと指定しますが、
この場合には、敢えて記述する必要はないです。
nofollow：クローラーにページを辿らせない
クローラーに、低品質なページを辿って欲しくない場合に設定するメタタグです。
こちらは、
<head>～</head>内に記述するとページ全体を辿らせないように指定できますが、
<a>タグに直接記述する方法があります。
因みに、クローラーにページ内を巡回して欲しい場合にはfollowと指定しますが、
この場合には、敢えて記述する必要はないです。
noindexとnofollowはセット
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」を指定することが多いです。
