【html初心者編】SEOを意識するなら7つのhtmlタグに注目

SEOならSEOパック

[2020/05/27] (最終更新日 2022/06/02)

【html初心者編】SEOを意識するなら7つのhtmlタグに注目

本記事を読んでいる方には、htmlと聞くだけで「難しそう」「わからない」と拒否反応を示してしまう方も多いかもしれません。
ウェブサイトの順位上昇を狙う一方で、多くの担当者には盲点なのかもしれないhtmlソースコード。
SEO対策をする上で、何故htmlを知る事が必要なのかというと、「htmlを最適化する事で検索エンジンに正しく情報を伝える事ができる」という理由が挙げられます。

SEOでいうところの、所謂「内部対策」と呼ばれる作業がhtmlに関わってきますが、「htmlソースコードの知識が無ければ内部対策は出来ないの?」と、思われるかもしれません。
答えは「htmlのスペシャリストでなくてもSEO対策は実施できる」という事です。

【html初心者編】SEOを意識するなら7つのhtmlタグに注目

htmlで使われるタグの中でも7つのタグに注目する事ができれば、基本的なSEOを意識したhtmlになります。
それでは、これから紹介するhtmlソースコードのタグに注目し上位表示を目指しましょう。

はじめにhtmlを簡単に把握

ホームページはhtmlという言語のようなもので作られています。今、ご覧いただいている本記事もhtmlによって作られていて、htmlソースコードで「文字」を書く事や「画像」を表示するなど、指示を記述する事で見た目や検索エンジンへの命令などを指定しています。

これからご紹介するタグというのはhtmlで意味を持たせるために、決まった記号で囲われたものです。
決まった記号を使う事により「ページの題名」や「画像の説明文」などを検索エンジンや検索ユーザーに伝える事ができるようになります。

さて、htmlソースコードは簡略化すると次のような構成で記載されています。
基本的なhtmlソースコードの構造

本記事でこれからご紹介する注目したい7つのタグは、htmlソースコードのheadで囲われた中に3つ、bodyで囲われた中に4つ設定するべきタグです。

また、ご自身のページのhtmlソースコードを確認する方法は、webブラウザのURLが表示される部分に以下のように入力してみてください。
htmlソースコード確認方法
view-source:の後に、https://example.jp/ と記載している部分を確認したいページのURLを入力し検索する事で、そのページのhtmlソースコードを確認する事ができます。
(Windowsをご使用の場合は、ページを開いた状態で右クリックし「ページのソースを表示」でも同じ内容が確認できます。)

htmlソースコードを確認しながらこれからご紹介するタグの設定を確認してみましょう。

titleタグ

titleタグはhtml内の上部にあるheadで囲われた中に記載されています。
「ウニの通販サイト」を例に挙げると以下のようなタイトルが考えられます。

  1. <title>北海道産ウニ通販!ディーボから配送料無料でお届け</title>


設定した内容は、検索結果で表示される他、webブラウザ上部のタブに表示される内容となります。
titleタグのSEOポイントとしては、以下3点を確認しましょう。
自身のhtmlが3つのポイントを網羅しているか確認し、もし修正するべき点が確認できたらhtmlのtitleで囲われた部分を修正してみましょう。

  • 文字数は適切(8文字~32文字以内程度)な文字数に
  • 対策キーワードを前方に
  • 他のページとtitleが重複していない事

descriptionタグ

descriptionタグもtitleタグ同様にheadで囲われた中に記載されています。
「ウニの通販サイト」のdescription設定例は以下です。

  1. <meta name="description" content="北海道産の生ウニを産地直送・配送料無料でお届け。産地や価格帯など選べるギフト多数!ご自宅用からギフトまで旬の味をお贈りします。" />


