meta知ってる？
初心者コーダや学生は知らなかったり、とりあえずスルーするmeta要素。（ちゃんと理解してコーディングされてる方々すみませんmm）ページ上で見えないmeta要素は軽視されがちです。
私も毎回meta要素まで書かれているテンプレートを使用して制作を行なっているので、ちゃんと理解できていません。ってことでまとめていきます〜
metaって何？
タイトルにも書きましたが、metaってなんなんでしょう。
「META」とは「META-information」の略で、文書のメタ情報を指定し、ブラウザや検索ロボットにホームページの情報を知らせるためのタグです。メタ情報は、Googleやgooなどのスパイダーと呼ばれるロボット型検索エンジンがネットワーク上を巡回した際に拾われ、検索ページに反映されます。らしいです…
<head>タグ内に記述するので画面上には表示されません。
ページを見る人のための記述ではなく、コンピュータに向けた記述なのですね。
meta要素はmeta情報、メタデータとも呼ばれ、サイトの制作者や文書の説明・キーワードなどの情報や文字コードの指定、キャッシュの制御と有効期限の指定などを記載するのが一般的らしいです。
それでは、基本的なmeta要素を紹介していきます。
基本的なmeta要素一覧
meta情報の記述方法
name属性ではメタデータ名を定義、content属性ではその内容を指定します。
<meta name="メタデータ名" content="内容を指定">
基本的なmeta要素
description
文書の説明を短文で指定します。
<meta name="description" content="">
keyword
HTML文書がどのような内容を示したものかキーワードで指定します。
<meta name="keywords" content="">
viewport
PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定します。
<meta name="viewport" content="">
robots
検索エンジンのクローラ（ロボット）に対して URLをインデックスしないように（noindex）、 文書内のリンクをたどらないように（nofollow）知らせるための指定します。
<meta name="robots" content="">
OGP(Open Graph Protocol)
FacebookやTwitterなどのソーシャルメディアで共有(シェア)された際に、ページのイメージ画像やタイトル、ディスクリプション(概要文)、URLなどを設定します。
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
charset
文書の文字エンコーディングを指定する際に使用します。
<meta charset=”utf-8″>
refresh
別のURLへのリダイレクトや現在ページの再読み込みを指定します。
<meta http-equiv=”refresh” content=”秒数;URL=URL“>
まとめ
今回meta要素についてや、基本的なmeta要素について知り、meta要素を上手く記述することで、ページの情報を検索エンジンのクローラーに認識させSEO対策できたり、機能を追加できることが分かりました。
これまでmeta要素を重要視出来ていなかった方は是非さらに詳しく調べて活用し、ページのクオリティを高めていきましょう！