ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

おさえておきたいSEO対策の基本

Webサイトを制作する上でよく耳にする「SEO対策」。
さまざまな対策の仕方がありますが、今回はHTML内でできる効果的なSEO対策の方法を中心にご紹介します。

SEOとは？

SEO（エスイーオー）とは “Search Engine Optimization” の略で検索エンジン最適化を意味します。
具体的には、検索ユーザーが求める有益なコンテンツを提供し、検索エンジンに正しくページ内容を評価されるよう技術的にWebページを最適化することを指します。

SEO対策とは？

SEO対策とは、SEOを目的として行う対策のことをいいます。
様々な手法がありますが、大きく分けて①内部対策②外部対策③コンテンツ制作の3つに分類されます。
検索エンジンはこれらの項目を総合的に評価しているので、それぞれの項目に対して適切な施策をすることが重要です。

また、SEO対策はマーケティング手法のひとつであるため、そのWebサイトが達成したい最終目標（問合せ数を増やしたい、購入意欲向上など）に繋げることが、本質的な目的と言えます。
そのため、ユーザーニーズを満たすコンテンツの作成、目的ページへ遷移しやすい構成やナビゲーションの配置など、緻密にサイトを設計する必要があります。

※「コンテンツマーケティングとは？メリットや成功事例も紹介」

SEO対策のメリット・デメリット

メリット

サイトの流入数が増える

SEO対策をする最大のメリットは自然検索（オーガニック検索）からの流入数が増えることです。
※検索エンジンからの流入は、有料検索（リスティング広告）と自然検索（オーガニック検索）の2つに分けられます。
一度検索上位を獲得すると、一定期間上位表示され続けることが多く、継続的な流用数が獲得されます。
また、自然検索で上位表示された際のクリック率は、有料検索と比べて高い傾向があり集客効果が期待できます。

広告宣伝費を抑えることができる

有料検索の場合は、クリック毎に料金が発生するため、流入数が多くなればなるほど広告費がかかり、継続的に流入数を獲得するためには広告費をかけ続ける必要があります。
一方、自然検索の場合は、クリック毎の料金は発生しないため、どれだけ流入数が増えたとしてもSEO対策にかけた費用以上にはコストはかからず、上位表示している限りは流入数を継続的に獲得できるという特徴があります。

ブランドの信頼性と権威性の向上

上位表示されることで、ユーザーはウェブサイトを信頼しやすくなります。検索エンジンの上位に表示されると、SNSなどで第三者に自身のWebサイトに関する好意的な引用や言及をされる（レビューや口コミなど）傾向が高くなり、業界での権威や信頼性を示す一つの指標となります。

総合的に言えば、SEO対策はウェブサイトの見やすさやアクセス数の増加、信頼性の向上などをもたらすことができます。これにより、ビジネスやウェブサイトの目標達成に貢献することが期待できます。

デメリット

効果が現れるまでに時間と労力がかかる

タイトルを変えるだけで順位が上がることもあれば、コンテンツを充実させたり、内部施策を実装したりしても、なかなか向上しないこともあります。上位表示に向けて地道に取り組む必要があり、成果が出るまでに年単位で時間がかかることもあります。
Googleでは、『変更に着手してからメリットが得られるようになるまで、通常は4ヶ月～1年かかります。』と発表していて「短期間（数週間～1カ月程度）でコンバージョンを増やしたい」という場合には不向きな手法です。

技術的な知識が必要

SEO対策は専門的な知識や技術が必要です。検索エンジンの傾向やウェブサイトの最適化に関する知識を持っていない場合、効果的な対策を実施することが難しいかもしれません。

SEOに効果のあるHTMLタグ

次にHTML構造を検索エンジンに最適化するために使用が推奨されるタグとその使用方法について解説します。
サイトのHTML構造の最適化はSEO対策において重要な施策となります。これにより検索エンジンにページ内容を正しく理解されるようになり評価が向上し、上位表示の可能性が上がります。

titleタグ

<title>ページタイトル | サイトタイトル</title>

