HTMLやCSSを使い、Webサイトの更新・修正は一通りできるようになった。そこからもう一段できることを増やしたい、そんな方に向けた新連載。
人気連載「HTML・CSSのいろは」からほんの少しステップアップした内容を、書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんが解説します。
今回は「SEOの基本と正しいHTML」。何からはじめていいのか迷ってしまうSEOですが、まずは基本をおさえるところから確認してみましょう。
ゼロから始めるSEO
Webサイトは、見つけてもらわないと、誰も読んでくれません。多くの人にページを見つけてもらうには、何よりもGoogleなどの検索エンジンで、検索結果に表示されることが重要です。
より多くの人にページを見てもらうためのポイントは、大きく分けて3つあります。
- 検索エンジンの検索結果に表示されること
- それも、できるだけ上位の順位に出てくること
- そして、検索結果のリンクをタップ/クリックしてもらうこと
この3つをクリアするようなWebサイト・Webページを作るための施策がSEO(Search Engine Optimization, 検索エンジン最適化) です。
この記事では、SEOに取り組む基本的な作業のうち、おもにHTMLの編集を中心とした技術的な内容を解説します。
1.一番大事なのはページの内容、だけれど
2. 適切なリンクを設定し、正しいHTMLを書く
3. タイトルをつける・見出しをつける
4. わかりやすい見出しをつける
さいごに
1. 一番大事なのはページの内容、だけれど
SEOにとってもっとも大事なのは、ページの内容が優れていることです。大事なのは、コンテンツを「検索エンジン」のために作るのではなく、あくまで「来て、読んでくれる読者」の役に立つように作ることを心がけます。
Googleが公開しているテキストでは、ご自分のWebサイトや運営を担当しているWebサイトのコンテンツを、「そのコンテンツを見たり、読んだりする実際のユーザーの立場になって、次のことを冷静に、客観的に検証してください」と、書かれています。重要な点を抜粋・編集して紹介します。
- コンテンツには独自の情報が含まれていますか
- 付加価値とオリジナリティを生み出せていますか
- 別のWebページやその他のソースの、単なるコピペになっていませんか
- 雑誌、百科事典、書籍に掲載または引用されるような価値がありますか
- 自分でもブックマークしたり、友人にすすめたいと思えるようなページになっていますか
参照） 「有用で信頼性の高い、ユーザーを第一に考えたコンテンツの作成」Google検索セントラル, https://developers.google.com/search/docs/fundamentals/creating-helpful-content?hl=ja
さらにまとめて言うならば、「どこかのコピーではなく、オリジナリティがあり、読みたくなるような記事を作る」ということです。なかなか難しいですが、少しでも内容がよくなるよう、日頃の努力が欠かせません。
こうした、価値の高いコンテンツを作った上で、「Googleに見つけてもらい、読者に見つけてもらう」ために、技術的にできることがあります。
HTMLの面から考えると、検索エンジンに相性のよいページを作るには、まずは次の4つのポイントに気をつけます。
- 適切なリンクを設定し、正しいHTMLを書く
- 必ずタイトルをつける
- ページには見出しをつけて読みやすくする
- この4つほど重要ではないが、内容を短くまとめたディスクリプション（説明）もつけるとよい
実はこの4つ以外にもう1つ、「画像に適切なalt属性を設定する」ことも重要なのですが、画像のほかのトピックと併せて別の記事で取り上げます。この記事では詳しく説明しませんのでご了承ください。
2. 適切なリンクを設定し、正しいHTMLを書く
検索エンジンは、世界中に数千億あると言われるWebページの全文を事前にスキャンし、「インデックス」と呼ばれる、書籍の索引のようなデータベースを構築しています＊。
情報を探しているユーザーが検索するときは、このインデックスの中から関連性の高いページが結果として表示されています。逆にいえば、インデックスに登録されていないページは、検索しても結果に表示されません。
このスキャンは、「クローラー」と呼ばれるプログラムを使って、完全に自動的に行われています。クローラーは、ページに含まれるリンクをたどって、「次のページ、次のページ」というふうに、ページを見つけていくため、ページがインデックスに登録されるためには、別のページから「リンクされている」必要があります。
▲クローラーはリンクをたどってページを見つけ、全文をインデックスに登録する
＊参考）「情報の整理 - Google 検索の仕組み」Google Search, https://www.google.com/intl/ja_ALL/search/howsearchworks/how-search-works/organizing-information/
■正しい<a>タグを書く
クローラーが認識する<a>タグは、「href属性があり、リンク先のページがどのようなものか想像できる、簡潔なコンテンツ（開始タグと終了タグに囲まれるテキストまたは画像）が含まれる」ものです。良い例と悪い例を見てみましょう。
良い例：href属性がある<a>タグで、過不足ないコンテンツがある
<a href= "https://developers.google.com/search?hl=ja ">Google検索セントラル</a>
画像にリンクしても大丈夫です。ただし、リンク対象になる<img>タグには必ずalt属性をつけ、画像を説明するテキストを含めます。クローラーはalt属性を認識します。
良い例：画像をリンクにしてもOK。ただしalt属性に画像の内容を説明するテキストをつける
<a href="espresso.html"><img src="espresso.jpg" alt="エスプレッソモード"></a>
コンテンツがない<a>タグを作ってはいけません。
悪い例：コンテンツがない
<a href= "https://developers.google.com/search?hl=ja "></a>
コンテンツがあっても、おおざっぱすぎるものは認められません。実際、「こちら」というテキストのリンクを作ることはよくあるかもしれません。しかしそれは、リンク先のページの内容が明快ではなく、読者にもSEOにも適切ではありません。
悪い例：コンテンツのテキストがおおざっぱすぎる
詳しくは<a href= "https://exmaple.com ">こちら</a>
Google検索セントラルにはこれ以外にもいろいろな例が載っています。興味がある方は、次のリンク先のページを参照してください。
参考）「Google の SEO リンクに関するベスト プラクティス」Google検索セントラル, https://developers.google.com/search/docs/crawling-indexing/links-crawlable?hl=ja#write-good-anchor-text
■サイト内のページ間は確実にリンクする
クローラーはリンクをたどってページを見つけます。そこで、少なくとも運営しているサイト内のページは、サイトの内の別のページから、確実にリンクしておくことが大事です。そのためには、「パンくずリスト」を作成するのが間違いない方法です。
▲パンくずリストの例 出典）Google検索セントラル https://developers.google.com/search?hl=ja）
パンくずリストのHTMLも挙げておきます。
パンくずリストのHTML例
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="works.html">作品一覧</a></li>
<li><a href="app-ui.html">アプリUI</a></li>
</ol>
3. タイトルをつける・見出しをつける
ページのタイトルと見出しはSEOにとって極めて重要です。タイトルは、検索結果に表示されます。つまり、検索をしたユーザーはタイトルを見て、「このページにしよう」と判断してタップ / クリックしますし、検索エンジンも、タイトルや見出しに書かれている内容を重視します。
■タイトルのつけ方
ページのタイトルは<title>タグで書き、<head>〜<head>の中に含めます。
<title>の中にはテキストだけ含めることができ、タグが入っていてもすべて無視されます。
titleタグ前後の基本的な記述法
<title>タイトルテキスト</title>
ページを表示するブラウザではタブに短く表示されます。また、ページをブックマークしたときは、デフォルトではタイトルがブックマーク名になります。
▲タイトルはタブの名前として表示される（左：iPhone Safari 右：パソコン Google Chrome）
タブに表示されるだけなので重要性を感じにくいかもしれません。しかし、検索結果ページでは、ページのタイトルはリンクテキストになります。
▲検索結果の表示例。タイトルがリンクになっている
ページをSNSでシェアすると、タイトルがカードのタイトルになります。タイトルが断然重要になってきます。
▲SNS（X）でシェアすると、ページのタイトルがカードのタイトルになる
検索結果ページやSNSでシェアしたときの表示を見ると、タイトルの重要性が理解できるでしょう。タイトルは、ユーザーとの最初の接点であり、タップ / クリックしてページを見てもらえるかどうかの強力な判断材料になります。
このことから考えて、調べたい情報を探している検索ユーザーやSNSのユーザーにタップ / クリックしてもらえるようなタイトルをつけることがポイントです。つまり、「ユーザーはどんな情報を求めているのか？」を考えて、その観点からページの内容を要約するよう心がけましょう。
ページの信頼性を高めるために、Webサイトのタイトルや運営している組織の組織名などを含めるのも良いでしょう。たとえば、この記事が掲載されている itstaffing エンジニアスタイルのページは、次の例のように、「ページのタイトル - Webサイトの名前」になっています。
▲ページのタイトルとWebサイトの名前で構成されている
検索することを考えて、タイトルには、そのページの内容を表す重要な語で、かつ、情報を探しているユーザーが知りたそうな（＝検索しそうな）語を含めます。
さらに、長すぎず、短すぎないようにするのがポイントです。
Googleの検索結果では、日本語の全角文字で30〜35字、欧文半角文字で55文字〜60文字より長くなると、それ以降は省略され、「...」に置き換わります。そのため、タイトルは原則としてそれより短い文字数にします。タイトルの後ろにWebサイトの名前や組織名が付いて全体に長くなるようなら、せめて、ページのタイトルが省略されないような長さにします。
なお、WordPressなどのCMSを使って運営している場合、タイトルは自動的につくことが多く、自由にコントロールできないかもしれません。しかし、多くのCMSは次のようなフォーマットでタイトルをつけます。
▲CMSがつけるタイトルの典型的なフォーマット
ですから、CMSでページを作成する場合は、そのページの一番重要な大見出しのテキストを、「検索されるとき」のことを考えてつけるのが大事です。
4. わかりやすい見出しをつける
ページの大見出しのテキストも大事です。ブラウザでページを見ているとき、ページの大見出しはユーザーから見て、おそらく一番目立つテキストになるでしょう。内容を判断するのに大事な情報になります。また、検索エンジンは見出しの内容も、タイトルと並んで重視しているようです。
見出しのつけ方は、タイトルとほぼ同じです。ページの端的で簡潔な要約になるようなテキストにし、かつ検索されやすいキーワードを含めます。なお、前述のとおりCMSでは見出しのテキストがタイトルにもなりますので、基本的には、「タイトル＝見出し」と考えてかまいません（見出しには、Webサイト名や組織名を含める必要はありません）。
■ディスクリプションをつける
ディスクリプションとは、ページの内容を要約したテキストのことです。HTMLでは <meta name=“description”>タグでつけます。content属性の値に、ページの内容を要約したテキストを、ダブルクォートで囲んで記述します。この、content属性の値がディスクリプションになります。
<meta name=“description”>の書き方
<meta name= "description " content= "ページの内容を要約したテキスト">
ディスクリプションは検索結果のスニペットに表示されることがあります。スニペットとは、タイトルテキストのリンクの下に表示されるテキストのことです。
▲検索結果のスニペット。ページのタイトルの下に表示される説明のテキスト
スニペットには、検索エンジンが自動生成した要約テキスト（通常はページのテキストの先頭部分）や、ディスクリプションが表示されます。ディスクリプションをつけるのは必須ではありませんが、少なくともWebサイトの重要なページや人気でよく見られるページにはつけたほうがよいでしょう。
なお、ディスクリプションには、ページの内容に則した、そのページに固有のテキストをつけるようにします。違うページに同じディスクリプションをつけるのは避けます。
さいごに
Webサイトが検索結果に表示されやすくするための施策をSEOと言います。SEOにとって何よりも重要なことは、検索して、見に来てくれる読者に有益な情報を伝えたり、楽しんでもらえるコンテンツを作ることです。
その上で、ページのHTML編集上の注意点としては、正しくリンクを書くこと、適切なタイトルや見出しをつけること、少なくとも重要なページにはディスクリプション（説明）テキストをつけること、この4点を心がけます。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年7月時点のものです。
