【エンジニア必読！】web制作で検索上位表示に必要なSEO対策

エンジニアとしてWeb制作を行っているけど、クライアントから「検索結果で上位表示させる方法も教えてほしい」と言われたり、売り切りのホームページ作成だけでなく、「マーケティングの仕事も同時に行えるようになりたい」

そういった方向けに、ホームページを作成しながら行えるSEO対策を紹介していきます。

SEO対策とは?

まずはSEO対策とはどんな取り組みを指すのか、またその必要性について改めて確認していきましょう。

そもそもSEOとは何なのか？

SEOとは「Search Engine Optimization」の略で、日本語で表すと「検索エンジン最適化」です。Googleなどの検索エンジンには日々たくさんの人が、「知りたいことを調べるため」「悩みを解決するため」にキーワードを入力して検索しています。

そのような方たちに自社で執筆したコンテンツを見てもらい、集客していきます。

なぜWeb制作にSEOが必要なのか?

しかし自社コンテンツが上位に表示されなければ、ほとんどの人に見てもらえません。検索結果の1位に表示された場合のクリック率は28.5%ですが、10位の場合では2.5%と大幅に下がってしまいます。

例えば1,000人の人が同じキーワードで検索した場合、285人が1位のサイトを閲覧するが、10位のサイトではわずか25人にしかクリックされないということになります。

よって多くの顧客を獲得し売上を上げるために、上位表示されるよう適切なSEO対策をする必要があります。

広告よりもコストがかからない

作成したコンテンツを多くの人に見てもらうためにリスティング広告を用いることもあります。

しかしリスティング広告はあくまでも広告ですので、費用がどうしてもかかってしまいます。ですが、SEO対策は知識さえ持っていれば費用をかけずに、たくさんの見込み顧客をサイトに流入させることが可能です。

SEO対策の種類

では、具体的にSEO対策にはどのようなものがあるか説明していきます。SEOには主に3つの施策があります。

1.外部対策とは

外部対策とは、他サイトやSNSなどから自社サイトのコンテンツに被リンクを貼ってもらうことです。

HTMLでは<a>タグで外部へのリンクを貼ることがありますが、このリンクが貼られる数が多いほど、またリンクを貼ってくれている元サイトの質が高いほど、自社サイトの評価が高まり、上位表示がしやすくなります。

以前のGoogleはこのリンクを高く評価していました。よってサイト運営者はより多くのリンクを獲得するために、

• お金を払うことによって、質の高いサイトからリンクを貼ってもらう
• サテライトサイトを構築し、リンクを貼る
• 相互リンクを行う

など、自分たちで被リンクを操作していました。

しかし、Googleはこのようなユーザーのためにならないリンクを嫌います。以前はこの方法で中身のないコンテンツを簡単に上げることができましたが、現在はペナルティの対象となり、厳しく禁止しています。

ユーザーから自然な被リンクが集まるように意識したサイト作りが必要です。

2.コンテンツマーケティングとは

コンテンツマーケティングとは、一言で言いますと質の高い記事を執筆していくことです。

ユーザーは日々悩みの解決のため、知りたいことを調べるために検索をかけています。そのニーズに合った内容を届けてあげる、解決策を提示してあげる記事を執筆することにより、ユーザーの満足度が上がり、Googleからの評価が高くなります。

またこのようなユーザーファーストの記事を執筆することによって、たくさんの方から紹介され自然なリンクが集まるため、上記の外部対策も同時に行うことができます。

しかし記事を作成していくには、ユーザーの検索意図や、より読みやすくなるような記事構成を考える必要性があります。普段文章を書かない方には、執筆がなかなか思うように捗らないということもあります。

3.内部対策とは

そこで文章を書くことが苦手であるが、プログラミングやWebのスキルを習得されているエンジニアの方におすすめなのが「内部対策」です。

内部対策とは、

• HTMLのタグを最適な形で配置
• ユーザビリティを向上させるような機能のコーディング
• 画像サイズやaltタグの見直し

などエンジニアの方にとても取り組みやすい施策です。

