metaタグの設定方法・種類をわかりやすく解説！【SEO最適化】
目次
はじめに
こんにちは。今回はmetaタグについてのお話です。
Webページを作成する際、metaタグは検索エンジン最適化（SEO）やページ表示の最適化、SNS共有などの様々な場面で必要となってきますが、その種類や設定方法などがよく分かっていない、という方も多いのではないでしょうか？
この記事では基本的なmetaタグの使い方や覚えておくと良いタグの種類についてご紹介していきます。
ぜひ必要なときにコピペして使っていただければ嬉しいです。
metaタグとは何か？
そもそもmetaタグとは、HTML内のメタデータ（ページに関する情報）を提供するために使用されるタグです。
具体的な例を挙げると、そのページのタイトルやエンコーディング、モバイル端末での表示最適化の指示などです。
metaタグ自体はページの見た目に影響を与えることはありませんが、ページの情報を検索エンジンやソーシャルメディア、ブラウザに伝える役割を担っています。
多くのmetaタグは検索エンジンがページの内容をきちんと理解し、適切に評価する、いわゆるSEO最適化のために使われます。
またmetaタグを設定することによって、あらゆるSNSでページを共有する際にどのように表示されるかを決定するため、正確に設定することでクリック率の向上にもつながってきます。
metaタグの設置場所
metaタグは、必ずHTMLの<head>タグ内に設置する必要があります。
<head>には、ページタイトルやCSSのリンクなどWebページの構成情報が含まれており、metaタグもこの一部として使用されます。
<head>内に配置されることで、ブラウザや検索エンジンがページの表示や処理を行う際に、metaタグの情報を最初に読み込むことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="この記事ではmetaタグの使い方をわかりやすく解説しています。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>metaタグの設定方法・種類ををわかりやすく解説！【SEO最適化】</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ページのコンテンツはここに記述されます -->
</body>
</html>
またmetaタグは終了タグ（</meta>）がない自己完結型のタグなので、基本的にnameやcontentなどの属性を使って詳細を設定していきます。
metaタグの種類
それでは、実際のmetaタグの種類を見ていきましょう！
charset
<meta charset="UTF-8">charset属性は、Webページの文字エンコーディングを指定します。
文字エンコーディングとは、コンピュータが文字をデータとして保存したり、表示したりするために、文字を数値（バイト列）に変換する方法のことです。
Webページでは日本語や英語、中国語など世界中の異なる言語や文字が正しく表示されるように、文字エンコーディングを指定する必要があります。
UTF-8は世界中のほぼすべての言語に対応しているエンコーディングで、現在もっとも広く使われています。このタグを使わないと文字化けしてしまうことがあるので、必ず設定しましょう。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">モバイル端末での表示を最適化するために重要なタグです。
width=device-widthは、デバイスの画面幅に基づいてレイアウトを調整します。
initial-scale=1.0は、ページの初期ズームレベルを設定します。これにより、スマートフォンやタブレットで適切に表示されるようになります。
このタグを使わないとメディアクエリの指示がタブレットやスマホで有効にならないため、必ず設定しましょう。
description
<meta name="description" content="このページは、HTMLのmetaタグの使い方を紹介しています。">descriptionタグはWebページの概要を検索エンジンに伝えるためのものです。
検索結果一覧に並んだ時にタイトル下に表示されます。直接SEOに影響のあるテキストではありませんが、ユーザーが求めている情報を書いてあげることによってクリックを促す効果が期待できます。
あまりにテキストが長すぎると表示がされないため100文字程度にとどめておき、大事な情報はできるだけ前半に書いておくと良いと思います。
robots
<meta name="robots" content="index, follow">検索エンジンのクローラーの動きの制御について指定するためのものです。
「index」はインデックス化（＝検索結果への表示）を許可し、「follow」はページ内のリンクをたどらせることを許可します。
上記の記述はデフォルトで設定されているものとなるため、記述は省略しても構いません。
逆にインデックス化を防ぎたい、リンクをたどらせることを防ぎたい場合は以下の設定が必要となります。
インデックス化を防ぎたい
<meta name="robots" content="noindex">リンクをたどらせることを防ぎたい
<meta name="robots" content="nofollow">インデックス化・リンクをたどらせることの両方を防ぎたい
<meta name="robots" content="noindex, nofollow"><meta name="author" content="山田太郎">ページの作成者や著者名を指定するためのものです。企業内やクローズドな環境でのサイト管理に便利です。
OGP
Open Graph Protocolの略で、何らかの形でページ情報を共有したときに表示されるタイトルや説明文、画像、URLを指定します。
例えば、LINEでURLを投稿した際にすぐ下に表示される画像やタイトル、説明文などはこれを設定することによって表示できます。
OGPの設定をする際は、まずheadタグ（htmlタグでもOK）に対して以下の記述を行います。
これがOGPの設定をしていきます、という宣言文になります。
<head prefix="og:http://ogp.me/ns#">以下、og:⚪︎⚪︎の形でそれぞれ指定していきます。
<meta property="og:type" content="website">
<meta property="og:site_name" content="Webサイトの名前を指定">
<meta property="og:title" content="ページのタイトルを指定">
<meta property="og:description" content="タイトル下に表示されるテキストを指定">
<meta property="og:image" content="https://example.com/images/image.jpg">
<meta property="og:url" content="https://example.com/">| 種類 | 説明 |
| og:type | ページのタイプを指定 contentの値にはいくつか種類があり、一般的なWebサイトなら「website」を設定し、記事やブログなど個別の記事には「article」を設定すると良いです |
| og:site_name | Webサイトの名前を指定 |
| og:title | ページタイトルを指定 |
| og:description | タイトル下に表示されるページの説明テキストを指定 |
| og:image | タイトルなどと一緒に表示させたい画像を指定 必ず絶対パスで記述を行いましょう。 |
| og:url | ページのURLを指定 og:image同様絶対パスで指定しましょう。 |
Twitter Card
X（旧Twitter）でリンクがシェアされた際に表示される情報を指定することができるタグです。
視覚的にも情報的にも魅力的なツイートが作成され、クリック率が上がることが期待できます。
Xでのシェアが期待される場合、前述のOGPと一緒に設定をしておきましょう。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@アカウント名を指定">
<meta name="twitter:title" content="HTMLのmetaタグ解説">
<meta name="twitter:description" content="初心者向けにmetaタグの使い方を解説します。">
<meta name="twitter:image" content="https://example.com/images/twitter-image.jpg">| twitter:card | 表示形式を指定 summaryの場合は小さな正方形のサムネイル画像を設定でき、summary_large_imageは大きな画像を設定します。 |
| twitter:site | ツイートの中で表示されるアカウントハンドル（@アカウント名）を指定 |
| twitter:title | ページのタイトルを指定 |
| twitter:description | ページの説明文を指定 |
| twitter:image | 表示する画像のURLを指定 絶対パスで記述を行いましょう |
おまけ：favicon指定
<link rel="icon" href="/favicon.ico">metaタグとは異なりますが、併せて設定しておきたいのがファビコンです。
ファビコンとはブラウザのタブやブックマークに表示される小さなアイコンを指定するためのタグです。rel=”icon”でリンクを指定し、ファイルパスとファイルの種類を定義します。
多くの場合ファイルは.ico形式ですが、.pngもサポートされています。
まとめ
metaタグはページの見た目には直接影響しませんが、Webページのクリック率の向上やSEO、ユーザーエクスペリエンスに大きな影響を与える重要な要素となります。
ぜひこの記事でご紹介したタグを使いこなして制作に活かしていただけたら嬉しいです！
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！