titleタグはWebページのタイトルを設定するために使用します。
ここで設定したタイトルはブラウザのタグや検索結果一覧にも表示されます。タイトルテキストは重要なキーワードを冒頭に配置するとSEOにおいてより効果的です。
まるログでは「デザイン」「WEB」を冒頭に配置しています。

メタタグ

①description

<meta name="description" content="ページの概要を記述する">

descriptionはページの概要を短く記述するmetaタグの属性です。検索結果に表示されるため、ユーザーにページの概要をわかりやすく伝えることができれば、アクセスに繋がる可能性が向上します。キーワードを含めることも重要です。

②keywords

keywordsはページがどんなキーワードと関連しているかを記述するmetaタグの属性です。カンマで区切って複数のキーワードを設定できます。
以前はSEOに効果のある属性だったようですが、Googleは現在、keywordsを検索順位を決める要因としていないため設定は不要です。
参照：「meta keyword（メタキーワード）はSEOで不要なのか？」

③canonical

<link rel="canonical" href="https://〇〇/">

canonicalは、サイト内で重複または類似したページ※があるときにどのページが最も重要なページなのかを検索エンジンのクローラーに教えるために記載します。検索インデックスに内容が重複した複数のURLが登録されると検索エンジンからの評価がばらけてしまうため、評価をまとめるためにcanonicalタグが重要な役割を果たします。
※canonical（カノニカル）設定が必要なページの例
・httpsとhttp、wwwあり・なしが併存している
・PCとモバイルでページのURLが異なる
・ECサイト内に似た商品ページが複数存在している（商品の色違い・サイズ違い等）
・ページURLに効果測定用のパラメータが付いている

④viewport

<meta name="viewport" content="initial-scale=1, width=device-width"/>

viewportでは主にスマートフォンにおける表示方法を設定するもので、文字や画像などをデバイスサイズに応じて見やすく調整することができます。
各種デバイスで閲覧しやすいページにすることでSEOへの効果が期待できます。
・width=device-width：ページの横幅をデバイスの横幅に合わせる。
・initial-scale：表示する倍率を指定（基本は1.0）

⑤OGP

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページのディスクリプション">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類（トップページ・ブログ・下層ページ）">
<meta property="og:locale" content="ページの言語">
<meta property="og:image" content="サムネイル画像のURL”>
<meta property="og:site_name" content="サイト名">

OGPとは「Open Graph Protocol」の略です。
OGPはSNSでページのURLがシェアされたときに、ページのタイトルやサムネイル、ディスクリプション、URLを表示するためのものです。

※上記画像はtwitter上で表示されるOGP情報のスクリーンショットです。

og:title
og:titleは一般的にはタイトルタグと同じものを設定することが多いです。また、SNSでシェアされたときに表示されるタイトルなので、SNS用に別のタイトルを設定するという使い方もあります。

og:description
ディスクリプションと同じ内容を設定することが多いですが、ディスクリプションが長い場合、SNSでシェアされるときに文末が切れてしまうことがあります。（スマートフォンでは50文字前後が表示数です。）
SNSに合わせて短くディスクリプションを設定したい場合に有効です。

og:url
OGPを設定するページのURLを設定します。このとき、URLは絶対パス（https://～～）で記述します。

og:type
ページの種類を設定します。
トップページならwebsite、ブログページならblog、下層ページならarticleと設定しておきます。

og:locale
国や地域、言語を設定します。
ページの対象地域が日本のみであれば、content属性に「ja_JP」を設定します。
複数の言語に対応する場合は次のようにpropaty属性に「og:locale:alternate」を設定し、content属性に対象地域（言語）の値を設定します。

<meta property="og:locale" content="ja_JP" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

og:image
og:imageを設定するとSNSでシェアしたときにサムネイルが表示されます。
このとき、画像のURLは絶対パス（https://～～）で記述します。
また、OGP画像が各SNSでどのように表示されるか確認できるサイトもありますので、OGP画像を制作する際は是非活用してください。
OGP画像表示確認ツール：「ラッコツール」「OGP画像シュミレータ」

見出しタグ

