これだけは知っておきたい！metaタグ（メタタグ）の種類と設定方法
公開日 : 最終更新日 :
- コーディング
Webページをコーディングする際に記述するmetaタグですが、内容を詳しく把握していない方も多いのではないでしょうか？
正しく設定することで間接的ではありますがSEO効果にも繋がってきますので、それぞれのmetaタグ意味を理解し正しく設定していきましょう！
metaタグとは
meta（メタ）タグとは、検索エンジンやブラウザなどに対してWebページの情報を伝えるHTMLタグです。
文字コードの指定や、検索エンジンへのインデックス（検索結果に表示される）の可否など、メタデータと呼ばれる情報を伝えるのがメインの役割となります。
ページタイトル（title）やページの説明文（description）など以外は、ユーザーの目入ることはほとんどありませんが、間接的にSEO効果に影響してくるのでとても重要な要素です。
metaタグの書き方
metaタグは、headタグ内に記述していきます。
<html>
<head>
<!-- ここにmetaタグを記述 -->
<meta ...>
</head>
<body>
</body>
</html>
設定しておきたいmetaタグ
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="noindex, nofollow"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0"> <title></title> <meta name="description" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:site_name" content=""> <meta property="og:url" content=""> <meta property="og:image" content="./assets/ogp.jpg"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="fb:app_id" content=""> <meta name="twitter:card" content="summary_large_image"> <link rel="icon" type="image/png" href="./assets/favicon.png"> <link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180"> </head>
それでは順番に見ていきましょう！
文字コード（charset属性）
<meta charset="utf-8">
HTML文書の文字エンコーディングを指定するための記述です。
文字コードの設定をしていないと、英語版のブラウザから日本語サイトにアクセスすると文字化けが起きる可能性があります。
文字コードの種類にはUTF-8以外にもShift-JISなどがありますが、あえて別の文字コードに変更する必要もないので、基本的にはUTF-8で問題ないかと思います。
必須で設定しておきましょう。
ブラウザの互換性指定（http-equiv属性）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorerを使用している人向けの記述です。
IEのドキュメントモードを指定することが可能で「content="IE=edge"」と記述することで、使用しているIEで利用可能なモードの中から、最新のモードを使用するように指示できます。
また、わざわざ古いバージョンを指定することはないかと思いますが「IE=10」や「IE=9」と記述すれば、そのバージョンで見せたいという指示になります。
robotsタグ
<meta name="robots" content="noindex, nofollow">
検索エンジンへのインデックスを避けるための記述です。
上記の記述をすることにより、検索結果として表示されなくなります。
低品質なページなどをインデックスさせないことで、SEOのマイナス評価を避けることにも繋がるので必要に応じて設定しましょう。
※逆にインデックスさせたいページには間違って設定しないよう注意してください。
format-detectionタグ
<meta name="format-detection" content="telephone=no">
主にスマートフォンなどが電話番号を勝手にリンク設定することを避けるための記述です。
スマートフォンのブラウザなどでは、ページ内に電話番号のような記述を見つけると勝手にリンクにしてしまう場合があります。誤ってユーザーが架電してしまわないよう設定しておきましょう。
また、「content="address=no, email=no"」とすることで、メールアドレスの自動リンク化を避けることができます。
viewportタグ
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
ページの表示領域を指定するための記述です。
ブラウザがページを表示するときにどの大きさで表示するかを指定することができます。
この設定をしていないと、PCとスマートフォン、タブレットなど各デバイスごとに画面幅が違うブラウザで見た時に、ページが小さく表示されてしまったり、はみ出してしまったりする場合があります。
レスポンシブ対応が当たり前になってきている中では必須の設定です。
titleタグ
<title>ページタイトル</title>
ページのタイトルを指定する記述です。
SEO対策において重要な要素のひとつです。
対策キーワードなどをしっかり含め、ページの内容を示すタイトルにしておきましょう。
必須で設定しておきましょう。
descriptionタグ
<meta name="description" content="ここにページの概要が入ります。">
ページの説明・概要を指定する記述です。
検索結果にタイトルと一緒に表示される文章でもあります。
タイトル同様、SEO対策において重要な要素のひとつです。
キーワードなどをしっかり含め、ページの内容を示す説明にしておきましょう。
必須で設定しておきましょう。
OGPタグ
<meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:site_name" content="サイト名"> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="./assets/ogp.jpg"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="ページの種類"> <meta property="fb:app_id" content="App-ID"> <meta name="twitter:card" content="summary_large_image">
SNSでシェアされた際に、タイトルや説明文、URL、イメージ画像などの詳細な情報を設定するための記述です。
OGPを設定していない場合、TwitterやFacebookなどのSNS側で自動で表示してしまい、ページの内容がうまく伝わらない可能性があるので適切に設定しておきましょう。
og:title
ページのタイトルを指定します。
基本的にはtitleタグと同様にします。
og:description
ページの説明・概要を指定します。
基本的にはdescriptionタグと同様にします。
og:site_name
ページのサイト名を指定します。
og:url
ページのURLを指定します。
ここでのURLは絶対パスで記述する必要があります。
og:image
SNSでシェアされた際に表示する画像を指定します。
Fecebook では、1200x630 以上、8MB 以下、縦横比 1.91:1 の画像を推奨しています
og:url同様に絶対パスで記述する必要があります。
og:locale
ページの言語を指定します。
日本語の場合は「ja_JP」と記述します。
og:type
ページの種類を指定します。
代表的な種類としては以下が挙げられます。
- website：サイトのトップページ
- blog：ブログのトップページ
- article：記事ページ、サイトのトップページ以外
fb:app_id
組織でサイトを管理している場合などに使用します。
App-IDはhttps://developers.facebook.com/から取得することができます。
twitter:card
Twitterでのカードの表示タイプを指定します。
カードの種類は以下の4つがあります。
- summary：一般的な形。タイトル、説明、OGP画像を表示します。
- summary_large_image：summaryのOGP画像が大きい形。
- app：アプリ配布用。アプリ名、説明、アイコンなどを表示します。
- player：ビデオ、オーディオなどのメディアを表示。
favicon（ファビコン）
<link rel="icon" type="image/png" href="./assets/favicon.png">
ファビコンを設定するための記述です。
ファビコンとは、ブラウザのタブやブックマークバーなどに表示されるアイコンのことです。
サイトのシンボルマーク・イメージ付けとして大事なアイコンでもあるので、できるだけ設定しておくことをおすすめします。
apple-touch-icon
<link rel="apple-touch-icon" href="./assets/apple-touch-icon.png" sizes="180x180">
スマートフォンでホーム画面に追加したときや、ショートカットを作成した場合に表示されるアイコンを設定するための記述です。
こちらもファビコン同様に設定しておくことをおすすめします。
まとめ
基本的なmetaタグについての説明でした。
正しく設定することで、SEO効果にも繋がってきますので是非参考にしていただければと思います。
