SEO効果UP！タグの正しい書き方【初心者でもわかる完全ガイド】

「ホームページを作ったけど、なかなか検索結果に表示されない…」

「SEO対策って聞いたことあるけど、何から始めたらいいかわからない…」

そんな悩みをお持ちのあなたへ。

SEO対策の基本中の基本、 タグの正しい書き方 をマスターしませんか？

タグは、ホームページを作る時に使う、特別な「指示書」みたいなもの。検索エンジンはこの「指示書」を読んで、ホームページの内容を理解し、検索結果に表示するかどうかを判断します。

つまり、タグを正しく書けば、検索エンジンにホームページの内容を正しく伝え、検索結果の上位表示を狙うことができるんです！

この記事では、SEOに効果的なタグの書き方について、具体的に解説します。

titleタグ
meta descriptionタグ
hタグ
alt属性
noindexタグ
canonicalタグ
hreflangタグ

などなど…

これらのタグを適切に使うことで、SEO効果を高め、より多くのユーザーに、あなたのWEBサイトを見てもらうことができます。

さらに、構造化データの活用やモバイルフレンドリーについても解説。 SEO対策の基礎知識を、この機会にしっかり身につけてしまいましょう！

1 SEOに効果的なタグとは？
2 titleタグの書き方
3 meta descriptionタグの書き方
4 見出しタグ（hタグ）の書き方
5 alt属性の書き方
6 その他の重要なタグ
7 構造化データの活用
8 タグの書き方に関するよくある質問
9 まとめ｜タグの書き方をマスターしてSEO効果を高めよう

SEOに効果的なタグとは？

SEO対策に欠かせないのがタグなんです。

タグっていうのは、WEBサイトを作る時に使う、特別な「指示書」みたいなもの。検索エンジンはこの「指示書」を読んで、WEBサイトの内容を理解します。

だから、タグを正しく書けば、検索エンジンにサイトの内容を正しく伝えられます。

「このページは、○○について書かれたページですよ」「この見出しは、ページの中で特に重要な部分ですよ」

みたいに、教えてあげることができるんです。

するとどうなるか？

検索エンジンは、「このページは、ユーザーが求めている情報に合致している！」と判断して、検索結果の上位に表示してくれるようになります。

つまり、タグを正しく使うことは、 SEO対策の基本中の基本 なんです。

タグには色々な種類があって、それぞれ役割が違います。

代表的なタグをいくつか紹介しましょう。

titleタグ: ページのタイトルを指定するタグ
meta descriptionタグ: ページの内容を簡単に説明するタグ
hタグ: 見出しを指定するタグ
alt属性: 画像の内容を説明するタグ

これらのタグを適切に使うことで、SEO効果を高め、より多くのユーザーにサイトを見てもらうことができるようになります。

この記事では、SEOに効果的なタグの書き方について、具体的に解説していきます。

titleタグの書き方

titleタグは、検索結果に表示されるページのタイトルです。検索ユーザーが最初に目にする部分なので、SEOにおいて非常に重要です。

titleタグを適切に設定することで、

検索結果でクリックされる確率を高め、アクセス数を増やすことができます。
ページの内容を正確に検索エンジンに伝えることができます。

では、具体的にどのようにtitleタグを書けば良いのでしょうか？

titleタグの基本的な書き方

titleタグは、<head>タグ内に記述します。


<head>
  <title>ページタイトル</title>
</head>

基本的な書き方は以下の通りです。

ページの内容を簡潔にまとめたタイトルをつけましょう。
キーワードを盛り込みましょう。ただし、キーワードの詰め込みすぎは逆効果になる可能性があります。
文字数は32〜40文字程度を目安にしましょう。長すぎると検索結果で省略されてしまいます。
サイト名を最後につけましょう。区切り文字には「｜」や「-」などを使用します。

titleタグの具体例

例えば、このブログ記事のtitleタグは、


<title>SEO効果UP！タグの正しい書き方【初心者でもわかる完全ガイド】</title>

のように設定しています。

titleタグの注意点

各ページにユニークなtitleタグを設定しましょう。
ユーザーがクリックしたくなるような魅力的なタイトルにしましょう。
誇張した表現や不適切なキーワードは使用しないようにしましょう。

titleタグは、SEO対策において非常に重要な要素です。適切に設定することで、検索順位の向上、アクセス数の増加に繋がり、最終的にはビジネスの成功に貢献することができます。

meta descriptionタグの書き方

