Htmlファイルの冒頭に記述されるmetaタグは、昔はブラウザにさまざまな指示をして表示を適切に行ったり、キーワードや概要を示すなどSEO上も重要な働きをしていました。
ブラウザや検索エンジンが大きく進歩した現在、metaタグに求められる役割も変わりつつあります。
最近のmetaタグ事情について解説します。
metaタグの基本的な役割
metaタグは、htmlファイルにおいてユーザーに対しほとんど表示されない情報です。
metaタグの基本的な役割は、htmlファイルに関する情報を検索エンジンやブラウザに対して提供することにあります。
解釈に使うための文字コードの種類や、表示するべきタイトル、検索した人にページの内容を示すためのディスクリプション（要約・概要）、描写する画面幅などの情報を表します。
metaタグに現在求められていること
以前はmetaタグは、画面を正しく表示したり、SEO（検索エンジン最適化）のために重要でした。
しかし、ブラウザの性能向上やhtmlのバージョンの安定、検索エンジンの進歩などのさまざまな環境変化により、そういった必要性が薄れてきました。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選KeywordsはSEO上はもう影響がない
昔はSEO対策といえばキーワード対策であり、metaタグにいかに該当キーワードを入れるかでした。
しかし、googleで約10年前、bingで約5年前にはこれらの影響がないことが明示されています。
参考：Google Webmaster Central Blog
Google does not use the keywords meta tag in web ranking (2009年)
参考：Bing Blogs：
Blame The Meta Keyword Tag (2014年)
この2つの検索エンジンでほぼ99%程度のシェアになるため、SEO上は記入の必要はないと言っても過言ではありません。
ただ、何を念頭において作成されたページかを示す意味はありますので、キーワードを確認したいという人のために書いておいた方が親切ではあります。
descriptionは今後も大切
検索エンジンの検索結果に表示される要約文はmetaタグのdescripitionから作成されています。
検索エンジンでの検索から内容を把握するために重要な内容でもあり、しっかり記述しましょう。
常に最適な文字数が議論になりますが、時期によって変わりますし、検索結果ではデバイスによっても文字数に違いがあります。
多くても100文字程度にとどめた方が良いでしょう。
SNS対策としてのmetaタグ
近年、metaタグに求められている大事な機能がSNS対策です。
TwitterやfacebookなどのSNSへの投稿時に、どのような画像が一緒に表示されるかはアクセス数を大きく左右します。
これを適切に表示するための「OGP」や「Twitter Cards」は、metaタグから設定を行います。
しっかり設定しないと、画像が表示されなかったり、予期せぬ画像が表示されたり、サイズが合わずに一部分だけが表示されたり、解像度の低い画像が表示されてしまうことがあるため注意しましょう。
複数デバイスにおける画面描写のためのviewport
metaタグでは、viewportによってwebページの描画領域のサイズを指定することができます。
複数デバイスにまたがっての閲覧を考えているwebページであれば設定しておいた方が無難です。
記述がない場合は、画面サイズからCSSでレスポンシブデザインを組まない限り、ページ全体が縮小表示されてしまいます。
viewportを指定することで、画像や文字を見やすいサイズで表示することができます。
必ず設定しておくべきmetaタグの種類とは？
metaタグの中でも、必ず設定しておくべきものについて紹介します。
titleタグ
titleタグは独立したタグですが、metaタグと同じくヘッダー領域に記述されるためここで取扱います。
ブラウザにタイトルを表示するだけでなく、検索エンジンが表示する記事タイトルもこれが使われています。
近年は検索キーワードとの関連性や、正確性のある情報提供者が評価される傾向があるため、企業などはタイトルの後ろに組織名を入れることが増えています。
descripition
検索エンジンに対するSEOでのdescriptionの重要性は上で述べた通りです。
重ねて言いますが、ユーザーが検索した際に出てくる説明文がdescriptionの内容となります。
descriptionが検索後のクリック率に大きな影響を与えるため、しっかりと設定することが大事です。
charset（文字コード）
利用している文字コードを示すcharsetは、特に日本語表記のページでは重要です。
指定がない場合には文字化けが発生してしまうことがあります。
robotタグ
robotタグは検索エンジンなどが情報収集のために使うロボットの扱いをどうするかを示すタグです。
設定によっては検索エンジンにインデックスされないこともあります。
テストや非公開にしたいページでなければ特別に設定する必要はありません。
SNS用のタグ
「OGP」や「Twitter Cards」用のタグは、該当するSNSを利用するなら入れておいた方が無難です。
CMSから自動でSNSに投稿する場合、設定が行われていないことで今ひとつな画像やテキストが表示されることがありますので注意しましょう。
Viewport
Viewportの適切な設定もまた重要です。
CSSでレスポンシブデザインを組んでいるなら気にする必要はあまりありませんが、そうでなければユーザーエクスペリエンスを考えると設定しておきたい項目です。
SEO上もモバイルフレンドリーかどうかは重要視されていますので、ユーザーが拡大やページをめくるための手間を減らすような表示を心がけましょう。
metaタグ基本ポイントまとめ
metaタグの基本的な仕事は検索エンジンやブラウザへの情報提供ですが、昔と今とでは、metaタグに期待される役割が変わってきています。
今後もどんどん変わると思いますので、定期的に動向をチェックして、webページが各所で正しく評価・表示されるようにmetaタグを設定しましょう。