metaタグとは

meta タグですが、なんとなくで使っていたので、調べる事にしました。

metaタグ

meta タグとは、Webページに関する情報を記載するタグです。
meta タグに情報を記載することでブラウザや検索エンジンにWebページの情報を伝えることができます。例えば、文字コードや検索結果に出てくるWebページの説明文です。詳しくは、下記で説明します。

meta タグの情報は、内部SEO に強く影響を与えます。meta タグに正しくWebページの情報を記載することで、内部SEO の質が上がります。質が上がると、検索結果で上位表示することができ、アクセスの増加などにつながります。

よく使われるmetaタグ

mata タグは、head タグ内に記述します。head タグ内にあるため、Webページ上に表示されません。
Google でよく使われる meta タグを CodePen で実際に記載してみました。

参照: 公式 Google検索セントラル metaタグ

<html>

<head>
  <title>Learn meta tag</title>
  <meta charset="utf-8">
  <meta name="description" content="learn meta tag in html of head.">
  <meta name="robots" content="noindex">
</head>

<body>
  <h1>Learn meta tag</h1>
</body>

</html>

charset

文字コードを指定します。
EX) 多くは `utf-8` を指定します。（HTML5推奨）

description

メタディスクリプションといい、Webページの説明を100文字程度（PC: 100文字、SP: 70文字程度）で記述します。検索結果のスぺニットに使用されます。
→ 短すぎず長すぎずWebページのコンテンツに沿った文章をわかり易く記述することで、ユーザーに伝わりやすく、アクセスの向上や `SEO` の質が高まります。
参照: 公式 - Google 検索結果のスぺニット

robots

検索エンジンがクロールとインデックス登録を行う際の動作を制御するものです。
参照: 公式 - Google Robotsルール

デフォルトは index と follow で、記載は必要ありません。
下記は、よく指定するスぺニットのインデクス表示の登録と表示を制御するルールです。

noindex: 指定したページを検索結果に表示しない
EX) 運営しか使ってほしくない管理画面、購入完了など完了画面
noflow: リンクをたどらない
EX) 関係ないリンクがWebページ内にある時（※ head内だけでなく、個別でリンクに指定できます。）

viewport

指定することで、モバイル端末でのテキストなどの表示を最適化することができます。

まとめ

meta タグは、ブラウザや検索エンジンにそのWebページの情報を伝え、SEO に影響を与えることが分かりました。
SEO についても、今後理解を深め、勉強していきたいと思います。

ご覧いただきありがとうございました

今後もフロントエンド開発で気になったことや分からないことを調べて、共有していきたいと思います。
間違いなどございましたら、教えていただきたいです。

metaとは

metaタグとは

metaタグ

よく使われるmetaタグ

まとめ