HOME内部対策 > HTMLの見出しを良くする5つのノウハウ

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

2017/03/17内部対策[最終更新日]:2017/03/22
このエントリーをはてなブックマークに追加

HTMLの見出しを最適化し、デザインやタグを調整しながら、サイト運用する方法があります。

今回は、HTMLの見出しタグについて、HTMLの見出しをCSSでデザインする(色・装飾を施す)方法、HTMLの見出しサンプルについて中心に解説したいと思います。

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR

HTMLの見出しタグについて

HTMLの見出しタグは、h1、h2、h3といったHTMLタグで囲まれた見出しのことをさします。

記述例:
<h1>大見出し</h1>
<h2>小見出し</h2>

HTMLの見出しは、主にテキストで記述されますが、画像にも適用することが可能です。

記述例:
<h1><img src=”midashi.jpg” alt=”大見出し”/></h1>

また、「h1タグの使い方とSEO効果まとめ」をご覧いただくことで、より理解が深まると思います。

HTMLの見出しをCSSでデザインする(色・装飾を施す)方法

HTMLの見出しをCSSでデザインする(色・装飾を施す)には、以下のような方法があります。

HTMLの見出しに背景画像を入れる
HTMLの見出しに背景色を入れる
HTMLの見出しの大きさ(フォントサイズ)を調整する
HTMLの見出しの位置(中央揃え・右寄せ・左寄せ)を調整する

HTMLの見出しをCSSでデザインする(色・装飾を施す)方法

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

・外部CSSを使う
背景画像用のプロパティ・値を記述したCSSファイル(スタイルシート)を読み込ませ、HTMLの見出しをデザインする

記述例:
/* 外部CSSファイル */
h1 {
background-image:url(“../images/midashi.gif”);
}

<!– HTMLファイル –>
<h1>見出し</h1>

・CSSを直接記述する
CSS(背景画像用のプロパティ・値)をHTMLファイルに直接記述し、HTMLの見出しをデザインする

記述例:
<h1 style=”background-image:url(‘../images/midashi.gif’);”>見出し</h1>

うまく背景画像が表示されない場合は、シングルクオート、ダブルクオートの調整をしてみましょう。

HTMLの見出しに背景色を入れる

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

・外部CSSを使う
背景色用のプロパティ・値を記述したCSSファイル(スタイルシート)を読み込ませ、HTMLの見出しをデザインする

記述例:
/* 外部CSSファイル */
h1 {
background-color: #FF0000;
}

<!– HTMLファイル –>
<h1>見出し</h1>

・CSSを直接記述する
CSS(背景色像用のプロパティ・値)をHTMLファイルに直接記述し、HTMLの見出しをデザインする

記述例:
<h1 style=”background-color: #FF0000;”>見出し</h1>

HTMLの見出しの大きさ(フォントサイズ)を調整する

HTMLの見出しの大きさ(フォントサイズ)を調整するには、以下のような方法があります。

・外部CSSを使う
フォントサイズ用のプロパティ・値を記述したCSSファイル(スタイルシート)を読み込ませ、HTMLの見出しをデザインする

記述例:
/* 外部CSSファイル */
h1 {
font-size:16px;
}

<!– HTMLファイル –>
<h1>見出し</h1>

・CSSを直接記述する
CSS(フォントサイズ用のプロパティ・値)をHTMLファイルに直接記述し、HTMLの見出しをデザインする

記述例:
<h1 style=”font-size:16px;”>見出し</h1>

HTMLの見出しの位置(中央揃え・右寄せ・左寄せ)を調整する

HTMLの見出しの位置(中央揃え・右寄せ・左寄せ)を調整するには、以下のような方法があります。

・外部CSSを使う
フォントサイズ用のプロパティ・値を記述したCSSファイル(スタイルシート)を読み込ませ、HTMLの見出しをデザインする

記述例:
/* 外部CSSファイル */
h1 {
text-align:center;/*中央揃え*/
}

<!– HTMLファイル –>
<h1>見出し</h1>

・CSSを直接記述する
CSS(フォントサイズ用のプロパティ・値)をHTMLファイルに直接記述し、HTMLの見出しをデザインする

記述例:
<h1 style=”text-align:center;”>見出し</h1>

また、右寄せは「text-align:center;」、左寄せは「text-align:left;」で、HTMLの見出しの位置を調整できます。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLの見出しサンプル

HTMLの見出しサンプルは、以下のようなサイトが参考になりそうです。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。

少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ
HTML・CSSがセットになったH見出しなどの素晴らしい見出しデザインのサンプルとなるようなページをまとめてみました。

見出しデザインフリー素材集(サンプル)CSS・HTMLタグも!
画像とCSS・HTMLタグを合わせて紹介してる見出しデザインの素材・サンプル集です。

HTMLの見出しに画像を使う

HTMLの見出しに画像を使うケースがありますが、Googleは重要なものをテキストで記述するよう促してます。
※参考:【SEO】検索上位化に必要な文字数は?

見出しはWebページのコンテンツを瞬時に把握するための重要な要素といえます。
どんなコンテンツがあるのか、ユーザー・クローラーがより認識しやすいようテキストで記述する必要があります。

HTMLの見出しに画像を使ってもSEO的にマイナスはなさそうですが、alt属性に画像内容を記述しておくことが大切といえます。
※参考:<h1>タグに画像を使用することはスパム行為とみなされますか?

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLの見出しをリンクにする

HTMLの見出しをリンクにしても問題はないようです。
h1、h2、h3タグ内にアンカーリンク(aタグ)を使用しても、検索順位に悪影響を及ぼすことはないといえそうです。
※参考:hタグ内にテキストリンクは問題ないですか?

記述例:
<h1><a href=”#”>見出し</a></h1>

HTMLの見出しへリンクする

HTMLの見出しへリンクするには、以下のよう「ページ内リンク」を利用します。
※参考:ページ内リンク(ジャンプ)のHTML・HTML5記述法

記述例:
<p><a href=”#midashi”>見出しへジャンプする</a></p>

<h1><span id=”midashi”>見出し</span></h1>

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLの見出しの改行

HTMLの見出しの改行を行っても、文法的に問題はありません。

基本的に見出しタグは、簡潔で短めの文言にすることが大切です。

仮に、brタグで改行しても、モバイル・PC・タブレット端末によって見出しの見え方が変わってくることも考えられます。

まとめ

HTMLの見出しを最適化し、わかりやすいコンテンツにしましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。