メタタグとは？
メタタグ（metaタグ）は、HTMLドキュメントの<head>セクション内で使われ、Webページに関する情報を提供するタグです。この情報はページの外観やコンテンツの直接的な表示に影響しない場合が多いですが、検索エンジンやブラウザに対する重要な指示を行うために使われます。
主な役割
検索エンジンへの情報提供
検索エンジンに対して、ページの内容を説明したり、特定のインデックスやクロールの方法を指示します。たとえば、descriptionメタタグは、ページの概要を指定し、検索結果でのスニペット（説明文）として表示されることがあります。
<meta name="description" content="このページはWebサイトの基本情報を解説しています。">SEO対策
キーワードを示すkeywordsタグや、robotsタグでクロールやインデックスの制御を行うことで、SEO対策に貢献する場合があります。ただし、近年では一部のメタタグの重要性が減少しているため、注意が必要です。
ページの表示方法を制御
ページのエンコード情報、表示幅、キャッシュ制御、リダイレクトなど、ブラウザの挙動や表示方法に影響を与えるメタタグもあります。
例: モバイル対応の表示を指定するviewportタグ
<meta name="viewport" content="width=device-width, initial-scale=1.0">
よく使われるメタタグの例
charset: ページの文字エンコードを指定します。
<meta charset="UTF-8">
robots: クローラーに対する指示を与えます。
<meta name="robots" content="noindex, nofollow">
author: ページ作成者を指定します。
<meta name="author" content="Haraguchi Yuuichi">
メタタグ(metaタグ)一覧表
以下は、Web開発でよく使用される主要なmetaタグの一覧です。それぞれが特定の目的を持ち、ページの表示や検索エンジンへの影響をコントロールします。
charset
ページの文字エンコードを指定します。通常はUTF-8が推奨されます。
<meta charset="UTF-8">
viewport
レスポンシブデザインにおいて、デバイスの画面幅に応じてページを適切に表示するためのタグです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
description
ページの説明を示すタグで、検索結果のスニペットに表示される可能性があります。SEOにおいて重要です。
<meta name="description" content="このページの説明内容です。">
keywords（※近年ではほとんど使われません）
ページに関連するキーワードを示すタグですが、現在の検索エンジンはほとんど無視します。
<meta name="keywords" content="keyword1, keyword2, keyword3">
author
ページ作成者を示すタグです。
<meta name="author" content="Haraguchi Yuuichi">
robots
検索エンジンのクロールやインデックスの方法を制御するタグです。
<meta name="robots" content="noindex, nofollow">
http-equiv
HTTPヘッダーと同じ役割を果たす属性で、キャッシュ制御やリダイレクトを指示できます。
<meta http-equiv="refresh" content="5; url=https://example.com">
og:title, og:description, og:imageなどのOpen Graphプロトコル
ソーシャルメディアでのシェア時にページのタイトル、説明、画像を指定します。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/image.jpg">
twitter:card
X(旧Twitter)でシェアした際にどう表示されるかを指定します。
<meta name="twitter:card" content="summary_large_image">
refresh
ページを特定の時間後に自動で更新またはリダイレクトします。
<meta http-equiv="refresh" content="30">
content-type（レガシー）
HTMLのコンテンツタイプを示すものですが、charsetタグが主流になっています。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
theme-color
ブラウザやOSがページを表示する際に、テーマカラーを指定します。特にモバイル環境で効果的です。
<meta name="theme-color" content="#ffffff">
referrer
リンクをクリックした際にどの範囲の参照元情報を送信するかを制御します。
<meta name="referrer" content="no-referrer">
application-name
Webアプリケーションの名前を指定します。
<meta name="application-name" content="My App">
コメント