「HTML/CSSは書けるようになってきたけど、SEOを意識した“正しいコーディング”ができているか不安…」と感じたことはありませんか？

SEOは難しい理論から入ると挫折しやすいですが、実はHTMLだけでも今すぐ改善できる項目がいくつもあります。特に初心者のうちは、検索エンジンにページ内容を正しく伝える「基本」を押さえるだけで十分効果的です。

結論：最短で直る！HTML SEOのチェックポイント5つ

先に結論です。コーディング初心者がまず実装すべきHTMLのSEO対策は、次の5つです。

• titleをページ内容に合わせて具体的にする
• meta descriptionで内容を要約する（SNSにも影響）
• 見出し（h1〜h3）を「構造」として正しく使う
• 画像のalt属性で内容をテキスト化する
• 内部リンクに意味のあるアンカーテキストを使う

理由はシンプルで、検索エンジンはHTMLから「このページが何について書かれているか」を読み取るからです。まずは検索エンジンに誤解されないHTMLを作るのが最優先です。

「早く知りたい」方向けに、原因→対処の表も置いておきます。

原因→対処（最短で改善するための早見表）

基本1：titleタグを「検索結果で伝わる文章」にする

titleタグはSEOの最重要項目のひとつです。検索結果に表示されやすく、クリック率にも影響します。

ポイント（結論）

• ページ固有の内容を書く（テンプレのままにしない）
• 狙うキーワードはなるべく前方に入れる
• 長すぎない（目安：30文字前後）

最小例（よくあるNG）

<title>HOME</title>

改善例（内容＋キーワードが伝わる）

<title>HTMLでできるSEO対策の基本5選｜メタタグ・見出し・alt属性</title>

注意：titleは「キーワードを詰め込めばOK」ではありません。人が見て意味が通る文章を優先してください。

基本2：meta descriptionで「ページの要約」を用意する

meta descriptionは直接の順位要因ではないと言われることもありますが、検索結果のスニペット（説明文）に使われやすく、クリック率に影響します。SNSでシェアされた際の説明文としても役立ちます。

ポイント（結論）

• ページ内容を1〜2文で要約する
• 誰の、どんな悩みを、どう解決するかを入れる
• 目安：80〜120文字程度（長すぎない）

実装例（コピペして調整OK）

<meta name="description" content="HTML/CSSの基礎は分かるけどSEOが不安…という初心者向けに、title・meta・見出し・alt属性などコーディング時に最低限押さえるSEO対策を5つ解説します。">

注意：全ページ同じdescriptionにすると「どのページも同じ内容」に見えやすいので、できるだけページごとに書き分けましょう。

基本3：見出し（h1〜h3）は「デザイン」ではなく「構造」で使う

見出しタグ（h1〜h6）は、検索エンジンにもユーザーにも「このページの話題のまとまり」を伝える重要な手がかりです。

結論：まずはこのルールだけ守ればOK

• h1は基本1ページに1つ（そのページの主題）
• 大見出しはh2、小見出しはh3（階層を飛ばさない）
• 見た目はCSSで整える（hタグのレベルでサイズ調整しない）

よくあるNG例（見た目優先で階層が崩れる）

<h1>サービス紹介</h1>
<h4>特徴</h4>
<h2>料金</h2>

改善例（h1→h2→h3で整理する）

<h1>サービス紹介</h1>
<h2>特徴</h2>
<h3>初心者でも使いやすい</h3>
<h2>料金</h2>

「h1は1つ」は厳密には例外もありますが、初心者の制作ではまず崩れない型として覚えておくのが安全です。

基本4：画像のalt属性で「画像の意味」をテキスト化する

alt属性は、画像が表示できないときの代替テキストであり、検索エンジンにも画像の内容を伝える役割があります。さらに、スクリーンリーダー利用者にとって重要な情報になるため、SEOとアクセシビリティの両方でメリットがあります。