Web制作で学ぶべき内部対策

ここから本題である内部対策について具体的な方法を説明していきます。

1.キーワード選定

まず初めにGoogleで上位表示させたいキーワードを選んでいきましょう。例えば、「プログラミング初心者のためのスクール」を運営している場合であれば、キーワードは「プログラミング」「初心者」「スクール」などが該当します。

キーワード選定は奥が深く、初めのうちはどのキーワードがいいか悩むことが多いですが、最初は自分の事業に合った、または狙いたいキーワードを選ぶことをおすすめします。

2.titleタグとhタグにキーワードを含める

次に先程選んだキーワードをtitleタグとhタグに含めていきます。内部SEO対策では、特にtitleタグとhタグが最も重要なタグとなります。

titleタグ

titleタグは、Googleで検索されたときに表示される文字です。

【titleタグ表示例の画像】

赤枠のところにtitleタグで記述された内容が反映されます。

【titleタグ入力例の画像】

上記のように、titleタグにキーワードを含めた適切な言葉を記述します。

またGoogleの検索エンジンに表示されるタイトルの文字数は現在30文字前後ですので、titleタグの文字数も同じ分量にしましょう。

hタグ

hタグにもキーワードを入れていきます。hタグはh1~h6まであり、h1ほどGoogleに評価されやすいタグとなります。

h1タグは記事の見出しとして使われるタグです。閲覧されているページにはどのような記事が書かれているか一言でユーザーにわかるよう、キーワードを含めながら記述していきましょう。

【hタグ入力例の画像】

hタグの階層構造

h1～h6は数字の小さい順に階層構造になっている必要があります。よくある間違いとして、h3タグよりもh2タグの方が表示されるフォントサイズが大きいからと装飾目的でhタグを使われているケースがあります。

hタグはあくまで大見出し・小見出しを決めるタグであるため、バラバラな形で記述されてしまうとGoogleのエンジンが混乱してしまうのです。

【hタグ階層構造例の画像】

上記のようにしっかりと階層構造になるようにタグを記述し、フォントサイズはCSSで記述するようにしましょう。

3.画像の最適化

次に画像を適切な形で設置していきます。

画像サイズの圧縮

最近のSEO対策では、ページの表示速度を早めることが大切になっています。なかなかページが表示されず、戻るボタンを押してしまった経験があると思います。

せっかくユーザーがクリックしてくれたのに、表示が重くて離脱してしまっては、大事な見込み顧客を逃してしまいます。このページ表示速度が遅くなる原因の一つが画像サイズが大きいことです。

画像サイズが大きいかどうか調べる方法に、Googleが提供しているPageSpeed Insightsがあります。検索窓に調べたいページのURLを貼って「分析」ボタンを押すと、表示速度が0～100点の評価で行われます。

ここで下部の方に「適切なサイズの画像」に現在の画像サイズが表示されています。

【画像サイズの例】

上記例では、一番上の画像が3075.4Kib(およそ3Mb)となっていますが、これはかなり重たい画像です。

画像サイズを減らす方法に以下2点があります。

見栄えを良くするために画像を使うことは大切ですが、サイト自体が重くなり過ぎないようにしましょう。

alt属性の設定

alt属性は、

• サイト表示時に画像がうまく読み込めなかった場合の代替えテキスト
• 視覚障害の方などが利用する「音声読み上げ機能」での読み上げ

などのために設定するimgタグの属性です。

ここにSEO対策としてキーワードを含めることも可能です。

例えば、本社ページ左上のロゴに

と、ただ会社名を入れるだけではなく、

と、「SEO対策」「スクール」など狙ったキーワードを記述していきます。

ただし、あまりにもキーワードを入れすぎると、Googleからスパムだと判断されてしまうので、あくまで自然な形で入れていきます。

4.URLの正規化

WordPressなどのCMSを利用していると、同じページでも

• https://webmarks.co.jp
• https://webmarks.co.jp
• https://webmarks.co.jp
• https://webmarks.co.jp/index.php

と複数のURLが生成されてしまうケースがあります。