見出しタグはページの見出しを設定するために使用します。h1～h6まであります。
見出しタグは、コンテンツの階層構造を正しく示すために使うもので検索エンジンに対してページの内容をわかりやすくする効果があります。

<h1>大見出し</h1>
　<h2>中見出し</h2>
　　<h3>小見出し</h3>
　<h2>中見出し</h2>
　　<h3>小見出し</h3>

●hタグ使用のポイント
・h1タグは１ページ内で1回の使用がユーザビリティ的には望ましいが、複数使用した場合でも検索順位への影響はないとされている。
・hタグはh1→h2→h3…というように順番に使用することがユーザビリティ的には推奨されているが、順番通りではない場合でもGoogleの検索順位への影響はないとされている。
・hタグは見出し以外の用途に使用しない。
・見出しは重要なキーワードを含めて簡潔にする。

セマンティック要素タグ

セマンティックとは、「意味の」「語義の」などの意味合いを持ちます。
これらの要素を正しく使い分けてコーディングすることをセマンティックコーディングと言います。
これらのタグを使用することで検索エンジンにページ構造を正しく伝えることができます。

①headerタグ

headerタグは最も近いセクションのヘッダーであることをあらわします。
例えばbodyタグの直後に設置されている場合ページ全体のヘッダーとなります。

  <header>
    <nav>
      <ul>
        <li><a href="/home">ホーム</a></li>
        <li><a href="/code">CODE</a></li>
        <li><a href="/blog">ブログ</a></li>
      </ul>
    </nav>
  </header>

②footerタグ

footerタグは最も近いセクションのフッターであることをあらわします。例えばbody終了タグの直前に設置されている場合ページ全体のフッターとなります。

<footer>
  <ul>
    <li><a href="#">利用規約</a></li>
    <li><a href="#">プライバシーポリシー</a></li>
  </ul>
</footer>

③sectionタグ

sectionタグは文章やコンテンツなどをまとめたブロックに使用します。
sectionタグの他にセクション要素に分類されるnavタグ・articleタグ・asideタグは特定の場所で使うセクション要素ですが、sectionタグはそれらに該当しないセクションを作りたい時に使用します。
sectionタグを使用する際にはhタグを含むことが推奨されています。

<body>
    <section class="mainvisual">
      <h1>メインタイトル</h1>
      <p>テキスト</p>
    </section>

    <section class="concept">
      <h2>コンセプトテキスト</h2>
      <p>テキスト</p>
    </section>
</body>

④articleタグ

articleタグはサイト内で自己完結または独立しているコンテンツをまとめたブロックに対して使用します。articleには「記事・論説」という意味があります。

<body>
  <article>
    <section class="mainvisual">
      <h1>メインタイトル</h1>
      <p>テキスト</p>
    </section><!-- 完結したコンテンツ -->  

    <section class="concept">
      <h2>コンセプトテキスト</h2>
      <p>テキスト</p>
    </section>
  </article><!-- 完結したコンテンツ -->  
</body>

articleタグは一部分のセクションをマークアップする場合には使用できません。

●不適切なarticleタグの使用例

<body>
  <section class="mv">
    <article>
      <h1>メインタイトル</h1>
      <p>テキスト</p>
    </article>
    <p>テキストテキスト</p>
    <!-- ↑追加情報が入っているので完結したコンテンツといえない。 -->  
  </section>
</body>

上記コードでは<article>タグの後に<p>タグで追加情報が入っており、articleタグ内で完結していないセクションとなっているので正しい使用方法ではありません。

⑤asideタグ

asideタグは、広告や記事本文の補足情報を示したり、脚注や用語解説を表したりするコンテンツ要素に使用されます。
asideには「余談・傍らに」という意味がありますが、HTMLでは「余談・補足情報」といった意味があります。

<body>
  <section>
  メインコンテンツ
  </section>

  <aside>
    <a href="">
      <section class="ad1">
        <p>１つ目の広告</p>
        <p>テキスト</p>
      </section>
    </a>
    <a href="">
      <section class="ad2">
        <p>２つ目の広告</p>
        <p>テキスト</p>
      </section>
    </a>
  </aside>
</body>

⑥navタグ