alt属性の考え方をより深く知りたい場合は、サイト内の解説も参考になります。 [Source](https://uptechdesign.com/img-alt-attribute-guide/)

結論：altは「何が写っていて、何のための画像か」を短く書く

• 装飾目的の画像なら alt=””（空）も選択肢
• 内容が重要な画像なら、具体的に説明する
• キーワードの詰め込みはしない（不自然な文章はNG）

最小例（ありがちなNG）

<img src="team.jpg" alt="image">

改善例（役割が伝わる）

<img src="team.jpg" alt="制作チームが打ち合わせをしている様子">

注意：ボタン画像やアイコンなど「クリックして何をするか」が重要な場合は、見た目より機能（目的）が伝わるaltを意識すると良いです。

基本5：内部リンクは「こちら」ではなく、内容がわかる文言にする

内部リンクは、ユーザーの回遊を助けるだけでなく、検索エンジンにも「関連ページの関係性」を伝えます。ここで初心者がやりがちなのが、アンカーテキストが全部「こちら」になるパターンです。

結論：リンク文言だけ読んでも意味が通るようにする

• NG：「こちら」「詳細」
• OK：「料金プランを見る」「制作実績へ」「お問い合わせフォームへ」

コード例（NG→OK）

<!-- NG例 -->
<a href="/price/">こちら</a>
<!-- OK例 -->
<a href="/price/">料金プランを見る</a>

もし文章の流れ的に「こちら」を使いたい場合は、「料金プランはこちら」のように名詞を添えるだけでも改善します。

（おまけ）初心者が見落としやすい“HTML SEO”の詰まりポイント

最後に、制作時によくある「やってるつもりなのに効いてない」ポイントをまとめます。

meta viewportがない（モバイルで崩れる）

SEOはコンテンツだけでなく、ユーザー体験も重要です。モバイルで崩れると離脱につながりやすいので、viewportは基本として入れておきましょう。

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

見た目を整えるためにdivだけで組んでしまう

デザイン都合でdivを増やしすぎると、構造が読み取りづらくなります。可能な範囲で、header/main/section/nav/figureなどの意味のある要素を使う意識を持つと、HTMLの品質が上がります。

よくある質問

Q1. meta keywordsは書いたほうがいいですか？

基本的には不要です。現在は多くの検索エンジンで重視されにくく、スパム対策として評価対象外になっていることもあります。初心者はtitle/description/見出し/altを優先しましょう。

Q2. h1は本当に1ページに1つが正解ですか？

例外はありますが、初心者の制作では「h1は1つ」にしておくと構造が安定しやすいです。迷ったら「ページ全体の主題＝h1」「章＝h2」「節＝h3」で組み立てるのがおすすめです。

Q3. alt属性にキーワードを入れたほうがSEOに強いですか？

キーワードを目的にした不自然な文章は避けましょう。altはあくまで画像の説明です。結果的にページテーマと一致する言葉が自然に入るのはOKですが、詰め込みは逆効果になり得ます。

Q4. 画像が多いページはSEO的に不利ですか？

一概に不利ではありません。画像は理解を助けます。ただし、表示が遅いと離脱につながるため、適切な圧縮やサイズ調整、lazy-loadなどの配慮は必要です。

Q5. HTMLだけやってもSEOは伸びますか？

HTMLの整備は「土台」です。土台が整うと評価されやすくなりますが、最終的にはコンテンツ品質やサイト設計、表示速度なども関わります。まずは本記事の5項目で最低限のミスを潰すところから始めましょう。

まとめ

HTMLのSEO対策は、難しい理論よりも「検索エンジンに内容を正しく伝える」基本が大切です。初心者のうちは次の5つを実装できれば、コーディング品質が一段上がります。

• titleを具体的にする
• meta descriptionで要約する
• 見出しタグを構造として使う
• 画像のaltで意味を伝える
• 内部リンクの文言を分かりやすくする

次のアクションとしては、今回の5項目を「自分の制作物チェック」に使って、直したらSearch Console（導入できるなら）でインデックス状況を確認する、という流れがおすすめです。