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

本記事を読んでいる方には、htmlと聞くだけで「難しそう」「わからない」と脳内で拒否してしまう方も多いのではないでしょうか。

SEO対策をする上で、何故htmlが必要なのかというと、「htmlを最適化する事で検索エンジンに正しく情報を伝える事ができる」という理由が挙げられます。

SEOでいうところの、所謂「内部対策」と呼ばれますが、「htmlの知識が無ければ内部対策は出来ないの？」と、思われるかもしれません。
答えは「htmlのスペシャリストになる必要はない」という事です。

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

はじめにhtmlを簡単に把握

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

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

htmlは簡略化すると次のような構成で記載されています。

本記事でこれからご紹介する注目したい7つのタグはhtmlのheadで囲われた中に3つ、bodyで囲われた中に4つ設定されています。

また、ご自身のページのhtmlを確認する方法は、webブラウザのURLが表示される部分に以下のように入力してみてください。

view-source:の後に、https://example.jp/　と記載している部分を確認したいページのURLを入力し検索する事で、そのページのhtmlを確認する事ができます。
（Windowsをご使用の場合は、ページを開いた状態で右クリックし「ページのソースを表示」でも同じ内容が確認できます。）

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

titleタグ

titleタグはhtml内の上部にあるheadで囲われた中に記載されています。
設定した内容は、検索結果で表示される他、webブラウザ上部のタブに表示される内容となります。
titleタグのSEOポイントとしては、以下3点を確認しましょう。

descriptionタグ

descriptionタグもtitleタグ同様にheadで囲われた中に記載されています。
descriptionに設定した内容は、検索結果の説明文として表示されます。
ページの内容が魅力的に伝わる事で、検索結果上のクリック率の向上が期待できる部分です。
以下を確認しましょう。

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

canonicalタグ

canonicalタグはheadで囲われた中に記載されるタグですが、html内に記載が無い場合もあるでしょう。
canonicalタグはどういうケースに用いるのかというと、https://example.comとhttp://example.comが混在している場合、https://www.example.comとhttps://example.comが混在している場合、パソコンで表示されるページとスマートフォン用ページが別々で作成されている場合などに、「どちらのページが重要なページ」という事を検索エンジンに教えてあげるためのタグとなります。

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

hタグ

hタグはbodyで囲われた中に記載されています。
hタグは見出しを表すタグでh1は大見出しを表し、h1からh6まで設定する事ができます。
中でもh1のSEOポイントとしては、以下を確認してみましょう。

aタグ

aタグは、リンクを設定する際に記載するタグです。

上記の例で記載すると、以下のように表示され、リンク先にリンクされます。

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

リストタグ

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

以下はリストタグの使用例です。

上記の例で記載すると、以下のように表示されます。

alt属性

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

まとめ

以上のように、初心者がSEOを意識するために注目したい7つのhtmlタグをご紹介しましたが、
ご自身のhtmlと照らし合わせてご確認いただけましたでしょうか？
自分で確認する事がやっぱり難しいという方は、「seodoor」というSEOツールがお勧めです。
内部対策状況をドメインやURL数に制限なく確認できます。
7日間無料トライアルでご体験いただけるので、是非ご活用ください！