HTMLの見出しの使い方と見た目の設定方法について | SEOラボ

SEOに関する実験やデータ分析などを公開します

SEOラボ

HTMLの見出しの使い方と見た目の設定方法について

2017/03/17 2018/03/15

SEOでは、htmlの見出し(hタグ)をh1から順に適切に設置することはもちろん、ユーザーにとっての「見やすさ」といったデザインを調整することも重要です。

それはh1から順に重要度が変化するように、見た目からもそういった目立ち方の優劣を付けることによって、ポイントとなる箇所に目が行くようになります。

検索ユーザーは基本、記事やコンテンツを流し読みし、本当に必要な箇所を見つけています。
そのため、見出しをコンテンツ毎に設置することが重要となり、その重要度を示す見た目を用意しておく必要があるということです。

では今回は、htmlの見出しタグについて、cssを利用して色・装飾を施すといったデザインをする方法をご説明したいと思います。

htmlの見出しを良くする5つのノウハウ

htmlの見出しの使い方について

htmlの見出しタグは、h1、h2…といったh6までのタグで囲まれた部分を指します。
これはh1に設定した見出しについて、さらに詳しく説明する場合にh2を用いて見出しを設定し、必要であれば下記のように入れ子にしてコンテンツを構築していきます。
※必ずしもh1~6まで使わなければいけないわけではありません。

また、h1タグのSEO効果などについては、こちらの記事もぜひご覧下さい。
h1タグとは?使い方とSEO効果についてまとめ

見出しをcssでデザインするには?

htmlの見出しは先ほどもご説明した通り、ユーザーにもわかりやすいようにcssを使用して色や装飾を工夫してデザインする必要があります。

見出しの使い方はh1から使い、順に重要度が下がります。
そのため、見た目もh1が一番目立っていた方がユーザーにとってわかりやすいかと思われます。

他のサイトがどういった見出しを設定しているのか?など参考にしてみて、見やすくデザインしましょう。

背景画像を使う

htmlの見出しに背景画像を入れるには、以下のような方法があります。

cssに記述して表示させる

背景画像用のプロパティ・値を記述したcssファイルを読み込んでデザイン調整します。

さらに、リストマークのようにワンポイントとして表示させたい場合は追記で「background-repeat」でリピートを指定し、「background-position」で位置などを調整して表示させます。

または、cssをhtmlファイルに直接記述し、見出しを調整することも可能です。

うまく背景画像が表示されない場合は、画像へのパスが正しいかどうか確認してみましょう。

背景色を表示する

見出しに背景色を表示させる場合にも、cssにその設定を記述します。
この場合は「background-color」、または「background」を使用して背景色を調整します。

また、この背景色にはグラデーションも設定することができます。
この場合、対応しているブラウザなどによって記述方法も異なりますので、こちらを参考に調整してみると良いでしょう。
参考:linear-gradient()-CSS3リファレンス

フォントサイズ・色を調整する

見出しの大きさ(フォントサイズ)や色を調整するには、以下のように指定します。
フォントサイズ用のプロパティ「font-size」や色を指定する「color」に値を記述したcssファイル(スタイルシート)を読み込ませ、見出しをデザインしましょう。

先ほどもご説明した通り、見出しタグはh1が一番重要となります。
そのため、自然とh1から順にフォントサイズを落としていくデザインになるとわかりやすいでしょう。
あとは、見た目を工夫してデザインします。

ボーダーを表示する

見出しを装飾するには、ボーダーを表示させるといったデザインもよく見かけるかと思います。
例えば、見出しの左にポイントとなる色を少し太めに表示させることによって、ユーザーは目に止まりやすくなります。
こういった見出しのデザインを工夫して読みやすいコンテンツにすることが大切です。

下記の場合だと、h1の見出しの左に6pxの赤い直線を表示させ、さらに下線として1pxの薄いグレーの直線を表示させています。
この場合、paddingで余白を調整してデザインしましょう。

位置(中央揃え・右寄せ・左寄せ)を調整する

見出しの位置を調整するには、フォントサイズ用のプロパティ「text-align」に表示させたい値を記述したcssを読み込ませて調整しましょう。

見出しタグは基本ブロック要素なので、単純に「text-align」でcenterやrightなどを指定することによって、位置を調整することができます。

その他見出しの設定

見出しは通常、テキストで簡潔に設置しておきたいところですが、場合によっては画像で表示したり、改行や見出しタグの中に入れ子でタグを入れたい場合など、デザインによっては様々な状況が考えられます。

その場合でも、検索エンジンにコンテンツを正しく評価してもらうためにも、しっかりと見出しタグを設定しておきましょう。

画像を見出しに使う

見出しは主にテキストで記述されますが、画像にも適用することが可能です。
見出しタグはそのページ内で重要な内容のテキストを示すため、画像で表示する場合は、しっかりとaltタグにそのテキストを入力して検索エンジンに内容を適切に伝えるようにしましょう。

Googleは重要なキーワードなどはテキストで記述するよう促してます。
それは、クローラーが理解し、コンテンツを正しくインデックスするためです。

そのため、本来ならテキストに表示させておきたいところですが…場合によっては見出しに画像を使う場合は、必ずalt属性に画像に表示されている内容を記述しておきましょう。
もちろん、対策ワードを詰め込むのではなく、適宜内容に沿ったテキストを設置しておきます。

それによってユーザーが見て内容を把握するように、検索エンジンもそこに何が書かれているのかを知るための指標となります。
ユーザビリティとクローラビリティともに考慮した見出しが重要となります。

htmlの見出しへリンクする

ページの利便性を高めるために、よく目次などの「ページ内リンク」を設置しているページを見かけるかと思います。

こういった場合のように、h1、h2、h3などの見出しタグ内にアンカーリンク(aタグ)を使用しても、極端な数を設置するといった使い方を除けば、検索順位に悪影響を及ぼすことはありません。

下記のように、必要があれば通常のリンク設定と同じように設置しておきましょう。
移動先には「id」を設定して、リンク元には「#」を付けて指定します。

この場合、pタグで囲まれた「見出しへジャンプする」リンクをクリックすると、h1タグへジャンプするhtml記述となります。

見出しの改行について

見出しの内容が長い場合など、わかりやすく見せるために改行したい場合があります。
そういった場合でも、hタグ内に改行タグを記述して、見出しの改行を行っても文法的に問題はありません。

しかし、基本的に見出しタグは簡潔で短めの文言にすることが大切です。
仮に、brタグで改行しても、モバイル・PC・タブレット端末によって見出しの見え方が変わってくることも考えられます。

PCでは改行しないで、スマホの場合だけ改行させたい場合はレスポンシブデザインによるPC用のcssに下記を記述することによって、改行を消すことも可能です。

まとめ

今回は見出しタグについて、使い方や表現方法についてご説明してきましたが、クローラビリティはもちろん、ユーザーのためにも見た目もわかりやすいコンテンツにしましょう。

見出しタグは検索順位にも関わる重要なSEOの要素です。
しっかしりとキーワードを含めたわかりやすいテキストを心がけてください。

コンテンツ内に重要度を付け、コンテンツを構築していくことが重要です。

関連記事SEO対策とは?SEOの対策ポイントについて

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら