SEO対策|応用


SEO対策の基本的な内容を理解された上で、ここでは応用として中級者・上級者向けにSEO対策の方法を掲載いたします。

HTMLの最適化・考え方


HTMLソースコードの最適化を行う基準として、代表的なものに「W3C Markup Validation Service」というものがあります。W3C基準は、検索エンジンのクローラーがブラウザ上で出力されるHTMLソースコードを取得する上で、重要なものとなっています。

 

わかりやすいもので、改行「br」タグがありますが、「br」はHTMLタグとしては珍しく、「始めと終わりに分割されない単独で使うタグ」ということもあり、書き方にはいくつかパターンがあります。「<BR>」「<br>」「<br/>」「<br />」これらにおいてW3Cの基準としては、半角スペースの後に「/」で閉じる「<br />」が最も適切とされています。

 

主流のインターネットエクスプローラーやグーグルクロームなどのブラウザ上では上記どのタグ形式を採用しても、改行は同じように反映されます。しかし一部のブラウザ上では反映されない場合もあります。

 

では結局どれを採用することが正しいのという疑問が生じますが、その点でW3Cの基準に従うことがウェブ全体での風潮であり、グーグルもその点は十分に認識しています。よって、W3Cの基準に準じてHTMLの最適化を行うことをおすすめします。

 

美しいソースとW3Cエラー

W3Cの基準に沿ったコーディングを行っていくと「ソースを綺麗に書くこと」に繋がります。

W3Cの文法チェックでエラーが出てしまう代表的な例として、タグの閉じ忘れや、閉じる順番のミスがあります。

 

例えば、

<a href=”URL”><font color=”#FF0000″>テキスト</a></font>

上記の例ですと、タグを閉じる順番のミスです。

 

正しい書き方としては、

<a href=”URL”><font color=”#FF0000″>テキスト</font></a> となります。

上記のように、タグを閉じる順番を、スタートと逆転させなければいけません。

 

複数のタグを併用する際には、常に大きな箱の中に小さな箱を入れるようなイメージになっていきます。逆に箱を閉じる際には、小さい箱から閉じて次に大きな箱を閉じます。

 

次のポイントとして、「画像を意味するimgタグにはalt属性を入れること」が重要です。

<img src=”画像URL” alt=”画像の説明”>

alt属性として指定されたテキスト内容は、画像のリンク切れや読み込み失敗などがあった際に「代替えテキスト」としてwebブラウザ上で表示されます。W3C規定としては、アクセシビリティの視点からも必須事項となっています。

 

上記以外にも、抑えなくてはならないポイントは多々ありますが、HTMLの改善・最適化を施行する際に「W3Cチェック」を行うことで、細かな改善点が明確になります。

見出しの最適化


HTMLの論理的構造を表す見出し要素(heading要素)として、<h1>〜<h6>タグがあります。稀にSEOを意識しすべての見出しにキーワードを無理に盛り込んでいる例がありますが、本来見出しは<h1>大見出しから<h2>中見出しを設置し、それぞれの見出しに対する具体的な説明をする役割です。

 

よってSEOを意識し、無理に見出しにキーワードを乱入させることは不自然ですので、SEOを意識したキーワードは<h1>に入れておく程度で十分です。

ひとつのページに、ひとつのタイトルが基本です。それぞれ関連性のある情報で構成することを心がけます。

また、<h1>~<h6>の順に大見出し・中見出し・小見出しとなることが自然な記述になります。

 

タイトル以下すべてのページが関連性の高い見出しで構成されることによって、検索エンジンは、情報量豊富なページだと評価します。検索エンジンでキーワードマッチした際、見出しを整理・最適化しているページと、タイトル以下の情報整理がされていないページを比べると、最適化されたページで構成されたウェブサイト全体の検索順位は優位に働きます。

キーワード比率の調整


キーワード比率とは、SEO対策として狙っているキーワードがページ内に登場する回数の比率を指します。

例として、「物流 大阪府」という検索ワードで検索結果に表示させたいページがあるとします。

 

実際そのページは、

「大阪府で物流会社をお探しの方はA会社へお問い合わせください。」というように、「物流」や「大阪府」以外にも「EC」や「発送代行」のように多数のキーワードを含んだ構成になっています。

 