meta descriptionタグって何か知ってますか？これは、検索結果に表示されるページの説明文のことです。 titleタグの下に表示される、あの短い文章ですね。

このmeta descriptionタグ、SEOに直接影響するわけではありません。でも、検索結果でクリックされるかどうかを左右する、重要な要素なんです。

魅力的な説明文なら、「おっ、面白そうだな！」とクリックしたくなりますよね？逆に、説明文がイマイチだと、スルーされてしまう可能性が高くなります。

クリック率が高ければ、それだけ多くの人があなたのサイトを訪れてくれます。結果として、SEO効果にも良い影響を与える可能性があります。

meta descriptionタグの基本的な書き方

meta descriptionタグは、<head>タグ内に記述します。


<head>
  <meta name="description" content="ページの説明文">
</head>

基本的な書き方は以下の通りです。

ページの内容を簡潔に要約しましょう。
キーワードを盛り込みましょう。ただし、キーワードの詰め込みすぎは避けましょう。
文字数は160文字程度を目安にしましょう。長すぎると検索結果で省略されてしまいます。
読者に語りかけるような、行動を促す言葉を加えましょう。例えば、「詳しくはこちら」「今すぐチェック」などです。

meta descriptionタグの具体例

例えば、あるクリニックのホームページのmeta descriptionタグなら、


<meta name="description" content="地域密着型の〇〇クリニック。内科・小児科・皮膚科に対応。経験豊富な医師が丁寧な診療を行います。お子様連れの方も安心のキッズスペース完備。 web予約受付中。">

のように設定できます。

meta descriptionタグの注意点

各ページにユニークなmeta descriptionタグを設定しましょう。
ユーザーがクリックしたくなるような魅力的な説明文を心がけましょう。
誇張した表現や不適切なキーワードは使用しないようにしましょう。

meta descriptionタグは、ユーザーに「このページを見てみよう！」と思わせるための重要な要素です。魅力的な説明文を作成して、アクセス数を増やしましょう。

見出しタグ（hタグ）の書き方

見出しタグとは、ホームページやブログの記事などで、見出し をつける時に使うタグのことです。

例えば、この記事でも、「見出しタグ（hタグ）の書き方」というのが見出しですね。

見出しタグは、h1からh6までの6段階があります。

h1：ページのタイトル（一番大きな見出し）
h2：h1の下位の見出し
h3：h2の下位の見出し
h4：h3の下位の見出し
h5：h4の下位の見出し
h6：h5の下位の見出し

というように、階層構造になっています。

見出しタグの基本的な書き方

見出しタグは、<h1>～<h6>タグで囲みます。


<h1>ページタイトル</h1>
<h2>見出し1</h2>
<h3>見出し2</h3>

見出しタグの役割

見出しタグは、ページの構成をわかりやすく示すために使います。

ユーザーにとって：記事を読みやすく、理解しやすくなります。
検索エンジンにとって：ページの構造を理解しやすくなり、SEO効果を高めることができます。

見出しタグの書き方のポイント

見出しタグを効果的に使うためのポイントは以下の通りです。

h1タグはページ内で1つだけ使用しましょう。
hタグは階層構造を意識して使用しましょう。
各見出しに適切なキーワードを含めましょう。
ユーザーが興味を持つような見出しをつけましょう。

見出しタグを正しく使うことで、ユーザーにも検索エンジンにも優しいページを作ることができます。

alt属性の書き方

alt属性ってご存知ですか？これは、画像に付ける説明文のことです。サイトに画像を載せる時、<img>タグの中に記述します。

例えば、


<img src="image.jpg" alt="クリニックの外観">

のように記述します。

alt属性の役割

alt属性は、主に以下の3つの役割があります。

画像の内容を検索エンジンに伝える
検索エンジンは、画像を直接理解することができません。alt属性で画像の内容を説明することで、検索エンジンが画像を認識し、適切に評価できるようになります。
画像が表示されない場合に代替テキストを表示する
ユーザーの通信環境によっては、画像が表示されない場合があります。alt属性を設定しておけば、画像の代わりに説明文が表示されるので、ユーザーは画像の内容を把握することができます。
アクセシビリティの向上
視覚障碍者の方は、スクリーンリーダーを使用してWebサイトを閲覧します。alt属性を設定することで、スクリーンリーダーが画像の内容を読み上げることができるようになり、アクセシビリティが向上します。

alt属性の書き方のポイント

alt属性を効果的に使うためのポイントは以下の通りです。

