本記事では、メタタグの基本と書き方について書いていきます。
メタタグって何気につかっていて、実際のところ「どんな意味があるのか」って考えたことなく終わってました。
私も０からWeb業界に入りましたが、学習していく上でSEOのことを学びますが、結構簡単で済まされていることが多く、特に初学者にとっては、HTMLの構築には直接関係ないもの。といえばそれまでなので、優先度低めなのでしょうがないです。
でも、実務となると、そこそこ優先度高なのも事実。
ということで、本記事で整理しておこうと思います。
- metaタグの記述方法
- metaタグの意味と使い方
- OGPの設定方法
- metaタグを使用したデモ
- 1 <meta>とは？Webサイトの基本情報を設定する。
- 2 <meta>の一覧（コピペ用）
- 3 <meta>タグの使用頻度が高い属性と値。
- 3.1 charsetを設定しないとどうなるのか。
- 3.2 descriptionはクリック率の向上が期待できるが、検索結果に直接的な影響はない。
- 3.3 keywordsを設定してクローラーにサイトの内容を伝える。
- 3.4 viewportで設定する「視覚化領域」とは。設定しないとどうなる？
- 3.5 robotsでクローラーの動作を制御する。
- 3.6 name=”format-detection”を設定することでデザイン崩れを防ぐ。
- 3.7 theme-colorを設定してアドレスバーの色を変更する。
- 3.8 IEへレンダリング方法を指定して、最新の方法をレンダリングさせる。
- 3.9 rel=”canonical”でURLを正規化してSEOの分散を防ぐ。
- 4 OGP関連の<meta>タグの使用方法
- 5 property=”og:url”は正規化したURLを記載する。
<meta>とは？Webサイトの基本情報を設定する。
<meta>タグとは、属性と値を指定して、Webサイトの基本的な情報を記述していくタグです。
記述された内容は、検索エンジンのクローラーが読み取り、検索順位に影響を与えます。
記述は、<head>内に行います。
<meta>の一覧（コピペ用）
設定するメタタグの一覧を載せておきます。
詳細は、後述します。
<meta charset="UTF-8">
<meta name=”description” content=”ここにメタディスクリプションのテキストを記述”>
<meta name=”keywords” content=”キーワード,キーワード,キーワード,キーワード,キーワード”>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta name="robots" content="ここを変更します">
<meta name="format-detection" content="telephone=no, email=no, address=no">
<meta name="theme-color" content="#fff">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="正規ページのURL">
<meta property="og:image" content="">
<meta property="og:image:alt" content="テキスト">
<meta property="og:locale" content="ja_JP">
<meta property="og:description" content="ディスクリプション">
<meta property="og:url" content=" ページの URL">
<meta property="og:title" content="タイトルのテキストが入ります。"><meta>タグの使用頻度が高い属性と値。
実務の中で仕様頻度の高い<meta>タグを以下に紹介していきます。
デモで確認できるところは、デモも作ってありますので、参考にしてみてください。
| 用途 | 属性と値 |
| 文字コードの指定 | charset=”UTF-8″ |
| サイトの説明 | name=”description” |
| キーワードの指定 | name=”keywords” |
| 視覚化領域の設定 | name=”viewport” |
| クローラーに対する指示 | name=”robots” |
| IEへの対策 | http-equiv=”Content-Type” |
| リンクの自動化の防止 | name=”format-detection” |
| アドレスバーの配色 | name=”theme-color” |
| URLの正規化 | <link rel="canonical" href="URL"> |
それぞれ、詳しく解説していきます。
charsetを設定しないとどうなるのか。
<meta charset="文字コード">charsetは、設定しないとテキストが文字化けします。
まずは、デモサイトをご覧ください。
どちらも、同じテキストを表示させようとしています。
必要なら、検証画面を開いていただき、コードを確認してください。
ブラウザが、Webページのテキストを正しく解釈するために、charset=”UTF-8″を指定します。
文字コード（UTF-8）は、ブラウザ（コンピューター）が文字を理解するためのコードです。
日本語に限らず、テキストをそのまま記述してもブラウザ（コンピューター）は理解できないので、符号化方式という方法を使い、認識できる形に変換してあげます。
descriptionはクリック率の向上が期待できるが、検索結果に直接的な影響はない。
<meta name=”description” content=”ここにメタディスクリプションのテキストを記述”>descriptionの値に設定したテキストは、検索結果表示画面のタイトル下に表示されます。
ページの要約（概要）が表示されることで、クリック率の向上が見込めます。
下の参考画像の赤枠の部分です。
ただし、検索順位に直接的な影響はありません。
これは、オフィシャルでの回答にもあります。
次にdescriptionを設定しないとどうなるのか。についてですが、設定していない場合は、自動的にサイト内のコンテンツから適切なテキストが選定されます。
逆に設定していても、自動的に選定されたテキストが表示されることがあります。
理由としては、設定したdescriptionの内容がサイト内の内容に対して適切ではないと、Googleが判断しているからです。
descriptionを設定するときは、サイト内の内容と比較して、適切な内容になっているのか確認しましょう。
できるだけ、重要な内容は文章の前半に入れるようにしましょう。
keywordsを設定してクローラーにサイトの内容を伝える。
<meta name=”keywords” content=”キーワード,キーワード,キーワード,キーワード,キーワード”>keywordsは、サイト内の重要なキーワードを設定して、クローラーに伝えるために記述します。
しかし、現在では検索エンジンのクローラーも進化しており、ページの情報を読み取れるため、設定は不要とされています。
設定したとしても検索順位に影響を与えることはないようです。
現時点で設定するメリットとしては、キーワード管理に使用される場合があるようです。
重複コンテンツを避けたり、キーワード管理が煩雑になってしまう場合に設定すると、一覧で確認できるため管理が楽になります。
キーワードは、最大でも５つまでか最適とされています。
要は、詰め込み過ぎてはいけない。といういことです。
当然ですが、誤字脱字には注意しましょう。
viewportで設定する「視覚化領域」とは。設定しないとどうなる？
<meta name=”viewport” content=”width=device-width,initial-scale=1″>ストレートに解説すると、視覚化領域とは、コンテンツが実際に画面上に表示される領域を示します。
と、説明しても分かりずらいと思いますので、デモを用意しました。
デモサイトを開いたら、検証機能でウインドウ幅を変えてみてください。
スマホの方は、開くだけで違いがわかると思います。
viewportは、デバイスの画面サイズや、解像度に合わせてページを最適に表示させる役割をもちます。設定していない方は、解像度によってページが適切に表示されないため、文字や画像が小さくなってしまい、とても見れたものではないはずです。
設定している方は、横スクロールこそしてしまいますが、適切に表示されているので拡大をすることなくサイトの内容を確認できていると思います。
要は、viewportはHTMLでのレスポンシブ対応です。viewportを設定することで、ブラウザがデバイスを判断できるようになります。
robotsでクローラーの動作を制御する。
<meta name="robots" content="ここを変更します">robotsの値に設定した内容で、クローラーの動作を生業することができます。
例えば、インデックスされたくないページには、値へnoindexとしてあげれば、インデックスされません。そのほかにも、検索結果画面でタイトル右側（下記参考画像の赤枠内）の画像を非表示にしたりも可能です。
検索結果画面でタイトル右側（下記参考画像の赤枠内）は、サイト内の画像を自動で選択して表示していますので、サイトに関係のない画像（サンプルの画像など）が表示されてしまうこともあります。それを避けたい場合などは、robotsに指定してあげれば防ぐことができます。
設定方法は以下の通りです。
| 値 | 内容 |
| all | 制限なし。 |
| noindex | 検索結果に表示されません。Googleへインデックスはされます。 |
| nofollow | ページ内のリンクからリンク先のページを見つけることができなくなります。 |
| none | noindex、nofollowの両方を設定したい場合。 |
| noarchive | 検索エンジンにページキャッシュを残しません。ユーザーを検索エンジンのキャッシュされたページにアクセスさせたくない場合に設定します。 |
| nosnippet | 検索結果にスニペット（サイトの説明文）や動画のプレビューを非表示にする。 |
| max-snippet:[number] | スニペット（サイトの説明文）の文字数を設定します。0：nosnippetと同じ。-1：Googleにより適切と考えうるスニペットの長さが選択されます。 |
| max-image-preview:[setting] | 検索結果タイトル横のプレビュー画像の設定をします。none：非表示にします。 standard：デフォルトの大きさの画像サイズになります。 large：ビューポートの幅に合わせます。 |
| max-video-preview:[number] | 検索結果の動画プレビューの再生時間（秒）の設定ができます。[number] 部分には秒数を入れます。0：静止画像のみ。max-image-previewの設定に準じます。-1：制限なし。 |
| notranslate | ユーザーの設定言語とWebページの言語が異なると翻訳版のリンクが表示されるが、それを非表示にする。 |
| noimageindex | 画像だけをインデックスの登録をさせないようにします。設定したページ内のみで、同一画像が別ページにも設定されている場合は、別ページの設定に準ずる。 |
| unavailable_after:Wed, 16 Jul 2025 12:30:00 +0000 | 設定した日付以降のクロールを中止して、検索結果に表示させません。 |
上記の設定は、Googleの検索エンジンへの対策のため、検索エンジンによっては処理が異なることがあります。ご注意ください。
name=”format-detection”を設定することでデザイン崩れを防ぐ。
<meta name="format-detection" content="telephone=no, email=no, address=no">日付やURL、住所、メールアドレスは、<meta>タグで指定しないと、自動的に<a>タグが挿入されてしまいます。
予期せぬ形で<a>が挿入されると、HTML構造が変更になってしまうため、CSSが適切に適用されない場合があります。
防ぐために、自動リンク化を無効にしましょう。
theme-colorを設定してアドレスバーの色を変更する。
//fffの部分にカラーコードを指定します。
<meta name="theme-color" content="#fff">theme-colorを設定することで、アドレスバーの色を変更することができます。
サイトのテーマカラーと合わせて、統一感を持たせると、サイトの完成度が上がります。
当然ですが、theme-colorをサポートしていないブラウザもあるため、注意してください。
また、ブラウザがサポートしている場合でも、一時的なエラーや、Androidのバージョンによっても変化が見られない場合もあります。
試したところ、pixel7aでChromeのアドレスバーの変更が反映しなかったこともありました。
クロームは、theme-colorをサポートしているブラウザなので、本来であれば問題なく反映するのですが、今回は反映が確認されませんでした。
原因は、以下のことが考えられます。
- Chromeのバージョンによる一時的なエラー
- Androidのバージョン
- ブラウザの設定
こちらもデモサイトを用意しましたので、気になる方は以下のサイトをスマホで開いて見てみてください。
IEへレンダリング方法を指定して、最新の方法をレンダリングさせる。
<meta http-equiv="X-UA-Compatible" content="IE=edge">IEは少し特殊なブラウザなので、レンダリング方法を明示的に指定してあげる必要があります。
指定しないと、表示崩れや、動作に影響がでてしまうことがあります。
【表示が崩れる原因】
- IEはバージョンごとに異なるレンダリングをする。
- 互換性モードで表示が崩れる。（最新機の一部制限）
IEは、昔から社内のシステムなどで使われてきた経緯があります。そのため、互換性モードや、古いレンダリング方法を担保することで、古いシステムでも表示崩れや、動作不良が起きないように配慮してきました。
ただ、解決方法は簡単です。
方法は、上記のコードを<head>内に記載するだけです。
今では、IEの後継機がありますので、昔ほど重要ではなくなりましたが、ユーザーがいることも確かなので、設定しておくことをおすすめします。
rel=”canonical”でURLを正規化してSEOの分散を防ぐ。
<link rel="canonical" href="正規ページのURL"><meta>タグではありませんが、rel=”canonical”でURLを正規化しておきましょう。
URLの正規化って？を説明しておきます。
例えば…
- https://test.com
- https://www.test.com
の２つのURLがあるとします。
そして、どちらのURLも同じページに遷移します。
その場合、SEOの評価はどうなると思いますか？
結論、分散してしまい、正しく評価を受けることができません。
URLの正規化は、２つの同一のページに遷移するURLへの評価を、設定した１つのURLにまとめることができます。
設定をしないと、それぞれ評価がついてしまうので、検索順位に大きく影響してしまいます。
以下、検索順位も含んだデメリットです。
- 検索順位への影響
- クローク率の低下
- ユーザーの混乱
rel=”canonical”の設定方法
前述した、例を使って説明します。
まず、評価はhttps://test.comに集めたいとします。
<link rel="canonical" href="https://test.com">これで、https://www.test.comへのアクセスなど、評価をhttps://test.comにまとめることができます。
その他にも、指定する際は、以下に注意しましょう。
- フルパス（絶対パス）で指定する。
- URLへパラメータを付与しない。
<meta>タグではありませんが、重要なタグなので必ず設定しておきましょう。
OGP関連の<meta>タグの使用方法
サイト制作をするにあたり、OGPの<meta>タグを設定することも忘れてはなりません。
SNSでシェアしてもらった際、クリック率の上昇に繋がり、サイトへのアクセス増加を見込めます。
| 用途 | 属性と値 |
| 画像を設定 | property=”og:image” |
| 画像の説明 | property=”og:image:alt” |
| 言語と対象地域を指定 | property=”og:locale” |
| 概要テキスト | property=”og:description” |
| 正規URLの設定 | property=”og:url” |
| タイトル | property=”og:title” |
property=”og:image”を設定して画像で視覚的効果を上げる。
<meta property="og:image" content="">SNSなどのプラットフォームでシェアされたときに表示するが画像を設定します。
content=””の中に絶対パスで画像を指定してあげてください。
画像（サムネイル）を設定することで、以下の効果を得られます。
- 視覚的な訴求
- 内容の伝達
- ブランディング
property=”og:image:alt”を設定してアクセシビリティを向上させる。
<meta property="og:image:alt" content="テキスト">property=”og:image:alt”は、imgタグのaltと同じ用途です。
スクリーンリーダーを使用しているユーザーや、何らかの原因でproperty=”og:image”で指定した画像が表示されなかったときに代わりに文字を表示してくれます。
property=”og:locale”で的確な言語と対象地域を設定する。
//日本語（日本）
<meta property="og:locale" content="ja_JP">
//英語（アメリカ合衆国）
<meta property="og:locale" content="en_US">property=”og:locale”を設定をすることで、SNSなどのプラットフォームはどの言語で記述されているか判別して、適切なユーザーに表示したり、翻訳機能を提供したりできるようになります。
適切な表示や扱いを受けるために重要なメタタグとなります。
- 言語コード: ISO 639-1 の2文字の言語コード (例: ja は日本語、en は英語)
- 国コード: ISO 3166-1 alpha-2 の2文字の国コード (例: JP は日本、US はアメリカ合衆国)
property=”og:description”でWebページの内容を簡潔に伝える。
<meta property="og:description" content="ディスクリプション">name=”description”と同じで、設定した内容がシェアされたときに表示されます。要約文（概要）を記述しましょう。name=”description”と同じ内容で問題ないでしょう。
目的としては、魅力的な文章を設定することでクリック率の向上が見込めます。
また、設定されていない場合、ソーシャルメディア側が自動的にテキストを抽出して表示させることがあります。意図しない文書が表示されてしまうケースもあるため、設定しておき、表示されるテキストを制御しましょう。
・クリック率の向上
・意図しない文書を表示させない
property=”og:url”は正規化したURLを記載する。
<meta property="og:url" content=" ページの URL" />設定する場合は、絶対パスで指定して、正規化したURLと同じ設定をします。
検索エンジンの評価分散、クロール率の低下、ユーザーの混乱を防ぐためにも、正規URLを設定しておきましょう。
property=”og:title”は<title>とは違う設定をしてクリック率を向上させる。
<meta property="og:title" content="タイトルのテキストが入ります。"><title>タグとは同じでもいいですが、別のテキストにしても構いません。別のテキストにする意図としては、SNSでシェアされたときのクリック率の向上につながる可能性があるからです。SNSでは、よりキャッチーなタイトルを設定することが望ましいです。というのも、検索と違い、ユーザーが求めて表示されているコンテンツではないからです。SNSなどでは、スクロールしているときに不意に画面に入ってくる。ということが少なくありません。そのため、検索結果と同じタイトルよりも、よりキャッチーなタイトルにしておいた方が、クリック率の向上が見込めます。
テキストを決めるときの基本は、タイトルと同じですが、下記のことをより意識してテキストを考えてみてください。
- コンテンツの主題を明確に伝える。
- ユーザーの興味をひく。
最後になりましたが、クリック率以外にもproperty=”og:title”は、「ソーシャルメディアでの表示を最適化」する目的も含んでいます。