上記のページを「物流 大阪府」で検索結果に表示させたいのであれば、そのページ内にある「物流」「大阪府」のキーワードの比率を1番、2番にすると、検索エンジンから突出されたワードとして反映され、キーワード検索結果上位表示に影響を与えます。

 

キーワード比率チェックツール

キーワード比率の計算式は、「キーワード出現頻度(%)=特定単語の使用数/ページ内で使用されている単語の総数×100」となりますが、無料でキーワード比率をチェックできるツールが公開されていますので、SEOツールまとめページのツールを使用することをおすすめします。

 

ツールを使うと、キーワードがページに何%出現しているのか確認することができます。このとき、1番多く出現させたい「物流」というキーワードの比率を、文字の多いサイトであれば4~5%程度を目安に調整することをおすすめします。また、2番目に多く出現させたい「大阪府」については3~4%ほど目安に調整すると効果的です。

ディレクトリ構造の調整・最適化


ディレクトリ構造・階層とは、例えると、「http://〇〇.com/category/△△△/」というURLの場合は、「/category/△△△/」の部分になります。

 

右にいけばいくほど下の階層になります。4段階や5段階までしか検索エンジンは認識していないという人もいらっしゃいますが、検索エンジンは最下層まできちんと認識しています。不安である場合は階層の浅いページから内部リンクをすることによってクローラーは認識しやすくなります。

しかし、階層が多くなる(階層が深くなる)といくつか問題が生じてきます。

 

ディレクトリ構造における問題点

1.URLが長くなってしまう

URLが長くなってしまうと、その分ページの容量・サイズが大きなものになります。ページの容量・サイズが大きくなりすぎると表示時間が長くなります。表示時間が長くなることによって、検索エンジンからの評価に加えてユーザビリティの面でも表示時間は短いほうが良いと言われています。ページ表示に時間がかかってしまうサイトは直帰率が高まってしまうという理由からです。

 

「URLが長いと表示時間が長くなる?」と思われるかもしれませんがページからのリンクが多くなればその分影響します。短くすれば、サイトの表示時間が短くなるわけですから無駄に長くしない方がいい事になります。

 

2.浅い階層からのリンクをすることは難しい

浅い階層というのは2階層目までのことを指しますが、「3回以内のクリックで最下層のページまで辿りつかせること」が重要になります。しかし、階層が増えてしまいそれを全て2階層目までにリンクを貼ろうとするとサイト内が複雑になってしまいます。

 

より多くのページからリンクを得ていた方がクローラーの巡回はされやすいので、サイトマップを使えばいいかもしれませんが、サイトマップだけでは弱い点もあります。結論として、階層は深くても検索エンジンには認識してもらえるが、「人間にもクローラーにもわかりやすく短い」ことが評価に繋がります。

 

ディレクトリ構造の改善点

1・URLを短くする

検索エンジン・ユーザービリティを考慮したURLにする。

 

2・ディレクトリは分かりやすい範囲で短くする

URLを短くする、階層の浅いサイトからもリンクを貼りやすくするために、整理したディレクトリ構造にすることが必要。

 

3・同じURLを長く運用する

せっかく良質なコンテンツ制作し、多数からリンクを貼ってもらってもURLを変更してしまうとそのページの評 価は下がってしまいます。また、そのリンクからのユーザーがあなたのウェブサイトを訪れようとしてもページに辿り着けないのでは全く意味がないものになっ てしまいます。

 

4・URLにキーワードを含める

検索結果画面にはURLが表示されます。検索キーワードが太字になり、ユーザーの注意を引くことができるので含めた方がいいです。また、日本語もURLに含むことが可能です。

内部リンクの調整・最適化


内部リンクの構築(最適化・調整)することは、ウェブサイトの観覧者にすべてのページを把握してもらえ、検索エンジンに対し効率的なクロールを促すという意味でSEOにおいて重要なものです。

 

内部リンクの考え方

内部リンクの最適化とは、同一ドメイン内のリンク構築を行い、各記事・各ページ同士を繋げる、またはトップページから直接記事にダイレクトリンクすることです。「階層構造」の深い部分はSEO効果が弱まってしまいますので、トップページや他の記事同士をリンクさせていきます。

 

