SEOで効果を出すheadタグのコツ

Webサイトを作るときに、目には見えないけど超重要なのが「headタグ」の設定。これをちゃんとやるだけで、検索エンジンで上位表示されやすくなります。この記事では、誰でも実践できるheadタグの作り方をわかりやすく説明します。

headタグってなに？
1. headタグの基本構造
必須のheadタグとその使い方
チェックリスト
役立つリンク

headタグってなに？

簡単に言うと、headタグは検索エンジンやブラウザに「このページはこういう内容です」って教えるための情報をまとめた部分です。直接サイトの見た目には出てきませんが、以下のようなことに役立ちます。

検索エンジンにページの内容を伝える
SNSでシェアされたときの表示を決める
サイトの読み込みを速くする

headタグの基本構造

以下はheadタグの基本の形です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サイトのタイトル</title>
</head>
<body>
    <!-- サイトの本文 -->
</body>
</html>

これをベースにSEOに強いタグを追加していきます。

必須のheadタグとその使い方

1. タイトルタグ（title）

検索結果で一番目立つ部分です。ここに重要なキーワードを入れましょう。

ポイント

50文字以内が目安
重要なキーワードを左側に入れる
ユーザーがクリックしたくなる内容にする

例

<title>簡単にできるSEO向けheadタグの設定方法</title>

2. メタディスクリプション（meta description）

検索結果でタイトルの下に表示される説明文です。検索順位には直接影響しませんが、クリック率を上げる効果があります。

ポイント

120〜160文字くらいに収める
ページの内容を簡潔に説明する
行動を促すフレーズを入れる（例を参照に）

例

<meta name="description" content="headタグを使ったSEO対策を簡単に解説。初心者でもすぐに使える具体例付き！">

3. OGPタグ

SNSでシェアされたときの見た目を設定します。画像やタイトルをきれいに表示させるためのものです。

必須タグ

<meta property="og:title" content="SEO向けheadタグの基本">
<meta property="og:description" content="このページではheadタグを活用したSEO対策を解説しています。">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/seo-guide">
<meta property="og:type" content="website">

4. Canonicalタグ

同じ内容のページが複数ある場合に「このURLが正しいです」と検索エンジンに教えるタグです。

例

<link rel="canonical" href="https://example.com/seo-guide">

5. Viewportタグ

スマホやタブレットなどの画面サイズに合わせて表示を調整するためのタグです。

例

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

6. 構造化データ（Schema.org）

ページの内容をもっと詳しく検索エンジンに伝える仕組みです。これを入れると、検索結果に「リッチスニペット」という特別な表示が出ることがあります。

例（JSON-LD形式）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEO向けheadタグの基本",
  "author": "サイト運営者",
  "publisher": {
    "@type": "Organization",
    "name": "サイト名"
  },
  "datePublished": "2024-12-26"
}
</script>