BLOG

ブログ

TOP

BLOG

無料で行うネットショップのSEO対策(7) 見出しタグ

すべてStudio
Studio初心者ガイド
Studioテンプレート
Studioはじめてみた
Shopify
ネットショップ
デザイン
MA/CRM
初心者EC
世界一周

2024/1/26

[ 初回公開日:

無料で行うネットショップのSEO対策(7) 見出しタグ

こんにちは、IT+(アイティプラス)からECコンサルを受けたネットショップ店長のミキです。

今回の特集では無料でできるSEO対策をご紹介しています。 無料で行うSEO対策には色々なものがありますが、今回はその中から特に「初心者の方でもすぐに取り組めるSEO」として、以下の9つをご紹介します。 (はじめに今すぐできる!無料で行うネットショップのSEO対策~SEOとはをご覧いただいてから読み進めていただくと理解が深まります!)

  1. タイトル

  2. ディスクリプション

  3. URLの構造

  4. コンテンツ

  5. アンカーテキスト(リンク)

  6. 画像リンク(alt属性)

  7. 見出しタグ

  8. アナリティクス

  9. ウェブマスターツール

(以前の記事には各項目よりリンクしています) 本日は7の見出しタグについてです。

1、見出しタグとは?

以前、初心者必見!読者にも検索エンジンにも好かれるブログの作り方⑧~見出しの活用~でも見出しタグをご紹介しましたので重複する部分も多いですが、あらためてこちらでもご説明します。 見出しとは記事や文章において、内容の要点を単語や短い文章にまとめ、関連する章の最初に大きな文字で書かれたものです。 新聞や雑誌の見出しを思い出していただくとわかりやすいでしょうか? 例えば当ブログのタイトル文字が大文字になっているのも、<h2>タグが使われているためです。 ブログやネットショップをはじめウェブページにおいて見出しタグを使用することで、特定の文字を目立たせたりページの内容をユーザーにわかりやすく伝えることができます。更に見出しタグは単に文字を装飾するだけでなく、検索エンジンが文章全体の構成を理解しやすくなりSEOの効果も期待できます。 見出しタグにはもっとも重要であることを示す<h1>から順に、重要度のもっとも低いことを示す<h6>まで、6種類のサイズがあります。

2、見出しタグの設定方法

見出しを設定するには、以下のHTMLタグで見出しにしたいテキストを挟みます。 <h1>見出しテキスト</h1> <h2>見出しテキスト</h2> また各見出しタグの使い分けとしては、 <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> という具合に、重要なものから「h1 ⇒ h2 ⇒ h3 ⇒ h4」というような順序になるように配置します。 必ずしも<h6>までを使う必要はなく、見出しの数に合わせて適宜使用します。 例えば、 <h1>大見出し1(タイトルなど)</h1> <h2>中見出し</h2> <p>段落</p> <h3>小見出し</h3> <p>段落</p> <h3>小見出し</h3> <p>段落</p> <h2>中見出し</h2> <p>段落</p> <h3>小見出し</h3> <p>段落</p> このような構成はとても一般的だと思います。

3、<font>タグとの違い

見出しタグが検索エンジンに文章の構成を伝えるのに対して、単に装飾的に文字のサイズを変更してくれるタグもあります。 それが<font>タグというものです。 <font size="5">テキスト</font> というもので、数字の部分には文字のサイズに応じて1(最少)~7(最大)までが入ります。 <font>タグは単に見た目を整えるためのもので、検索エンジンに重要視されることはありません。 ではどのような時に使うべきかというと、例えばこのように 「見出しではないけどブログの本文中でどうしても目立たせたい1文がある」 などのような時です。(上の一文に<font size="5">~</font>タグを使用) 見出しタグにはある程度使用上のルールがありますので、見た目の装飾だけを行いたい時にはこの<font>タグが有効になります。 アメブロでは文字サイズを変更する機能があるのですが、この設定を行うと <span style="font-size: 8px;">見出しテキスト</span><br>
<span style="font-size: 10px;">見出しテキスト</span><br>
<span style="font-size: 12px;">見出しテキスト</span><br> このように<span style="font-size: ○○px;">という形で文字の大きさを指定しています。 厳密にはこれは<font>タグではありませんが、同様に見た目の装飾だけを行うタグという意味では効果は同じになります。 ですのでアメブロでもしも見出しとして強調したいのであれば、見出しタグを直接HTML表示画面で入力する必要があります。

Googleでも見出しタグの推奨される使い方として「ページ構成とは関係なくテキストを見出しタグで囲むことはしない」と記載していますので、見出しではない部分で文字を大きくするなど装飾したい場合には、見出しタグの使用は避けましょう。

4、効果的な使い方

見出しタグは文章の構造をユーザーと検索エンジンに伝えるためのものです。 そしてどのようなページ内容にしても見出しとは、そのページの中でポイントとなるキーワードが含まれてしかるべきだと思います。

  • ポイントとなるキーワードを含めることでユーザーがページの内容を理解しやすくなります。

  • 検索エンジンもそのページの重要なキーワードを認識しやすくなり、それらは検索結果にも少なからず影響します。

つまり、SEOに対して効果的な見出しを作るには、見やすい構成(ダラダラと書かない、など)と適切な見出し文(何について書かれたページなのか、など)を考え、ユーザーにとってわかりやすいページを作ることが最大のポイントになります。

ネットショップの場合ですと、例えば商品詳細ページでは商品名に<h1>や<h2>タグが使用されているかと思います。 これは商品登録時に商品名の欄に記入するだけで自動的にタグが付与されているためで、特に自分で設定を変更する必要はありません。 ブログでも同様に、記事のタイトルには<h1>や<h2>タグが自動的に付与されるよう設定されていますが、本文に関しては手動で設定する必要があります。 WordPressとアメブロでの見出しタグの設定方法は、初心者必見!読者にも検索エンジンにも好かれるブログの作り方⑧~見出しの活用~にて紹介していますので、ご参照下さい。

5、まとめ

  • 見出しタグを使用すると文章の構成をユーザーと検索エンジンが理解しやすくなる

  • 装飾的に文字を大きくしたい時には、見出しタグではなく<font>タグを使う

  • 正しく見出しタグを使うには、見やすい構成と適切な見出し文を考えわかりやすいページを心掛ける

この記事を書いた人

初心者EC一覧に戻る
一覧に戻る

おすすめ記事

CONTACT

お問い合わせ・ご相談はこちら

IT+

株式会社アイティプラス

〒150-0001 東京都渋谷区神宮前3-25-18
THE SHARE 2F

チャネルトーク

チャネルトーク認定パートナー

Shopify Partners

shopify認定パートナー

Studio Templates

「Studio Store」にて、テンプレート販売中

STUDIOテンプレート 和食STUDIOテンプレート 病院STUDIOテンプレート 和食

©2014  ITPLUS, Inc.