メタタグの基本的知識や種類と書き方について解説します。
メタタグとは？
メタタグとは、ウェブページに関する情報を検索エンジンやブラウザに伝えるための <meta …> 要素のあるHTMLタグです。
<meta name="description" content="..."> や <meta name="robots" content="..."> のように記述します。
メタタグ・titleタグ・canonicalタグの違い
「head内のタグ」として一緒に語られることが多いtitleタグとcanonicalタグですが、これらは<meta>要素ではないためメタタグではありません。
titleタグはページタイトルを指定するタグ、cはanonicalタグ正規URLを伝えるタグのため、それぞれ役割が異なります。
titleタグの詳細はこちら
検索順位とCTRを考慮したタイトルタグとメタディスクリプションの記載方法
canonicalタグの詳細はこちら
canonicalタグの記載方法
メタタグの種類
メタタグには以下の種類があります。
meta description
<meta name="description" content="ページの説明文">
meta descriptionは、ページの内容を簡潔に説明するタグです。検索結果に表示されるスニペット（タイトル下の説明文）として使用される場合があります。ただし、必ずしも設定した内容がそのまま表示されるわけではなく、Googleがページ内容をもとに別のテキストを自動生成して表示するケースもあります。
meta robots
<meta name="robots" content="noindex">
<meta name="robots" content="noindex, nofollow">
meta robotsは、検索エンジンに対して「そのページをインデックスするかどうか」「リンクをたどるかどうか」「検索結果でどのように表示するか」といった指示をページ単位で伝えるタグです。
OGP
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page/">
OGP（Open Graph Protocol）タグは、FacebookやX（旧Twitter）などのSNSでページがシェアされたときのタイトル・説明文・サムネイル画像などを制御するタグです。検索エンジン向けではなくSNSプラットフォーム向けの情報です。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
viewportタグは、モバイルデバイスでのページの表示方法をブラウザに指示するタグです。スマートフォンなどの画面サイズに合わせたレイアウトが適用されます。
charset
<meta charset="utf-8">
charsetタグは、ページで使用する文字コード（エンコーディング）を宣言するタグです。utf-8 を指定するのが一般的で、日本語を含む多言語のテキストを正しく表示するために必要です。
メタタグのSEO対策
meta robotsでインデックス可否を指示する
<meta name=”robots” content=”noindex”> を設定すると、そのページは検索結果に表示されなくなります。見せたくないページを検索結果から除外し、サイト全体のSEO品質を高めることができます。
meta descriptionでCTRを改善する
meta descriptionはGoogleのランキングシグナルではありませんが、検索結果のスニペットとして表示された場合にCTRに影響するといえます。ユーザーがページの内容をスニペットから判断してクリックするかどうかを決めるため、魅力的で内容に合った説明文を設定することは、間接的にSEOに貢献する可能性があります。
クローラーにページを正しく理解させやすくなる
charsetやviewportなどのメタタグを適切に設定することで、クローラーやブラウザがページを正しく解釈しやすくなります。また、OGPタグによるSNSでの見え方の最適化は、シェア経由のトラフィック獲得にもつながります。
メタタグの設定方法
メタタグの設定方法を紹介します。
HTMLを直接編集する場合は<head>内に1行追加するだけ
HTMLを直接編集できる場合は、<head> タグと </head> タグの間にメタタグを追加します。
<html> <head> <meta charset="utf-8"> <meta name="description" content="ページの説明文をここに入力します"> <meta name="robots" content="noindex"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページタイトル</title> </head> <body>... </body> </html>
各タグは1行ずつ記述します。<head> 内であれば順番は問いませんが、charset は文字化けを防ぐため先頭付近に記述するのが一般的です。
CMSを使う場合は設定画面から管理する
WordPress・Wix・BloggerなどのCMSを利用している場合は、HTMLを直接編集しなくてもメタタグを管理できます。CMSによって管理方法は異なりますが、SEOプラグイン（WordPressの場合はYoast SEOやAll in One SEOなど）や、CMS本体の「SEO設定」「メタ情報」といった設定画面からmeta descriptionやrobotの指定が可能です。
kunugi SEO Checkerでメタタグを確認
Chromeの拡張機能「kunugi SEO Checker」を使うと、ページのメタタグの状態を手軽に確認できます。
基本要素からmeta descriptionを確認できる
kunugi SEO Checkerの基本要素のMeta Descriptionから、そのページのmeta descriptionのテキストと文字数を確認できます。meta descriptionが設定されていない場合は説明文「未設定」、文字数「0文字」と表示されるのであわせて確認ができます。
基本要素からOGPの見え方を確認できる
kunugi SEO Checkerの基本要素のOpen Graph (OGP)から、OGPタグの設定内容をSNSシェア時のプレビューイメージに近い形で確認できます。og:imageが正しく設定されているかどうかもここでチェックできます。
メタタグ設定時に注意すべき3つのポイント
メタタグの設定時に注意すべき3つのポイントは以下の通りです。
meta keywordsは設定しても効果がないため不要
<meta name="keywords" content="メタタグ, SEO, 書き方">
かつてはターゲットキーワードを羅列するmeta keywordsが使われていましたが、現在Googleは「meta-keyword タグはインデックス登録やランキングにまったく影響しない」と明記しています。設定しても効果はなく、コードが無駄に増えるだけなので、基本的には設定不要です。
ページ内容と一致しないdescriptionは避ける
meta descriptionは、ページの内容を正確に反映した説明文にしましょう。クリック数を増やそうとして実際の内容と乖離した説明文を書いてしまうと、ページを訪問したユーザーが「思っていた内容と違う」と感じて離脱率が上がる可能性があります。
noindexの誤設定に注意する
誤って重要なページにnoindexを設定してしまうと、検索結果から完全に除外されてしまうため注意しましょう。