このように複数URLが存在するページでは、Googleからの評価が分散してしまうので、1つのURLに転送するようにします。

301リダイレクト

具体的な転送方法として、.htaccessファイルを用いて301リダイレクトの設定を行います。

301リダイレクトとは、特定のURLにアクセスしたときにGoogleからの評価(良い評価も悪い評価も)を引き継ぎながら、別URLに転送する仕組みです。

5.クローラビリティの改善

Googleはサイトが新しく作成、更新された場合、そのサイト情報を巡回しデータを保管します。このサイトを巡回するプログラムを「クローラー」といいます。

クローラーは世界中のWebページを訪問しているので、自社サイトを更新してもすぐには巡回してくれない可能性があります。

そこでクローラビリティを改善することでいち早くサイトを巡回してもらい、新規ページを検索結果に反映してもらえるようにしましょう。

sitemap.xml

sitemap.xmlは、サイト内のリンク構造が記述されたファイルのことです。このファイルを作成し、Googleへ送信することでクローラーが巡回しやすくなります。

以下の方法を行うことにより、クローラーがサイト構成をより把握しやすくなります。

robots.txt

robots.txtは、クローラーに巡回して欲しくないページやディレクトリが記述されているファイルです。サイトの評価を上げるためにクローラーに巡回してもらう必要がありますが、中には必要なページであるがGoogleの評価を下げてしまうページも存在します。

具体的には、自動生成されたページなどが挙げられます。そういったページやディレクトリ全体をrobots.txtに記述し、評価が落ちることを回避しましょう。

User-agentは制御したいクローラーを指定します。

例えば、Googleのクローラーを制御したい場合は、

と記述します。

User-agent: *と記述すれば、基本的に問題ないです。*(アスタリスク)は全てのクローラーを指定します。

Disallowで実際に巡回してほしくないページやディレクトリを記述します。

Sitemapには、先程設置したサイトマップファイルが置かれているURLを記述します。

6.SEOに最適なWebページ

ここではユーザビリティを改善するために、必要なWebページの作り方を紹介します。

ナビゲーションの改善

内部対策を行う際に必要な施策の1つに、内部リンクを多くすることがあります。内部リンクとはその名の通り、サイト内の特定ページを指定したリンクです。

内部リンクを増やすことによって、クローラーがリンクを辿ってサイト中を巡回するので、クローラビリティが向上します。

また、ユーザーも目的のページを素早く表示させることができるので、ユーザビリティも上がり、Googleからの評価が得やすくなります。

主に必要なナビゲーションは以下3つです。

• ヘッダーナビ
• フッターナビ
• パンくずリスト

ヘッダーナビ、フッターナビには自社サイトのカテゴリを入れていきましょう。またパンくずリストとは、現在ユーザーが「どのカテゴリのどの記事」を見ているか、を表したリストです。

CSS、JavaScriptの最適化

次に必要なことはCSS、JavaScriptのコードを見直すことです。

「サイトをオリジナリティが高いものに仕上げたい」「もっと動きが多く、見栄えの良いものにしたい」と要望が多くなってきますと、それに比例してCSS、JavaScriptのコードも多くなっていきます。

しかし、装飾を多くしたり、動きがダイナミックなサイトを作成することはSEO上では逆効果となってしまいます。派手なサイトを作ってしまうと表示速度が下がり、ユーザーが離脱してしまう可能性が高まってしまうからです。

実際にSEOを専門としている企業のサイトはほとんど動きがありません。クライアントと相談しながら、シンプルな制作を行いましょう。

また、PageSpeed Insightsで記述されていますが、サイトに反映されていないコードを確認できます。不要なコードもページ速度に関係しているので、削除することをおすすめします。

まとめ

いかがだったでしょうか？SEO対策というと難しく感じるかもしれませんが、エンジニアとして作業された方であれば、そこまで難しいことではないかと思います。

Web制作だけではなくSEOの知識も身に付ければ、クライアントに提案するときの説得力もより増します。ぜひ積極的に取り入れていきましょう。