内部リンクの最適化を行えば、検索エンジンに向けたSEO効果だけではなく、サイト全体のアクセス数の増加も図れます。関連性のある記事をリンクさせユーザーに似たような記事があることを伝えて誘導していくことでアクセス数の増加を図り、誘導したい目的のページに向けて内部リンクを最適化していけば商品購入やお問い合わせ件数の増加など成果に繋がります。このような考え方で内部リンクを調整、最適化しましょう。

 

カテゴリー分類でのキーワードを使った内部リンク

サイドバーに配置するカテゴリー名やヘッダーにあるグローバルメニューの設置は重要です。

これらは全てのページに共通の内部リンクを張ることができるため、キーワードを含めたアンカーテキストで内部リンクの最適化を図ればSEOの上で効果的です。

 

内部リンク最適化の重要点としては関連キーワードを含める事です。ユーザビリティを考慮するとキーワードを含めてリンク先が何のページなのかわかるテキスト名が望ましいものです。

 

パンくずリストの設置

「パンくずリスト」とは通常ページ上部にあるナビゲーションのことです。サイト観覧者が「今どのページを見ているのか」迷子にならないように視覚的にサイト内の現在地を示す役割、案内役であり、リンク切れを無くす効果もあります。また、全てのページが内部リンクで繋がるので検索エンジンに対しわかりやすくクロールを促すことができます。その際、アンカーテキストにキーワードを含めるとさらにSEO効果が高まります。パンくずリストで階層構造をもたせましょう。

 

URLの統一化

検索エンジンはURLが統一されてないと、別サイトと認識してしまい、SEO効果が分散してしまいます。よって、URLの記述を統一化させることが重要です。下記に例を挙げますが、「index.html」の有無、「www」の有無などを、URL正規化として301リダイレクトで行います。

 

・http://seo-cares.com/ ・http://www.seo-cares.com/

・http://seo-cares.com/index.html ・http://www.seo-cares.com/index.html

 

確認方法としては、URLに「www.」や「index.html」をアドレスバーに入れてEnterボタンを押します。結果として「www.」や「index.html」が付いている場合は「URLの正規化」がされていません。301リダイレクトを行いましょう。

サイトパフォーマンスの改善


近年でのウェブサイトは、レスポンシブデザインによる軽量化を図っているサイトが増加していますが、ここではウェブサイトの表示速度の高速化及び軽量化について掘り下げてまとめ、ご説明いたします。

 

まず「Google Developersのプロダクト」に「PageSpeed」というウェブサイト最適化に向けたツールがあります。こちらを活用することにより、自身のウェブサイトの的を得た修正点が確認できます。

 

ブラウザのキャッシュを活用する

「ブラウザのキャッシュを活用する」ということは、ウェブブラウザでウェブサーバーへアクセスする際に、その応答のためのExpireヘッダーなどが欠落しているという意味になります。キャッシュ関連のサーバー応答を特に設定せずに運用していれば、ブラウザに、それぞれのファイルがキャッシュされるかどうかはブラウザの実装次第になります。環境条件次第で、ページがアクセスされる度にファイルのダウンロードが発生している状態です。

 

それぞれのブラウザにキャッシュを利用してもらうには、ウェブサーバー側でファイルの有効期限を明示します。Apacheを利用している場合には、Expireモジュールを有効になるように設定を行い、該当するサイトでの設定ファイルでExpiresActiveとExpiresDefaultを設定するようにします。

注意点として、<script>タグでは、IE対応のために「type=”text/javascript”」を記述するのが一般的です。HTML5では「type=」の記述は省略することができますので、「text/javascript」の記述を省略した<script>タグを採用している場合には、ExpiresByTypeにおいてtext/javascript指定は機能しないことになってしまいます。よって、<script>タグでの記述と、ウェブサーバーの設定を一致させないといけません。

 

HTML5でのコーディングを視野に入れると、ExpiresByTypeを使用せず、上記のようにFilesMatchで置いておくか、 下記のようにMIMEタイプを置くことになります。

圧縮を有効にする

「圧縮を有効にする」ということは、gzip圧縮によるサーバー応答の問題です。gzipで圧縮された通信をするには、Apacheであれば、Deflateモジュールの設定することになります。