navタグはページ内のナビゲーションリンクを含むセクションをあらわす時に使用します。このタグは視覚障がいの方がページを音声で読み上げるツールを利用することも考慮して用意されたものでもあるので、主要なナビゲーションにだけ使うことが想定されています。navタグはヘッダーにつけてフッターのナビゲーションはリストで記述するのが一般的です。

<body>
  <header>
    <nav>
      <ul>
        <li><a href="/home">ホーム</a></li>
        <li><a href="/code">CODE</a></li>
        <li><a href="/blog">ブログ</a></li>
      </ul>
    </nav>
  </header>
</body>

⑦mainタグ

mainタグはその範囲がページ全体のメインコンテンツであることをあらわします。したがってmainタグは各ページに一つだけになります。
mainタグはこれまでに紹介してきたarticleタグ・asideタグ・navタグ・headerタグ・footerタグの中には入れてはいけません。

  <main>
    <article>
      <section class="mainvisual">
        <h1>メインタイトル</h1>
        <p>テキスト</p>
      </section>
    </article>
  </main>

これまでの要素をサイトに当てはめて使用すると下図の枠線のようになります。

これらの要素を正しく使い分けてコーディングすることで、コード自体の可読性を上げ、SEOに対しても効果的なHTMLの記述が可能になります。

おまけ：画像の形式（画像容量）

画像の容量を軽くするとサイトの読み込み速度を早くすることができるため検索上位表示に良い影響を与えることがあります。画質を保ちながら、容量を軽くするためには適切な画像形式にすることが重要です。

PNG

PNGは色数の違いによって「PNG-8」「PNG-24」「PNG-32」の3種類に分けられます。

PNG-8
利用可能色：256色/データサイズ：軽い
ほかのPNG形式よりもデータ容量が軽く、用途としてアイコンやロゴなどの色数が少ないデザインに適しています。
透過は可能ですが、半透明にすることは出来ません。
また、色情報が少ないためコンテンツと透明色部分の境目が粗くなります。

PNG-24
利用可能色：約1,677万色/データサイズ：重い
PNG-24は、約1,677万色の表現が可能です。色数が多いため写真やグラデーションのある画像にも対応できます。
画像を綺麗に保存できますが、そのままPNG-24で保存するとJPEGよりも数倍データが大きくなってしまいます。また、PNG-24は透過情報を持ちませんが、透明部分を持たせる事で綺麗な透明を表現する事ができます。

PNG-32
利用可能色：約1,677万色＋256段階の透明度/データサイズ：最も重い
PNG-32は、約1,677万色と、256段階の透明度が表現できます。そのため半透明が使用できる画像形式なので、切り抜いた画像などに適しています。
イラストから写真・グラデーション等すべての画像タイプに対応できますがPNG-24よりもデータが重くなります。

PNGは可逆圧縮のため、何度も保存し直しても劣化しません。また、画像内の一色を透過させたり、画素ごとに透明度を設定できるのが特徴です。

JPG

色数の多いイラストや写真等で、透過のないものはJPGでの書き出しが最適です。PNGと違い不可逆圧縮なので、保存の度に劣化していく点に注意する必要があります。

SVG

ベクター形式の画像で、拡大縮小しても劣化しません。
シェイプで作成したアイコンやロゴ、画像化するテキストはSVGで書き出すのがおすすめです。

GIF

透過できて軽いのが特徴です。
以前はアイコンやロゴなどで使用されていましたが、色数上限があることや、透過があまりきれいではないため、最近ではWeb用画像データとしては使用しないことが多くなってきています。
最近はGIFアニメーションでよく使用されます。

まとめ

Webデザイナーはデザインだけでなくコーディングも担当することが多いため、SEOを意識したコーディングの学習も重要になります。また、ページをデザインする際も、SEOを意識した適切なページ構造を考えてデザインを行うことが大切です。ページごとにどのようなSEO対策が有効なのかしっかりと把握し、効果的なSEO対策を実施することがWebサイトにおける目標達成に繋がっていきます。

WEBデザイナー ／ K.M

WEBデザイン制作に関するお問い合わせはこちら