脱・エンジニア依頼!マーケターが知っておくべき「ブログ更新用」HTML・CSSの基礎

脱・エンジニア依頼!マーケターが知っておくべき「ブログ更新用」HTML・CSSの基礎 のビジュアル

「良い記事を書いているのに検索順位が上がらない」とお悩みではありませんか?
その原因、もしかするとHTMLタグの使い方が間違っているからかもしれません。本記事では、CSS(デザイン)には触れず、マーケターが記事構成を作る上で絶対に知っておくべき「HTMLタグ」を網羅的に解説します。
正しいタグ付けで、Googleにも読者にも愛される記事を目指しましょう。

  • 構造化hタグやリストタグを正しく使うことで、Googleが記事内容を正確に理解できる
  • リスト・(中黒)で手書きせず <ul> タグを使うだけで、SEO評価と可読性が向上する
  • 引用他サイトの文章を借りる際は、必ず <blockquote> で囲まないとペナルティのリスクがある
  • 強調文字を太くするだけの <b> ではなく、重要性を意味する <strong> を適切に使う

なぜ「正しいHTML」を書くだけでSEOが強くなるのか?

Webライティングにおいて、文章の面白さと同じくらい重要なのが「正しいHTMLタグを使うこと」です。

多くのCMS(入稿ツール)では、Wordのように文字を打つだけで記事が作れますが、その裏側でどのようなHTMLコードが生成されているか意識していますか? 不適切なタグの使い方は、検索エンジンに記事の内容を誤解させ、SEO評価を下げてしまう原因になりかねません。

Googleは「見た目」ではなく「タグ」で記事を理解する

Googleのクローラー(検索ロボット)は、私たち人間のように画面のデザインを見て「ここは見出しだな」「ここは大事なポイントだな」と判断しているわけではありません。 ソースコード上のHTMLタグを見て、文書の構造を判断しています。

  • 文字が大きくても、タグが <p> ならただの「段落」
  • 文字が小さくても、タグが <h2> なら重要な「見出し」

つまり、正しいHTMLタグを使うことは、Googleに対して「この記事はこういう構成で書かれていますよ」と説明書を渡すようなものなのです。

ユーザー体験(UX)とアクセシビリティの向上

正しいHTMLは、音声読み上げソフト(スクリーンリーダー)を利用する視覚障がいのあるユーザーにとっても重要です。 見出しやリストが正しくマークアップされていれば、音声でも「ここからが新しい章です」「3つのポイントがあります」と構造が伝わります。 アクセシビリティへの配慮は、近年SEOの評価指標としても重要度を増しています。

1. 記事の骨格を作る「構造」のタグ

まずは記事全体の設計図となる、基本のタグです。

見出し(h1〜h6):階層構造の命綱

本のような「章・節・項」を作るタグです。h1が最大で、数字が大きくなるほど下の階層になります。

  • <h1>:記事タイトル(通常は1ページに1回のみ)
  • <h2>:大見出し(記事のメインテーマ)
  • <h3>:中見出し(h2をさらに細分化したもの)
  • <h4><h6>:小見出し

NG例: 文字サイズを調整するために <h2> の直下に <h4> を使うなど、階層を飛ばすのはSEO的にNGです。必ず h2 → h3 → h4 の順で使いましょう。

段落(p)と改行(br):使い分けの鉄則

初心者の方が最も混同しやすいのがこの2つです。

  • <p> (Paragraph):段落を変える。意味のまとまりが変わる時に使う。
  • <br> (Break):改行する。同じ段落内で見た目上の行を変えたい時に使う。

文章の間隔を空けるために <br><br><br> と連打するのは推奨されません。文章が終わったら必ず <p> で区切るのが正しい作法です。

2. 読みやすさを生む「リスト・整理」のタグ

記事の中に箇条書きを入れる際、キーボードで「・」や「1.」と手打ちしていませんか? これはただの文字として認識されてしまいます。必ず以下の「リストタグ」を使いましょう。

順序なしリスト(ul / li):箇条書きの基本

順序に関係なく項目を並べる場合に使います。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>
  • <ul> (Unordered List):リスト全体の囲い
  • <li> (List Item):個々の項目

順序ありリスト(ol / li):手順やランキングに

「手順」や「ランキング」など、順番に意味がある場合に使います。自動的に 1, 2, 3... と番号が振られます。

HTML

<ol>
  <li>会員登録ボタンを押す</li>
  <li>メールアドレスを入力する</li>
  <li>認証URLをクリックする</li>
</ol>
  • <ol> (Ordered List):順序付きリストの囲い

表組み(table / tr / th / td):スペック比較に必須

料金表やスペック比較など、情報を整理して見せる際に使います。

  • <table>:表全体
  • <tr> (Table Row):表の「行」(横のライン)
  • <th> (Table Header):見出しセル(太字・中央寄せになることが多い)
  • <td> (Table Data):データセル(通常の中身)

3. 信頼性と強調を表す「意味づけ」のタグ

ただテキストを表示するだけでなく、「ここには特別な意味がある」と伝えるタグです。

引用(blockquote):著作権を守るための必須マナー

他サイトや書籍から文章を引用する場合は、必ず <blockquote> タグで囲みます。 これを使わずにコピペすると、Googleから「コピーコンテンツ(パクリ記事)」とみなされ、ペナルティを受けるリスクがあります。

HTML

<blockquote>
  <p>引用する文章をここに書きます。</p>
  <cite>出典:<a href="URL">サイト名</a></cite>
</blockquote>

強調(strong):Googleに「ここが重要」と伝える

太字にするタグには <b><strong> の2種類がありますが、意味が異なります。

  • <b>:見た目を太くするだけ(意味はない)
  • <strong>意味的に重要であることを示す

SEOを意識するなら、キーワードを含んだ重要な箇所には <strong> を使いましょう。ただし、多用しすぎると「どれが重要かわからない」と判断されるため、1見出しにつき1〜2箇所程度に留めるのがコツです。

リンク(a)と画像(img):回遊率とalt属性

  • <a>:リンクを設定します。target="_blank" をつけると別タブで開きます。内部リンクを適切に貼ることで、サイト内の回遊率が高まります。
  • <img>:画像を貼ります。必ず alt="画像の説明" を入れましょう。画像が表示されない時の代わりになるほか、画像検索からの流入も期待できます。

まとめ:HTMLはWebライティングの一部である

今回紹介したHTMLタグは、デザインのためではなく、「情報を正しく伝えるため」のものです。

  • 見出しで構造を作る
  • リストで見やすく整理する
  • 引用タグで情報の出処を明確にする

これらを意識するだけで、あなたの書く記事はGoogleにとって「理解しやすく、評価に値するコンテンツ」へと進化します。 今日からCMSのエディタ画面だけでなく、ぜひ「HTMLソース」も意識して入稿してみてください。

参考リンク

この記事は役に立ちましたか?