descriptionに設定した内容は、検索結果の説明文として表示され「スニペット」と呼ばれています。
ページの内容が魅力的に伝わる事で、検索結果上のクリック率の向上が期待できる部分です。
以下のSEOポイントを確認しましょう。

  • descriptionタグの記載は1ページに1つだけ
  • 文字数は適切(120文字目安)な文字数に
  • 対策キーワードを前方に
  • 他のページとdescriptionが重複していない事

「descriptionタグの記載は1つだけ」という部分について補足すると、ワードプレスなどを利用し作成されているサイトの場合に多くみられるのが、プラグイン上でも、個別にもdescriptionを設定しており、結果的に1つのhtml上に2つ設定が確認されるケースが多いです。もしページ上に2つ設定がされている場合、どちらか一方を非表示とし、もう一方のdescription設定のみにしましょう。

canonicalタグ

canonicalタグはheadで囲われた中に記載されるタグですが、ご確認中のhtml内に記載が無い場合もあるでしょう。
canonicalタグは以下のようなケースが発生する時に用いられるタグです。

  • https://example.comとhttp://example.comが混在している場合
  • https://www.example.comとhttps://example.comが混在している場合
  • パソコンで表示されるページとスマートフォン用ページが別々で作成されている場合

「双方のページは同じ内容だけどURLで記載するページが代表するページだよ」という事を検索エンジンに教えてあげるためのタグとなります。

canonicalタグの設定が無いと、検索エンジンに同内容のページが複数インデックス(登録)されてしまうなど問題がしばしば起きる事もあるため、心当たりのあるページには、見てほしいURLを指定する事が大切です。

canonicalタグの設定例

hタグ

hタグはbodyで囲われた中に記載されています。
hタグは見出しを表すタグでh1は大見出しを表し、h1からh6まで設定する事ができます。
h1の設定例は以下となります。

  1. <h1>北海道産ウニ人気ランキング</h1>


h1を設定する際にどのポイントに気をつけるとよいか、以下にSEOポイントをまとめています。

  • h1の設定は複数でも可だが基本的には1つ。多くても2つまでに。
  • 対策キーワードを先頭に含む
  • キーワードを詰め込みすぎない
  • 簡潔な見出しにする

aタグ

aタグは、リンクを設定する際に記載するタグです。
aタグ使用例
上記の例で記載すると、以下のように表示され、クリックするとリンク先にリンク(遷移)するように設定されます。

SEOサービスSEO Pack

さて、aタグのSEOポイントとしては、以下があります。確認してみましょう。

  • アンカーテキストは簡潔でリンク先ページを想起できるもの
  • リンク先ページの対策キーワードを含んでいる

リストタグ

リストタグはbodyで囲われた本文中に記載されています。
箇条書きで記載する際に用いられるタグですが、リストタグで記載された内容は、検索エンジンに認識されやすくなり、SEO効果が期待できるタグです。また、リストタグで記載された部分は強調スニペットにも表示されやすくなるので箇条書きの情報はリストタグを用いるように意識すると良いでしょう。

以下はリストタグの使用例です。
リストタグの使用例
上記の例で記載すると、以下のように表示されます。

持ち物

  • ハンカチ
  • ティッシュ
  • スマホ
  • お財布

alt属性

Googleは画像の内容を把握するためにaltに記載されている情報を理解します。
画像の説明であるaltですが、画像が表示されない場合にはaltで設定したテキストが表示されます。
大事な画像にはaltを設定するようにしましょう。

  1. <img src="hogehoge.png" alt="画像の説明が入ります">

SEO的に取扱注意のhtmlタグ

SEO的に取扱注意のhtmlタグ
上記でご紹介したtitleh1などは意識されていたという方もいらっしゃるとは思いますが、次に「そんなはずじゃなかった!」と思わず声をあげたくなるようなSEO評価を下げるhtmlタグの利用を3つご紹介します。

もし、あなたが今SEO対策しているページにこれからあげるタグの利用があったら改善をご検討されると良いでしょう。

delタグ

delは変更、削除された旨を検索エンジンやユーザーに伝える為に使用されるタグ。delタグは以下のように記載します。