Nginxは標準設定ファイルでgzipがすでに有効になっている場合が多いですが、圧縮対象設定のMIMEタイプはデフォルトでtext/htmlのみになっているので注意しなければなりません。概ねcss、jsを追加で設定しなければなりません。

スクロールせずに見えるコンテンツのレンダリングブロック JAVASCRIPT/CSS を排除する

「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」ということは、JavaScriptを</body>の直前に配置し、CSSにおいては必要なものだけ<head>タグの先頭側にまとめる作業を行うことになります。

スクロールせずに見えるコンテンツ部分」は、俗に「ファーストビュー」と呼ばれます。目標として、1秒以内にファーストビューの描画が終わることが求められています。この目標を実現するために、「ファーストビューの描画に関係ないものは、描画が終了してから実行する」を徹底していきましょうということになります。

 

JavaScriptやCSSの修正は膨大な作業量になることが多いので、PageSpeedのウェブサーバーモジュールによる自動変換をおすすめします。・PageSpeed Module(https://developers.google.com/speed/pagespeed/module)

 

ウェブサーバーの高速化アプライアンスやプロキシサーバー的なものをこのモジュールで実現することで、すべてのHTTP応答を最適化して配信します。対応するウェブサーバーはApacheとNginxです。これを導入すると、最初にページアクセスが行われたときに、HTMLが解析され、ウェブサーバーから最適化されたHTML、CSS、JavaScript、画像ファイルの配信が可能になります。

 

しかしながら、ウェブサイト全体ベースで自動的な書き換えが生じることになりますので、サイト全体の動作をチェックし直さなければなりません。最初はテスト環境で実行し、自動変換の最適化例を参考にすることをおすすめします。このモジュールによってどのような修正が行われたか察すると、手作業での最適化の参考になります。

 

画像を最適化する

「画像を最適化する」で指摘される項目は主にPNGファイルの最適化です。PNGファイルは最小ファイルサイズで保存されているとは限らず、一般的な画像編集ツールだと大き目のファイルサイズになっています。

 

これを、Tiny png(https://tinypng.com/)や、optipng(http://optipng.sourceforge.net/)などの最適化ツールで再圧縮すると、かなりのファイルサイズを減らすことが可能になります。

 

また、「ロスレス圧縮」という表示もありますが、ロスレス圧縮とは画像表示に必要なデータを間引くことなく圧縮(縮小)するという意味になります。

 

ファイル最適化は以下のように実行します。

「-o7」は最適化レベルの指定をするもので、数値が大きいほど解析回数が増えて、処理が遅くなります。指定なしの場合は「-o2」と同じです。通常ですと「-o2」で十分です。

 

「-strip all」オプションは注意しないといけません。このオプションはoptipngのバージョン7から追加されたmetaデータを削除するものです。このオプションを付け忘れたり、古いバージョンのoptipngを使っていると、「-o7」で最適化していてもファイルサイズが大きくなってしまい、PageSpeedに警告されっぱなしになってしまいます。

 

特にDebianを利用している際には注意をしてください。Debianで最適化する場合には、ソースを入手してビルドした最新版を使う必要があります。簡易的なビルドフローを以下に挙げます。

JAVASCRIPT を縮小する、CSS を縮小する

「JavaScript を縮小する」「CSS を縮小する」ということは、JSファイルやCSSファイルにある余分な空白や変数・関数名を省略することでファイルサイズを縮小できるということです。

最適化ツールは、YUI Compressor(http://refresh-sf.com/yui/)がお勧めです。

 

YUI Compressorは拡張子がjsまたはcssで、JavaScriptなのかCSSなのかを判別しています。拡張子がないファイルを最適化する際には、「–type css」のように指定します。また、UTF-8以外でコードを記述している際には、文字コードを「–charset」で指定します。

サイトパフォーマンスの改善についてのまとめ

近年のウェブサイトやブログでは、ソーシャルボタンの設置や、CSSの多用によって、100点満点は厳しいものだと思います。しかしサイトパフォーマンスの向上はグーグルが推進しているだけのことがあって、SEOの面ではかなり重要です。作業量としては大きなものとなるケースが多いですが、最低でもモバイルとPCで80点以上をキープできるサイト造りを心がけましょう。