画像の内容を簡潔に説明しましょう。
キーワードを含めるようにしましょう。ただし、キーワードの詰め込みすぎは避けましょう。
装飾目的の画像には、alt属性を空にするか、alt=""と記述しましょう。

alt属性の記述例

画像	alt属性の記述例
クリニックの外観写真	「〇〇クリニックの外観」
診察室の写真	「清潔感のある診察室」
医師の写真	「〇〇医師」

alt属性を正しく設定することで、SEO効果を高め、より多くのユーザーにサイトを見てもらうことができます。

その他の重要なタグ

titleタグ、meta descriptionタグ、hタグ以外にも、SEOに効果的なタグはたくさんあります。ここでは、特に重要な3つのタグを紹介します。

noindexタグ

noindexタグは、検索エンジンに「このページを検索結果に表示しないで」と指示するタグです。

例えば、

期間限定のキャンペーンページ
会員限定ページ
テスト用のページ

など、検索結果に表示する必要のないページにnoindexタグを設定します。

noindexタグは、<head>タグ内に記述します。


<head>
  <meta name="robots" content="noindex">
</head>

canonicalタグ

canonicalタグは、複数のURLで同じ内容のページが存在する場合に、正規化するページを指定するタグです。

例えば、

PCサイトとモバイルサイトで同じ内容のページがある場合
URLにパラメータが付与されたページがある場合

など、重複コンテンツが発生する場合にcanonicalタグを設定します。

canonicalタグは、<head>タグ内に記述します。


<head>
  <link rel="canonical" href="正規化するページのURL">
</head>

hreflangタグ

hreflangタグは、複数の言語で同じ内容のページがある場合に、各言語のページを指定するタグです。

例えば、日本語版、英語版、中国語版のページがある場合、hreflangタグを設定することで、各言語のユーザーに適切なページを表示することができます。

hreflangタグは、<head>タグ内に記述します。


<head>
  <link rel="alternate" hreflang="ja" href="日本語版のURL">
  <link rel="alternate" hreflang="en" href="英語版のURL">
  <link rel="alternate" hreflang="zh" href="中国語版のURL">
</head>

これらのタグを適切に使うことで、SEO効果を高め、より多くのユーザーにサイトを見てもらうことができます。

構造化データの活用

構造化データって、ちょっと聞き慣れない言葉ですよね？簡単に言うと、サイトの情報を検索エンジンにわかりやすく伝えるためのデータのことです。

例えば、クリニックのホームページなら、

クリニックの名前
住所
電話番号
診療時間
診療科目

などの情報を、構造化データとして記述することができます。

構造化データのメリット

構造化データを使うと、検索エンジンがサイトの内容をより正確に理解できるようになります。

その結果、

検索結果にリッチリザルトを表示できる
検索順位が向上する
クリック率が向上する

などの効果が期待できます。

リッチリザルトとは、検索結果に表示される、画像や評価などの追加情報のことです。リッチリザルトを表示することで、検索結果で目立つようになり、クリック率を高めることができます。

構造化データの種類

構造化データには、様々な種類があります。

ローカルビジネス: クリニック、飲食店、美容院などの情報を記述する
記事: ブログ記事やニュース記事などの情報を記述する
商品: 商品の価格、在庫状況、レビューなどの情報を記述する
イベント: イベントの日時、場所、出演者などの情報を記述する

など、サイトの内容に合わせて適切な構造化データを使用する必要があります。

構造化データの記述方法

構造化データは、JSON-LDという形式で記述するのが一般的です。 JSON-LDは、JavaScriptのオブジェクト表記法を拡張したもので、人間にも機械にも読みやすい形式です。

構造化データは、<head>タグ内に記述します。


<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "〇〇クリニック",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "〇〇市〇〇町1-2-3",
        "addressLocality": "〇〇市",
        "addressRegion": "〇〇県",
        "postalCode": "123-4567"
      },
      "telephone": "012-345-6789",
      "openingHoursSpecification": [
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Friday"
          ],
          "opens": "09:00",
          "closes": "12:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Friday"
          ],
          "opens": "14:00",
          "closes": "18:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Saturday",
          "opens": "09:00",
          "closes": "13:00"
        }
      ],
      "medicalSpecialty": [
        "InternalMedicine",
        "Pediatrics",
        "Dermatology"
      ]
    }
  </script>
</head>

構造化データを活用することで、SEO効果を高め、より多くのユーザーにサイトを見てもらうことができます。