<del>
<p>古い情報で取り消し線表示</p>
</del>

上記のソースコードで記載すると、下の画像のように「古い情報で取り消し線表示」部分に取り消し線が表示され、検索エンジンの評価やSEO的な重要度を下げたい場合に利用されます。もし、知らず知らずに装飾的な用途で利用していたら注意が必要です。

strongタグの乱発使用

strongタグは、検索エンジンに記載されている部分は『重要です』と伝えるタグですが、strongタグの使用回数は1ページ内に3個程度に留めるとSEOに有効な手段となります。
strongタグで記載された部分は通常『太字』で表示されますのでユーザーにも視覚的に強調を表現する事ができます。
strongタグの使用ソースコード例は以下です。

<p>重要な部分を<strong>強調したい時に利用する</strong>ソースコード</p>

上記のように記載した場合の表示は以下のように「強調したい時に利用する」部分が太字で表示されます。

strongの利用を乱発すると、検索エンジンにも、そしてユーザーにも、どの部分が重要なのか伝わらず、逆に評価を下げるリスクがあります。
対策ページ中のstrongの使用が3回程度になるよう見直してみましょう。

canonicalでURLの指定先を間違っていた

URLの正規化に使用されるcanonicalタグ。そもそも、正規化とはなんだ?と思った方もいらっしゃると思います。

URLの正規化とは、複数の同内容のURLがある場合に、正規のURL(https://seopack.jp/)を検索エンジンに教えてあげる事となりますが、
canonicalタグで正規化をする事により外部リンクの評価の分散を抑える(正規のURLに評価を集中させる)メリットがあります。

URLの正規化が必要なケース

しかし、canonicalでURLの指定を誤ると対策しているはずのページの順位に大きな影響が出るのでURLの指定には注意が必要です。

canonicalの記載例

<link rel=”canonical” href=”https://seopack.jp/cost/price_list.php”>

上記ではURLを「絶対パス」で記載しています。
相対パスで記載する記載例は以下です。

<link rel=”canonical” href=”/cost/price_list.php”>

canonicalの記載は「相対パス」でも駄目ではないのですが、http:// か https:// かの区別が出来ないなど問題が起きるので、確実に正しく記載する方法はhttps://seopack.jp/cost/price_list.phpとhttps://からURLを記載する「絶対パス」がおススメです。

対策ページにcanonicalの記載があったら、正しくURLを宣言しているか確認してみましょう。

まとめ

以上のように、初心者がSEOを意識するために注目したい7つのhtmlタグと、「そんなはずじゃなかった!」htmlタグの利用方法をご紹介しましたが、ご自身のhtmlと照らし合わせてご確認いただけましたでしょうか?

html全てのタグの意味を理解できなくても、本記事でご紹介したhtmlタグに注目し改善するだけでもSEO的に効果のある改善が進められます。また、順位上昇を狙っているつもりが、見えない部分で足を引っ張っていたなんて場合もあり得るのですね。

自分でhtmlを確認する事がやっぱり難しいという方は、「seodoor」というSEOツールを利用した確認がお勧めです。
内部対策状況をドメインやURL数に制限なく確認できます。
seodoorは7日間無料トライアルでご体験いただけるので、是非ご活用ください!

この記事が役に立ったらSNSで共有してください。

SEO対策サービスSEO Packキャンペーン

SEOツール無料トライアル

コンテンツ分析や内部SEO対策、競合分析ができるSEOツール。

メールアドレス入力で7日間無料トライアル開始!

<

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されますのでご確認ください。
以前ご登録いただいたメールアドレスではご利用いただけません。

SEO対策FAQ

全質問一覧

最新記事

全記事一覧

カテゴリ一覧

全記事一覧

SEO Packブログ byディーボ

このブログについて
キーワード難易度チェックツール

SEOツールseodoor

公式SNS

Twitter

facebook