お問い合わせ
お問い合わせ
ホーム > HTML > HTMLのmetaタグの使い方｜SEOとSNSに効く基本設定

HTMLのmetaタグの使い方｜SEOとSNSに効く基本設定

HTML
HTMLのmetaタグの使い方を図解｜SEOとSNSに効く基本設定ガイド
HTMLのmetaタグの構造とSEO・SNS設定の関係を図解でわかりやすく解説

はじめに：metaタグとは？

metaタグとは、ページのメタ情報（検索エンジンやSNSなどに伝える情報）を記述するためのHTMLタグです。
ユーザーには直接表示されませんが、SEO対策やSNSシェア時の見え方に大きく関わる重要な要素です。

💡 ポイント
metaタグを正しく設定することで、検索結果のクリック率やSNSでの拡散率が向上します。

基本構文と設置場所

metaタグは、HTML文書の<head>内に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTMLのmetaタグの基本構文とSEO・SNS設定をわかりやすく解説します。">
  <meta name="keywords" content="HTML, metaタグ, SEO, OGP, SNS">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLのmetaタグの使い方｜SEOとSNSに効く基本設定</title>
</head>
<body>
  ...
</body>
</html>

主要なmetaタグと役割

① charset：文字コードの指定

<meta charset="UTF-8">

文字化けを防ぐためのタグです。日本語サイトではUTF-8が一般的。

② description：ページ概要（SEOに重要）

<meta name="description" content="この記事では、HTMLのmetaタグの使い方とSEO・SNSへの影響を基礎から解説します。">
  • 検索結果に表示される「説明文」に利用されます。
  • 目安：80〜120文字程度

📝 関連：
👉 SEOに強い記事構造の作り方｜初心者向け完全ガイド
👉 All in One SEOの使い方｜基本設定とOGPの設定手順

③ keywords：キーワード設定（現在は非推奨）

<meta name="keywords" content="HTML, metaタグ, SEO, SNS">

以前はSEOに影響しましたが、現在のGoogleでは評価対象外です。
メモ用途程度にとどめましょう。

④ viewport：スマホ表示対応（必須）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レスポンシブデザイン対応に必須。
設定しないと、スマホでの表示が極端に小さくなります。

📝 関連：
👉 HTMLのhead要素の使い方まとめ

SEOに効くmetaタグ設定のポイント

1. descriptionは「検索意図＋メリット」を入れる

検索ユーザーがクリックしたくなる要約を意識しましょう。

例：

metaタグを正しく設定すれば、検索順位だけでなくSNSでも見栄えがアップします。本記事では初心者向けに基本から解説。

2. titleタグとの整合性を保つ

<title>と<meta name="description">の内容は整合性を持たせましょう。
両者が矛盾しているとSEO評価が下がる場合があります。

📝 関連：
👉 SEOに強いブログタイトルの付け方｜効果的なキーワード配置とは

SNS（OGP）設定との関係

SNSシェア時に、metaタグの情報が活用されます。
以下のようにOGPタグを追加しておくと、シェア時にアイキャッチやタイトルが綺麗に表示されます。

<meta property="og:title" content="HTMLのmetaタグの使い方｜SEOとSNSに効く基本設定">
<meta property="og:description" content="metaタグの基本を理解してSEOとSNSの見え方を最適化しよう。">
<meta property="og:image" content="https://example.com/images/meta-tag-ogp.jpg">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/meta-tag">
<meta property="og:site_name" content="Yagi-System">

📝 関連：
👉 OGP設定の基本｜SNSシェアでの見え方を整える

SNS別：表示に使われるmeta情報

SNS使われるタグ表示内容
X（旧Twitter）twitter:title, twitter:description, twitter:image投稿カード
Facebookog:title, og:description, og:imageサムネイル付きリンク
LINEog:title, og:description, og:imageプレビュー付きリンク

実装時の注意点

  • 日本語サイトでは必ず <meta charset="UTF-8"> を最初に。
  • descriptionにキーワードを詰め込みすぎない。
  • OGPの画像は1200×630px程度が最適。
  • 同じ内容のmetaタグを重複して書かない。

まとめ：metaタグは「見えないけど超重要」

metaタグは、サイトの裏側からSEO・SNS・ユーザー体験を支える存在です。
1つ1つのタグの意味を理解して、正しく設定していきましょう。

💬 まとめポイント

  • metaタグは<head>内に記述する
  • descriptionでクリック率を上げる
  • OGPでSNSシェア時の見え方を整える
  • titleタグとdescriptionの整合性が重要

関連記事リンク